JQuery plug-in writing

1. Overview

First look at the html code

Copy codeThe Code is as follows:
<Ul id = "catagory">
<Li> <a href = "#"> jQuery </a> </li>
<Li> <a href = "#"> Asp.net </a> </li>
<Li> <a href = "#"> SQL Server </a> </li>
<Li> <a href = "#"> CSS </a> </li>
</Ul>

For example, when the cursor moves to tag a, tag a moves a distance to the right and restores position a when it leaves. The implementation method is as follows:

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 will extend this method and write it into the form of jQuery plug-in. It can be used in other projects in the future, and some attribute values can be easily changed. Now let's take a look at the jQuery plug-in writing.

2. jQuery plug-in Structure

The following structure should be a good structure for writing jQuery plug-ins. I have translated some comments of the original author.

Copy codeThe Code is as follows:
// To avoid conflicts, wrap our method in an anonymous method.
(Function ($ ){
// Extend this method to jquery
$. Fn. extend ({
// Plug-in name
Pluginname: function (){
// Traverse the set of matching elements
Return this. each (function (){
// Write the corresponding code here for processing
});
}
});
// Pass jQuery to the method, so that we can use any javascript variable to replace "$"
}) (JQuery );

Next, add some changeable attributes to the plug-in so that you can make some changes as needed. At the same time, we should provide corresponding default values.

Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. extend ({
// Pass the selectable variables to the Method
Pluginname: function (options ){
// Separate the default values with commas (,).
Var defaults = {
Padding: 20,
MouseOverColor: '#000000 ',
MouseOutColor: '# ffff'
}
Var options = $. extend (defaults, options );
Return this. each (function (){
Var o = options;
// Write the corresponding code here
// You can obtain the variable value as follows:
Alert (o. padding );
});
}
});
}) (JQuery );

3. Implement the jQuery plug-in

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 );

Finally, use the plug-in as follows:

Copy codeThe Code is as follows:
// Use the plug-in
$ (Document). ready (function (){
$ ("# Catagory"). paddingList ({animatePadding: 30, hoverColor: "Red "});
});

Author: Friend You Source: jQuery Learning