Join me in learning jquery plugin development

Http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html

Used to be more curious, jquery plugin is how to develop, how to write their own plug-in?

Yesterday when I visited CodeProject website, I suddenly saw an article: how to write plugin in Jquery.

If the E-text good classmate, you can see the above connection.

Now I write this article on the above website and the combination of my own ideas. Hope to get the support and understanding of Daniel ... The Big Bird flies over ... Welcome to the dress.

Data Source:

"1" How to write plugin in Jquery.

"2" a sharp jquery book

"3" Rascallysnake's Jquery.extend () detailed

I. INTRODUCTION

The purpose of the plug-in is to provide an encapsulation of a series of methods or functions that are already in place, so that they can be reused elsewhere to facilitate later maintenance.

In addition to providing a simple and efficient way to manage elements and scripts, jquery also provides an exception to the mechanism of adding its own methods and additional functionality to the core modules. With this mechanism, jquery allows us to create our own plugins to improve our efficiency in the development process.

The 1.1JQuery plug-in is divided into 3 types:

(1) Plug-in for encapsulating object methods

This type of plugin is the plugin we need to talk about today.

(2) Plug-in that encapsulates global functions

Refers to the ability to add separate functions under the jquery namespace.

(3) Selector plug-in

1.2 What to note about writing jquery plugins:

(1) The recommended naming method for plug-ins is: jquery. [Plugin name].js

(2) All object methods should be attached to the Jquery.fn object, and all global functions should be appended to the JQuery object itself.

(3) Inside the plug-in, this is the jquery object currently fetched through the selector, and unlike the normal method, the internal this point is the DOM element.

(4) All elements can be traversed by This.each

(5) All methods or function plug-ins should end with a semicolon, or the problem may occur when compressing. To be more insured, you can add a semicolon (;) to the plugin's head to prevent their irregular code from affecting the plugin.

(6) The plugin should return a jquery object in order to ensure the plug-in's chained operation.

(7) Avoid using $ as an alias for jquery objects inside a plug-in, instead use the full jquery to represent it. This avoids conflicts.

1.3JQuery plug-in mechanism

jquery provides 2 ways to extend the functionality of jquery. That

①jquery.fn.extend ()

②jquery.extend ()

The first one is what we said earlier in the first case of the plug-in type, the second one refers to the following 2 cases.

Jquery.extend () A very important function in the plugin is to extend an object that already has objects.

Like what:

var newsrc=$.extend (Dest,src1,src2,src3 ...)

Its meaning is to be src1,src2,src3 ... Merge into Dest, and the return value is the merged dest, so you can see that the method is merged.

Example:

var result=$.extend ({},{name: "Tom", Age:21},{name: "Jerry", Sex: "Boy"})

The resulting results are:

Result={name: "Jerry", Age:21,sex: "Boy"}

More detailed can be viewed: jquery.extend function in detail in this method has a good explanation.

Official website: jquery.extend () and JQuery.fn.extend ()

Two. First jquery plugin

If you need to write a jquery plugin, you need to add a property name after the $.fn object, which is actually your plugin name. Its general framework is as follows:

(function ($) {
  $.fn.myplugin = function () {
  
    Start writing functional Requirements here

  };
}) (JQuery);  

Copy Code

Now we need to write the plug-in function is very simple, is to put an object to slowly hide. is to use the fadeout () method.

OK, we open VS 2012. Create a new JScript file and name it: Myplugin.js, and add the following code to it:

(function ($) {
    $.fn.myplugin = function () {
        This.fadeout (' normal ');
    };
}) (JQuery);

Copy Code

How to use it? Very simple.

Create a new HTML page and import the jquery file and just our Myplugin.js file into this page. As follows:

<script src= "Scripts/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script src= "Myplugin.js" type= "Text/javascript" ></script>

Copy Code

JS Code:

<script type= "Text/javascript" >
        $ (document). Ready (function () {
            $ ("#btn1"). Click (function () {
                $ ("#div1"). Myplugin ();
            });
        });
    </script>

Copy Code

HTML code:

<div id= "Div1" >
        My god</div>
    <input id= "btn1" type= "button" value= "button" onclick= "Myclick ()"/>

Copy Code

Well, now that you click on the button on the page, the div will slowly hide ... Because we set the normal, it can also set some values and the like.

The excitement is that since this has smart hints, such as:

It's cool!

Three. Plug-ins are used in multiple element controls.

3.1 Applied in multiple element controls

The 4th place to note in writing the jquery plugin above is that you can use the This.each method if you want to traverse. $ ("ID"). Each can traverse jquery objects, arrays, and collections.

Ok. Knowing this, our new code looks like this:

