20151213Jquery Learning Notes-Plugins

The plug-in (Plugin) also becomes a jQuery extension (Extension), which is a program that is written in an application interface that follows certain specifications. There are now more than thousands of JQuery plugins, written, validated and perfected by developers from all over the world. For jQuery developers, direct use of these plugins will quickly stabilize the architecture system and save project costs

A Plugin Overview

Plug-ins are based on the core code of JQuery and write applications that have a certain standard of composition. In other words, the plug-in is also jQuery code, through the introduction of JS files can be implanted.

There are many kinds of plug-ins, mainly can be divided into: UI class, form and validation class, input class, Effect class, Ajax class, sliding class, graphic image class, navigation class, comprehensive tool class, animation class and so on.

The introduction of plug-ins requires a certain amount of steps, basically as follows:

1. The Jquery.js file must first be introduced and introduced before all plugins;

2. Introduction of plugins;

3. Introduce the peripheral of the plug-in, such as skin, Chinese bag, etc.

Two Verify Plug-ins

Validate.js is one of the more excellent forms validation plugins in JQuery. This plugin has two JS files, one is the main file, the other is the Chinese package file. When used, you can use the min version; here, for teaching, we don't compress the version

Verify that the plug-in contains two files: Jquery.validate.js and Jquery.validate.messages_zh.js.

HTML Content

<scripttype= "Text/javascript" src= "jquery.validate.js" ></script> <scripttype= "Text/javascript" src = "Jquery.validate.messages_zh.js" ></script> <form> <p> User name: <inputtype= "text" class= " Required "Name=" username "minlength=" 2 "/> *</p> <p> e-mail: <inputtype=" text "class=" Requiredemail " Name= "email"/>*</p> <p> URL: <inputtype= "text" class= "url" name= "url"/></p> <p>< Inputtype= "Submit" value= "Submission"/></p> </form>

JQuery Code

$ (function () {$ (' form '). Validate ();});

As long as the Validate () method is called through the JQuery object of the form element, it is possible to implement validation effects such as "required", "cannot be less than two bits", "e-mail is incorrect," "URL is incorrect." In addition to the JS-side validate () method call, the form also needs to be set to the final validation effect.

1. Required: In the form set class= "required";

2. Must not be less than two bits: in the form set minlength= "2";

3. E-mail: Set class= "Email" in the form;

4. URL: Set class= "url" in the form.

Note: This chapter is simple to understand the use of plug-ins, not for a feature of the plugin to explain in detail. For example, the validation plugin validate.js, similar to JQuery, also has a variety of operating methods and functions, similar to the manual of the same query and explanation. As a result, we will go through the project to explain in detail the use of plug-ins.

Three Auto-Complete Plugin

The so-called auto-completion is when the user enters some characters, the intelligent search out contains all the contents of the character. For example: Enter a to display a list of matching items.

HTML Content

<scripttype= "Text/javascript" src= "jquery.autocomplete.js" ></script> <scripttype= "Text/javascript "Src=" jquery-migrate-1.2.1.js "></script> <linkrel=" stylesheet "href=" Jquery.autocomplete.css "type=" Text/css "/>

JQuery Code

varuser=[' about ', ' family ', ' but ', ' black '; $ (' forminput[name=username] '). AutoComplete (user,{minchars:0//Double-click to show All Data});

　　

Note: This autocomplete plugin uses an older version of jquery, with some methods that have been deprecated by the new version of jquery, which must be backwards compatible to be effective. So, to find the plugin, pay attention to the version he insisted on.

Four Custom Plugins

In the front we use the other people to provide good plug-ins, the use of very convenient. If you can't find a plugin on the market, and want to encapsulate a plugin for others to use. Then you need to write a jQuery plugin yourself.

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

1. Plug-ins that encapsulate object methods (that is, JQuery objects based on a DOM element, locality)

2. Plug-ins that encapsulate global functions; (Global encapsulation)

3. Selector plug-in. (Similar to. FIND ())

Through the accumulation of plug-in development, developers gradually agreed to some of the basic points to solve various problems caused by the plug-ins, such as the conflict, errors, including the following:

1. The plug-in name is recommended using jquery. [Plugin name].js, in order to avoid conflicts with other JS files or other libraries;

2. The local object is attached to the Jquery.fn object, and the global function is attached to jquery;

3. Inside the plug-in, this point is the current local object;

4. All elements can be traversed by This.each;

5. All methods or plugins must be terminated with a semicolon to avoid problems;

6. The plugin should return the JQuery object, in order to ensure that the concatenating can be chained;

7. Avoid plug-in internal use $, if you want to use, please pass jQuery in.

In accordance with the above points, we develop a local or global navigation menu plug-in. As long as the navigation <li> tag is embedded inside the <ul> to pull down, and the class is NAV, you can complete the drop-down menu.

HTML section

<ulclass= "List" >   <li> navigation list     <ul class= "nav" >       <li> navigation list 1</li>       <li > Navigation list 1</li>       <li> navigation list 1</li>       <li> navigation list 1</li>       <li> navigation list 1</li >       <li> navigation list 1</li>    </ul>   </li>   <li> navigation list     <ul class= "NAV" >      <li> navigation list 2</li>     <li> navigation list 2</li>     <li> navigation list 2</li>      < Li> navigation list 2</li>     <li> navigation list 2</li>     <li> navigation list 2</li>    </ul>   </li> </ul>

　　

Jquery.nav.js Part;(function ($) {$.fn.extend ({' Nav ': function (color) {$ (this). "Find ('. Nav '). css ({    liststyle: ') None ',     margin:0,    padding:0,     display: ' None ',     Color:color}); $ (this). Find ('. Nav '). Parent (). Hover ( Function () {$ (this). Find ('. Nav '). Slidedown (' normal '),},function () {$ (this). Find ('. Nav '). Stop (). Slideup (' normal ') ; }); returnthis;}); }) (JQuery);

　This tutorial is from the North Wind network

20151213Jquery Learning Notes-Plugins