Learn notes to share the jquery plugin _jquery

The plug-in (Plugin) is also a jQuery extension (Extension), a program that follows a certain specification of the application interface. At present, the JQuery plug-in has more than thousands of kinds, by the developers from all over the world to write, verify and improve. For jquery developers, the direct use of these plug-ins will quickly stabilize the architecture system, saving project costs.

A Plug-in overview

Plug-ins are based on JQuery's core code, writing a composite of a certain specification of the application. In other words, plug-ins are also jQuery code, through JS file introduced the way to implant can.

There are many types of plug-ins, mainly can be divided into: UI classes, forms and validation classes, input classes, special effects classes, Ajax classes, sliding classes, graphics and image classes, navigation classes, integrated tool classes, animation and so on.

The introduction of Plug-ins requires a certain step, basic as follows:

• 1, must first introduce the Jquery.js file, and before all plug-ins introduced;
• 2, the introduction of Plug-ins;
• 3, the introduction of plug-ins around, such as skin, Chinese bags and so on.
  

For example, the most commonly used form validation plug-ins: Validate, in addition to the most basic plug-in file jquery.validate.min.js, there are messages_zh.js and so on countries of the language pack can be used for you.

How to use this plugin is not described here, you can go to see the video of the online jquery plugin--validation Plugin, which describes the various configuration of this plug-in, as well as the extension.

Analogy, a good plugin, detailed documentation is essential, detailed look at the documentation can be, and local testing can give you a quick introduction to the use of various plug-ins.

There are a variety of other written plug-ins for you to use: such as the management of cookies Plug-ins –cookie and so on.

Plug-ins can go to the jquery website plug-in module to find the jquery Plugin Registry

Two. Custom Plugin

We used other people to provide good plug-ins, the use of very convenient. If the market can not find their own satisfactory plug-ins, and want to encapsulate a plugin for others to use. Then you need to write a jQuery plugin yourself.

1. Plug-in type

According to functional classification, the form of plug-ins can be divided into three categories:

• A plug-in that encapsulates an object method; (that is, a JQuery object based on a DOM element, locality, use the most)
• A plug-in that encapsulates a global function; (Global encapsulation)
• Selector plug-in. (Similar to. find (), such as: color (red) to select all the red elements, and so on)

2, the basic points of plug-ins

It is mainly used to solve various problems, such as the conflicts and errors caused by plug-ins, including the following:

• The plugin name is recommended for use with JQuery. [Plug-in name].js to avoid conflicts with other JS files or other libraries (alert can be used $.[ Plug-in name]) to verify that the global method exists;
• Local objects attach Jquery.fn objects, global functions are attached to the JQuery object itself (you can use alert ($ (selector)). [ Plug-in name]) to verify that the local method exists;
• Inside the plug-in, this point is the current local object (the jquery object obtained through the selector);
• All elements can be traversed by This.each;
• All methods or plug-ins must end with a semicolon to avoid problems (in order to be more secure, you can add a semicolon to the plugin head first);
• The plugin should return a JQuery object to ensure a chain-type operation;
• Avoid internal use of $ in plug-ins, if you want to use, use closures to pass jquery in, so that the inside of the plug-in continue to use $ as the alias for jquery.
  

;(function ($) {//Here the $ character is used as the parameter/* of the anonymous function/
* To write the code here, use $ as the abbreviation alias for jquery/
}) (jquery);//Here jquery is passed as an argument to the anonymous function.

3. Write a plugin

Let's say our plug-in requirements are: Implement a Drop-down menu, and when you move the element, show the Drop-down list and take it back when you move it. And you can set the text color when it expands.

As a rule, we can constrain the HTML structure when writing plug-ins. Now suppose we have the following HTML structure on our page:

<ul class= "List" >
 <li> Navigation list 1
  <ul class= "nav" >
   <li> navigation list 1</li>
   <li > Navigation list 2</li>
   <li> navigation list 3</li>
   <li> navigation list 4</li>
   <li> navigation list 5</li >
   <li> navigation list 6</li>
  </ul>
 </li>
 <li> navigation List 2
  <ul class= " Nav ">
   <li> navigation list 1</li>
   <li> navigation list 2</li>
   <li> navigation list 3</li>
   <li> navigation list 4</li>
   <li> navigation list 5</li>
   <li> navigation list 6</li>
  </ul>
 </li>