(function ($) {
    $.fn.hoverelement = function () {
        This.each (function () {
            $ (this). Hover (
function () {
    $ (this). addclass ("Add");
},
function () {
    $ (this). Removeclass ("Remove");
}
);
        })
    }
}) (JQuery);

Copy Code

The. each () method is used primarily for traversal. The code is simple, which is to switch the current object's background-color CSS style to "ADD" and "Remove" directly.

The code for the HTML is:

<divclass="hoverText">        First Button..    </div>    <divclass="hoverText">        Second Button..    </div>    <divclass="hoverText">        Third Button..    </div>

JS Code:

<script type= "Text/javascript" >
        $ (document). Ready (function () {
            $ (". Hovertext"). Hoverelement ();
        });
    </script>

Copy Code

Very simple, not explained.

3.2 Chain Operation
Chained operation? I've heard it all before. For example, the following sentence:

$ ("#div1"). CSS ("Color", "red"). AddClass ("Add"). Animate ({"width": "100px"},1000);

Copy Code

is to be able to implement more operations with "." Behind the current element. This movement is particularly chic.

So how do we achieve this effect? It's easy, I can just get the object back. Note the 6th above: the plugin should return a jquery object in order to guarantee the plug-in's chained operation .

We still look at just the example:

(function ($) {
    $.fn.hoverelement = function () {
       return This.each (function () {
            $ (this). Hover (
function () {
    $ (this). addclass ("Add");
},
function () {
    $ (this). Removeclass ("Remove");
}
);
        })
    }
}) (JQuery);

Copy Code

Code is the same, the only difference is: This.each (function () {This is preceded by a return. This enables us to chain-operate.

And then you do:

$ (document). Ready (function () {
            $ (". Hovertext"). Hoverelement (). CSS ("Color", "yellow");
        });

Copy Code

Can see the text has become a yellow color.

Iv. Customizing your Own plugins

For a business plug-in, customizing the plugin's style is essential. We can change the developer's default style by entering different styles for ourselves. For example, the most common width, height, url, color, and so on. Without these customizations, the developer-developed plug-in will have a significantly reduced value for use.

OK, the following example means that when we hover an object, it can change its text, background, foreground three properties, that is, the textual, the background color, the foreground color. The user can set the value he wants to set, rather than fixing it to death. Of course, if the user is not set, we will give him a default value.

The development framework for defining such plugins is:

In order to prevent some lazy people, we need to set some default values, when it is not set, we use these default values.

var defaultval = {
    Text: ' Your mouse is over ',
    ForeColor: ' Red ',
    BackColor: ' Gray '

Copy Code

How is the default value combined with the values that the user passes in? This will require the $.extend () knowledge we talked about at the outset.

var obj = $.extend (defaultval, Options);

This way, the user-defined value overrides the default user value. If the user does not define a value, it is customized with the system.

The code is as follows:

(function ($) {
$.fn.texthover = function (options) {//options often use this to indicate that there are many parameters.

var defaultval = {

Text: ' Your mouse is over ',
ForeColor: ' Red ',
BackColor: ' Gray '
};
Default value
var obj = $.extend (defaultval, Options);

Return This.each (function () {

var Selobject = $ (this);//Get current Object

var oldtext = Selobject.text ();//Gets the text value of the current object
var oldbgcolor = selobject.css ("Background-color");//Gets the background color of the current object
var oldcolor = selobject.css ("color");//Gets the color of the current object's font

Selobject.hover (function () {///defines a hover method.

Selobject.text (obj. Text);//Assign Value
Selobject.css ("Background-color", obj. BackColor);//Assign Value
SELOBJECT.CSS ("Color", obj.) ForeColor);//Assign Value
},
function () {
Selobject.text (OldText);
Selobject.css ("Background-color", Oldbgcolor);
SELOBJECT.CSS ("Color", oldcolor);
}
);
});
}
}) (JQuery);

Copy Code

The code is simple, there are some explanations on it, and it is not wordy at the moment.

How to use it? Very simple.

HTML Code:

<div id= "Div1" class= "Textbar" >
    Mouse over here .....
</div>
<div id= "Div2" class= "Textbar" >
    Mouse over here .....
</div>

Copy Code

JS Code:

$ (document). Ready (function () {

    $ (' #div1 '). Texthover ({
        Text: ' I am going to over ... ',
        ForeColor: ' Yellow ',
        BackColor: ' Red '
    });
    $ (' #div2 '). Texthover ({Text: ' I am Second div ... '});
});

Copy Code

You can see the effect.

I hope it will be of help to you.

OK, so far, it should be a basic element of plug-in development. Originally there is a more complex code, sent together, wait for the next section!

Punch Source Download

Http://files.cnblogs.com/damonlan/HowToWritePluginInJQuery.rar