[jquery] self-made jquery Plugin-part 1

Sometimes when you write jQuery, you'll often find that some simple effects can be re-used. It just doesn't seem like a good thing to use Copy & Paste every time, is there any way we can use these effects elsewhere?

Yes, with JQuery's Plugin machine.

Is it difficult to understand the Plugin system of JQuery? It's not a bit of a fact. Here's the simplest way to explain how to make a simple Plugin.

Of course, before you do, you need to understand JavaScript's class, object, variables scope, and anonymous function, which can be a reference to the JavaScript encyclopedia .

Plugin version

The quickest way to write the Plugin of JQuery is to change the Plugin, but how do you find good examples in so many Plugin? Don't worry, I'll provide you with one of the simplest example versions:

jQuery.fn.mytoolbox = function() {return this.each(function() {});};

First of all, Mytoolbox is our plugin name, using JQUERY.FN we can register it as the plugin of JQuery. Then we point JQuery.fn.mytoolbox to an anonymous function (anonymous function), also known as callback, and this callback is very simple, that is, using the each method of JQuery, one by one to perform the response For

Note the This key in the anonymous function, which points to a jquery object, and this jquery object is what we want to specify, and I'll take a step further to explain.

Using Plugin

Now save the above version into Mytoolbox.js, and put it together with Jquery.js. Then create an HTML test file with the following content:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><div id= "test1" class= "Test" >dot me! </div><div id= "test2" class= "Test" >dot me! </div><div id= "Debug" ></div><script type= "Text/javascript" src= "Jquery/1.2.3.js" ></script><script type= "Text/javascript" src= "Jquery/mytoolbox.js" ></script><script type= "Text/javascript" >$ (function () {$ ('. Test '). Mytoolbox ();});</script></body>

First, the JQuery library was quoted in the HTML and we wrote the Plugin file, and then I placed two div elements of class test on the canvas. Then we use the following code to call our Plugin:

$(function () {$(‘.test‘).mytoolbox();});

The intention here is to put the above two div sets Mytoolbox this Plugin, so Plugin can move, very simple?

Join the Motion

Of course, this Plugin nothing ever started, it's an empty skeleton. Now we're going to add blood to the meat and let it move.

Simply add a line to each of the callback:

jQuery.fn.mytoolbox = function() {return this.each(function() {alert(this.id); // 加入此行});};

And then re-browsing the tested HTML files, you'll notice that you've jumped out of the two messages window, the content of which is test1 and Test2, which proves that our Plugin is actually applied to the two div of class test.

Now there are two this, are they the same thing? No, because of the difference between scope and the touch-like, they are different things. Outside this is a JQuery object that points to the $ ('. Test ') object we specified, and the this in each callback is a DIV element because each is a iterator function, so alert (t His.id) will execute twice. The first time this will point to #test1 this Div, the second point points to #test2 this div.

Note: Here I use #test1 to represent the element with ID test1.

Now I want to change the ID of the element before I press the DIV element, what do we do? We'll switch to the click event as follows:

jQuery.fn.mytoolbox = function() {return this.each(function() {jQuery(this).click(function () {alert(this.id);});});};

Since this in each callback is a DOM element, we will use JQuery () to wrap this so that it is convenient to specify the click event of the element. Now re-browse the page and click on any div to jump out of the video window.

Wrap it up one more layer

If you're calling multiple jquery in each of the callback, it's a tiring thing to write jquery all the time, and isn't jquery easy to write $? Can't you just use it? Of course, that's just what might happen with other JavaScript libraries, so we're going to use the following approach to wrap our Plugin:

;(function($) {$.fn.mytoolbox = function() {return this.each(function() {$(this).click(function () {alert(this.id);});});};})(jQuery);

JavaScript can cover an anonymous function directly with a group of small parentheses [()], and then a group of small parentheses [()] to call this anonymous function, and the second group of small parentheses can be placed in the parameters of this anonymous function. So in the code above, we wrap the Plugin code in an anonymous function, and then use our usual $ notation, and then use the aforementioned principles to bring jQuery into our Plugin, so we can be very happy in the Plugin of the day, and we will be able to We are familiar with the $ symbol. To the front of the number (;), the main thing is to consider this Plugin file and other JS files in the compression and put in.

Note: $ is a legitimate variable name in JavaScript.

In the back, I'll skip over this wrap, and in the actual file please don't forget to add it.

Add option

Next I want each of the callback functions to be user-customizable, so I need a choice that the user can set. Like other Plugin, we let our Mytoolbox accept a JSON object:

$.fn.mytoolbox = function(settings) {var _defaultSettings = {callback: function () {alert(this.id);}};var _settings = $.extend(_defaultSettings, settings);return this.each(function() {$(this).click(_settings.callback);});};

First, we add the settings to Plugin, which is the general Plugin setting. And then it's _defaultsettings, which helps us to provide a preset value for settings when the user does not specify any setting value.

Then I use the Extend method provided by JQuery to cover the preset values set by the _defaultsettings in Settings, and then store the results in the _settings, and then we'll use the new _settings variables to do what we do. Setting value.

Now we have specified a callback item in _settings (the preset is alert) and then assign it to the click-Trigger of the DIV element. Now I'm going to change this event processor in the HTML page so that it no longer uses alert, but instead show the results in Div#debug. The program is as follows:

$(function () {var debug = $(‘#debug‘);$(‘.test‘).mytoolbox({callback: function () {debug.html(debug.html() + this.id + ‘<br />‘);}});});

Re-browse the page again to see if the effect is done as we imagined?

Modify a Touch Event

Let's pretend that we don't want to use the click, but want the mouse to move over and touch the callback? This is the time to draw on the JQuery bind method:

$.fn.mytoolbox = function(settings) {var _defaultSettings = {bind: ‘click‘,callback: function () {alert(this.id);}};var _settings = $.extend(_defaultSettings, settings);return this.each(function() {$(this).bind(_settings.bind, _settings.callback);});};

Here I'm adding a bind setting, which is to use the Click event. Back to the HTML page, we switched to MouseOver to touch callback:

$(function () {var debug = $(‘#debug‘);$(‘.test‘).mytoolbox({bind: ‘mouseover‘,callback: function () {debug.html(debug.html() + this.id + ‘<br />‘);}});});

Re-browsing the HTML page, when the mouse moves through the DIV element, does it present an ID?

Here, I believe everyone should understand how to build a jQuery Plugin? Next, I'll take a look at some of the more important parts of our own jQuery Plugin.

[jquery] self-made jquery Plugin-part 1