</ul>
<!--default has been introduced into jquery-->

Here, we have the first requirement for the implementation of our plug-ins, must be in the need for hover to show the interior of the elements to establish a UL list, and ClassName must be nav. (Inside the plug-in is based on this condition to make a fuss)

Here we can start writing our plugin. Save As JQuery.nav.js (in accordance with the above mentioned requirements, default has been imported)

;(function ($) {
 $.extend ({//plug-in definition on the global method
  "NAV": function (color) {//argument, this is just a trigger, when you write, the parameter options can be richer, For example, incoming JSON objects, and so on
   $ ('. Nav '). CSS ({//Set style for expanded Drop-down list, here for a detailed description of
    "List-style": "None",
    "margin": 0,
    " Padding ": 0,
    " display ":" None ",
    " color ": color//by the user control hover, display the text color of the list
   });
   $ ('. Nav '). Parent (). Hover (//here is used. Nav's parents (that is, the hover to the element)
    //Because we can only set in the scope of the plug-in requirements, if the use of external selectors, it violates this principle
    function () {
     $ (this). Find (". Nav"). Stop (). Slidedown ("normal");/note We use the animation method of jquery here
    },function () {
     $ (this). Find (". Nav"). Stop (). Slideup ("normal");/pay attention to the use of the Stop (), or there will be a similar accordion effect, but that is not what we need};}
 );
}) (JQuery);

Note: The CSS method is used here only for convenience, in the actual plug-in writing process, if there is such a large number of CSS style writing, it is recommended to define the external CSS style, for example, can be rewritten as:

Plugins are dependent on CSS that needs to be imported into HTML with the plugin

. hover{/* plugin must be style * *
 list-style:none;
 margin:0;
 padding:0;
 Display:none;
}

Modified inside the plugin.

$ ('. Nav '). addclass ("hover");//separate CSS from jquery
$ ('. Nav '). CSS ("color", color);//enabled when user settings exist, no use (to judge)

Just said is the plug-in JS file, finally to play the effect, don't forget the page js add so a word (the current plug-in definition in the global method)

$ (function () {
 $.nav ("#999");//Invoke the global method implemented by the plug-in and set its display background color to #999.
});

In this way, our global plug-ins are written, and the call is complete, in your page refresh to see if there has been an effect?

However, because our method is defined on the whole, now as long as the page appears in the structure of our plug-ins, there will be hover rendering effect, but sometimes we do not want to do so, we want it in the local, in the element I specified call. So we need to make some changes to it, and make it a local method, but it's also very simple:

;(function ($) {
 $.fn.extend ({//defined as Local method
  "NAV": function (color) {
   $ (this). Find ('. Nav '). addclass (' hover ') //It has already been said, this time to point to the element $ (this) that invokes the method. Find
   ('. Nav '). CSS ("color", color);//Under the current element, add a find filter, implemented in the corresponding element.
   $ (this). Find ('. Nav '). Parent (). Hover (
    function () {
     $ (this). Find (". Nav"). Stop (). Slidedown ("normal");
    , function () {
     $ (this). Find (". Nav"). Stop (). Slideup ("normal");
   Return this;//the current object}})
(JQuery);

Let's go and refresh the browser. You will find, gee, how did not effect? Of course, because the original code is directly in the global call, now become a local method, obviously can not do so, need to do a little change:

I'm not going to post HTML code here, but hopefully you'll be able to copy several of the HTML code below it in practice to think about its implementation.

$ (function () {//the EQ here (0) represents the effect only on the first copy, the result is no effect after copying.
 //(You can remove the Find filter above and try again, and you will see that he has the remaining several effects)
 $ (". List"). EQ (0). NAV ("red");//Call local method
});

Now go back to our writing plug-in code corresponding to the above written plug-in key points, think about what we have not done? It will be found that the basic already can correspond. Now we're done with a drop-down menu plugin.

In fact, writing plug-ins is not difficult, the most important thing is that when we write plug-ins, we must always pay attention to such points, every detail is followed in the practice of everyone summed up the best implementation, in order to customize the implementation of a good plug-in.

The code is first written by a person, and then the machine is looked at.