Summary of DIY handwritten jQuery plug-ins_jquery

jQuery is another excellent JavaScript framework after Prototype. It is deeply loved by developers and has a wide range of users. A good thing about jQuery is user customization, that is, we can write our own plug-ins to improve the various functions of jQuery, customize the functions we need, eliminate redundant code, and have a certain degree of flexibility when loading the page. improvement.

After the interview, I was very touched. Do you want to be a developer who knows ten things or is proficient in one? So I spent a few days studying the jQuery source code diligently, and learned about jQuery's event mechanism, selectors, and how browser compatibility is achieved. Since then, I have always wanted to write a jQuery plug-in to simply implement a small function of my own.

As shown in the picture above, the function implemented by the plug-in is that when the mouse is on a link, the link moves, and after the mouse leaves, the link returns to its original position.

The core part of Html is

Copy code The code is as follows:

• Monday


• Tuesday


• Wednesday


• Thursday

If we simply use jQuery to implement the function at the beginning above, it would be implemented like this:

Copy code The code is as follows:

$(document).ready(function() {
$("#catagory a").hover(function() {
           $(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });                                 }, function() {
           $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });                                    });
});

Now, we encapsulate the function and write it as plugin.js, and then link it in the HTML file:

Copy code The code is as follows:

(function ($) {
$.fn.extend({
//Plug-in name - paddingList
        paddingList: function (options) {                         //Parameters and default values ​​
            var defaults = {                                                           animatePadding: 10,
hoverColor: "Black"
                                                                               var options = $.extend(defaults, options);                                        return this.each(function () {                                                                     var o = options;                     //Assign the element collection to the variable. In this case, it is the ul object                 var obj = $(this);                            //Get the a object in ul
                var items = $("li a", obj);                          
                                                                                                                                                                                                                                                                                            to items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false means not to add to the animation queue
                                $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
                       }, function () {                                                                                $(this).css("color", "");
                                                                        $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });                  });                                             
             });                                                                                                             });
})(jQuery);



Of course, the external link plugin also needs the original jquery library file of src. The way to call the plug-in is as follows:




Copy code


The code is as follows:


$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});