Handwritten jQuery plug-in summary by yourself, handwritten jquery plug-in

Handwritten jQuery plug-in summary by yourself, handwritten jquery plug-in

JQuery is another excellent JavaScript framework after Prototype. It is deeply loved by developers and has a wide range of users. JQuery is a good place for user customization. That is, we can write our own plug-ins to improve jQuery's functions, customize the functions we need, and eliminate redundant code, page loading can be upgraded to a certain extent.

After the interview, I was very touched, that is, what you want to do is a developer who understands ten items or is proficient in one item? So it took several days to study jQuery source code and understand jQuery's event mechanism, selector, and browser compatibility. Later, I always wanted to write a jQuery plug-in to implement a simple function.

As shown in, the plug-in implements the function of moving the link when the mouse is over a link. After the mouse leaves, the link is reset.

The core part of Html is
Copy codeThe Code is as follows:
<Ul id = "catagory">
<Li> <a href = "#"> Monday </a> </li>
<Li> <a href = "#"> Tuesday </a> </li>
<Li> <a href = "#"> Wednesday </a> </li>
<Li> <a href = "#"> Thursday </a> </li>
</Ul>

The above functions are implemented as follows if we simply use jQuery:

Copy codeThe 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 functions, write them as plug-ins in. js, and link them to HTML files:

Copy codeThe 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 set to the variable. In this example, it is a ul object.
Var obj = $ (this );
// Obtain the object in ul
Var items = $ ("li a", obj );

// Add the hover () event to
Items. hover (function (){
((This).css ("color", o. hoverColor );
// "Queue false" indicates that the video is not added 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 original jquery library file of src is also required before the external chain plug-in. The method for calling the plug-in is as follows:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
$ ("# Catagory"). paddingList ({animatePadding: 30, hoverColor: "Red "});
});