Sharing how to write jQuery plug-in_jquery

1. Overview

Look at the html code first

Copy code The code is as follows:

 
• jQuery

 
• Asp.net< ;/li>
   
• Sql Server

 
• CSS< ;/a>

For example, we want to realize that when the cursor moves to the a label, the a label moves a certain distance to the right, and the a position is restored when it leaves. The implementation method is as follows:

Copy code The code is as follows:

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

Now we will extend this method and write it in the form of a jQuery plug-in. It can also be used in other projects in the future and can easily change some attribute values. Now let's take a look at how to write the jQuery plug-in.

2. Structure of jQuery plug-in

The structure below should be a better structure for writing jQuery plug-ins. I have translated some of the original author's comments accordingly.

Copy code

The code is as follows://To avoid conflicts, use our method with a Wrap the anonymous method in (function($) {

//Extend this method to jquery

$.fn.extend({
) //Plugin name
pluginname: function() {
                                                                                                    });
//Pass jQuery into the method so we can use any variable in javascript instead of "$"                                                                                                     
Next, we add some changeable attributes to the plug-in so that users can make some changes according to their needs. At the same time, we should provide corresponding default values.





Copy code


The code is as follows:

(function($){
$.fn.extend({
// Pass optional variables to the method
pluginname: function(options) {
Set default values ​​separated by commas
var defaults = {
                                 Color: '#ffffff'
                                                                                                                                                $.extend(defaults, options); value
                alert(o.padding);
3. Implement jQuery plug-in





Copy code


The code is as follows:

(function ($) {
$.fn.extend({
) //Plug-in name - paddingList
       paddingList: function (options) {
                                                       
var defaults = {
animatePadding: 10,
hoverColor: "Black"
var options = $.extend(defaults, options);
                                                                                 Function () {
var o = options;
// Payment element set to variables. Object
               var items = $("li a", obj);                                                $(this).css( "color", o.hoverColor);
                                                                                                                                                                                                                         ; true, duration: 300 });
                     );
Finally, here’s how to use the plug-in:





Copy code


The code is as follows:


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

});

Author: Friend Your source: jQuery Learning