The notation and specification of jquery plugins

First, before specifying the plugin, let's assume a usage scenario: There is an HTML page (or. aspx page), and a 5-row, 3-column table, the:<table></table> tag, is placed on the page with the following code:

<tableid= "NewTable" >    <tr>         <td>1</td><td>1</td><td>1</td>    </tr>     <tr>        <td>1</td><td>1 </td><td>1</td>    </tr>    <tr>         <td>1</td><td>1</td><td>1</td>     </tr>    <tr>         <td>1</td><td>1</td><td>1</td>    </tr >    <tr>        <td>1</td> <td>1</td><td>1</td>    </tr></table>

The function I want to implement is to move the mouse over a row in the table, highlight the current row, and the other rows are normal.

OK, in conjunction with this scenario, we'll explore how to use the jquery plugin to achieve the above functionality. Common jquery plugins are written in the following ways:

1. Extensions to jquery itself
As the name implies, this plug-in is an extension of jquery's own library of methods. In use by the time of the $. MethodName () is used in a direct manner.
Plug-in code examples:

$.extend ({    handletableui: function (table) {         varthistable = $ ("#"  +table);                 $ (thistable). Find ("tr"). Bind ("MouseOver",function  () {             $ (this). CSS ({color:  "#ff0011", Background: "Blue"  });         });         $ ( thistable). Find ("tr"). Bind ("Mouseout",function  () {             $ (this). CSS ({color:  "#000000", Background: "White" &NBSP;});         });     });

Example Description: When it comes to extending jquery itself, it needs to be developed in the form of $.extend (), and the Extend () method of jquery gives us a way to extend jquery itself, and in the Extend () method we use {...} In the form of a specific method body. The most important of these is to define our own extension methods, such as the Handletableui in the example. Defined by: Method name: Function (parameter) {method body}. In this way we can define jquery's own extension method, and this method can be displayed through smart hints on the Web page. The code that is called in the page is as follows:

<scripttype= "Text/javascript" > $ (document). Ready (function () {$.handletableui ("newtable"); });</script> 2. Extending HTML markup or page elements
Using this plug-in extension, when using this plug-in, you need to first reference a jquery-wrapped page element, such as $ ("#tableId"). Method ().
Plug-In code example: (function  ($) {    $.fn.settableui= function (options) {         var defaults = {             evenrowclass: "Evenrow",             Oddrowclass: "Oddrow",             activerowclass: " Activerow "        }         Varoptions = $.extend (defaults, options);         this.each (function () {             varthistable=$ (This);             $ (thistable). Find ("tr"). Bind ("MouseOver", function   () {                $ ( This). CSS ({color:  "#ff0011 ", Background:" Blue "&NBSP;});             });             $ (thistable). Find ("tr"). Bind ("Mouseout ",function  () {                 $ (this). CSS ({color:  "#000000", Background: "White" &NBSP;});             });         });     }) (JQuery);

Example Description: When you want to make a jquery extension to a page element, you need to use (function ($) {...}) (JQuery), the way to develop. In the "..." section, define our own method, defined by: $.fn. Custom method name =function (parameter) {...}; Defines the specific content of the extension method. When the page is called, it differs from the extension of jquery itself. The specific calling code is as follows:

<script type= "Text/javascript" > $ (document). Ready (function () {$ ("#newTable"). Settableui (); });</script> 3. Instead of explicitly invoking jquery on the page, you can implement a call to the plugin by adding a jquery plug-in script reference directly. In general, if you need to use some global jquery plug-ins, that is: plug-in methods do not need to explicitly call, but the reference script, and this plug-in generally to the entire Web page to be configured or set the role of the global, such as: to <body></body> The internal content is overall layout, which can be implemented by script references. Plug-In code example: (function  ($) {    $.tableui= {set: function  () {         varthistable = $ ("table");         $ ( thistable). Find ("tr"). Bind ("MouseOver",function  () {             $ (this). CSS ({color:  "#ff0011", Background: "Blue" &NBSP;});         });         $ (thistable). Find ("tr"). Bind ("Mouseout", function  () {            $ (this). CSS ({color:   "#000000", Background: "White" &NBSP;});         });     }    };    //you need to make a self-call     $ here (functiOn () {        $.tableui.set ();     });}) (jQuery); example: If the above code is in the My.plugin.js file, then we just need to add a reference to the script file on the page, referenced by: <scriptsrc= "Scripts/my.plugin.js" Type= "Text/javascript" &GT;&LT;/SCRIPT&GT; of course, in all the places where jquery is used, you need to first add a reference to the jquery library script. In the code of the reference plug-in, the most important thing is in the plug-in to actively invoke their own written plug-in method, the above code has comments in place. Otherwise, the plugin code we write will not work.   ##################################################################  Please add a comment to your codeMany people do not like to annotate, too troublesome, this is a very bad habit. There is no perfect jquery plugin in the world, it's not just for others to see, but more important to see for yourself. You should take notes as part of your code and develop the habit of annotating them, especially when writing JavaScript. 1. Add the file description comment before all the code
For example:

(function ($) {
.......
}) (JQuery); 2, the function must add the annotation

For example, the following code is one of the methods SetContents:zmc.tips.prototype = {

Setcontents:function (content) {
...........
}}3, parameters must be annotated

For example:
Default parameters
$.fn.tips.defaults = {

Applyto:null,

Content: "",

Position: "Topmiddle",

Offest: {"Left": 0, "Top": 0},
/** Hint Box color *
/color: "Blue"
} second, JavaScript variable specification

In JavaScript, there is no real sense of common variables, private variables, constants and other concepts, when the JavaScript code reaches a certain number of levels, over time to look back to the code they wrote, will be dizzy.
1, please add "_" in front of the private variable for example: var _pub = this.pub;
2, the constant capital, such as: this. COLOR = "Red";
3, the jquery object variable before adding "$" such as: this. $OBJ = $ ("#layout");
4, object, array variable before adding "O", "a" many people like to add an array variable "s", which is also possible, according to personal habits, if you feel it is necessary to add a "FN" before the function. Iii. Some suggestions for jquery plugin development

1, please use the data () method of the data () method of jquery is very useful, especially in the development of jquery plug-in, because the data () created by the cache, can be a complete storage of various data types, this is not comparable to other caching mechanisms.
2. Bind events Using bind many friends like the following code:

$ (". Yitip"). Click (function () {...})

However, the use of bind is more advocated in jquery plug-in development:

$ (". Yitip"). Bind (' click ', function () {...})

3, the use of TypeOf typeof used to determine the data type, this method is very useful in parameter determination
4, plug-in name plus a unique prefix jquery plugin has too many too z, plug-in crash is very easy things, such as the search box plugin:
$.fn.tips = function (options) {}

The notation and specification of jquery plugins