Jquery plug-in writing

Summary of JQuery plug-in writing

Recently, more and more Web Front-end technologies such as JQuery are used in Web applications. These technical frameworks effectively improve the user experience, while also improving the efficiency of developers to build a rich client UI. JQuery provides a wide range of operations. However, sometimes we need to construct some common front-end UI components based on our own business and system features (style, the JQuery plug-in provides us with a better way to construct these UI components so that we can reuse them repeatedly in the future.

I have also searched many articles on JQuery plug-ins on the Internet. However, these documents are too discrete to effectively organize and fully explain how to compile the JQuey plug-in, which forms are available, and under what circumstances. Below, I will explain the commonly used JQuery plug-ins and the common scenarios of these plug-ins.

 

First, before writing a plug-in, let's assume that there is an HTML page (or. aspx page). A table with five rows and three columns is placed on the page, namely, the <table> </table> mark. The Code is as follows:

 

<Table id = "newtable"> <tr> <TD> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </tr> <tr> <TD> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </tr> <TD> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </tr> <TD> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </tr> <TD> 1 </TD> <TD> 1 </TD> <TD> 1 </TD> </tr> </table>

The function I want to implement is: When you move the cursor to a row in the table, the current row is highlighted, and other rows are normal.

OK. In combination with this scenario, we will further explore how to use the JQuery plug-in to implement the above functions. Common JQuery plug-ins are written in the following ways:

1. JQuery extensions
As the name suggests, this plug-in is used to expand JQuery's own libraries. $. MethodName () is used directly.
Sample Code of the plug-in:

$. Extend ({handleTableUI: function (table) {var thisTable =$ ("#" + table); $ (thisTable ). find ("tr "). bind ("mouseover", function () {functions (this).css ({color: "# ff0011", background: "blue"}) ;}); $ (thisTable ). find ("tr "). bind ("mouseout", function () {detail (this).css ({color: "#000000", background: "white "});});}});

Display
For example, to expand JQuery itself, we need to develop it in the form of $. extend ();. The extend () method of JQuery provides us with an extension.
JQuery's own method, in the extend () method, we use the form of {...} to write a specific method body. The most important thing is to define our own extension method, as shown in the example
HandleTableUI. The method is defined as: Method Name: function (parameter) {method body }. In this way, we can define JQuery's own extension method, and this method can be displayed on the web page through smart prompts. The Code called on the page is as follows:

<Script type = "text/javascript"> $ (document ). ready (function () {$. handleTableUI ("newTable") ;}); </script> 2. extension of HTML tags or page elements
When using this plug-in extension Method, you must first reference the page elements encapsulated by JQuery, such as $ ("# tableId"). Method ().
Plug-in code example: (function ($) {$. fn. setTableUI = function (options) {var defaults = {evenRowClass: "evenRow", oddRowClass: "oddRow", activeRowClass: "activeRow"} var options = $. extend (defaults, options); this. each (function () {var thisTable = $ (this); $ (thisTable ). find ("tr "). bind ("mouseover", function () {functions (this).css ({color: "# ff0011", background: "blue"}) ;}); $ (thisTable ). find ("tr "). bind ("mouseout", funct Ion () {detail (this).css ({color: "#000000", background: "white"}) ;}) ;};}( jQuery); example: to perform JQuery extension on page elements, you need to use (function ($ ){...}) (JQuery. In the ", define our own method, the definition method is: $. fn. custom method name = function (parameter ){...}; to define the specific content of the extension method. Page calls are different from JQuery extensions. The specific call code is as follows:

<Script type = "text/javascript"> $ (document ). ready (function () {$ ("# newTable "). setTableUI () ;}); </script> 3. instead of explicitly calling the JQuery method on the page, you can call the plug-in by directly adding a JQuery plug-in script reference. I
If you need some global JQuery plug-ins, that is, the plug-in method does not need to be explicitly called, but can be referenced by the script. At the same time, this plug-in is generally configured or set globally for the entire Web page.
For example, to layout the content inside <body> </body>, you can use the script reference method. Plug-in code example: (function ($) {$. tableUI = {set: function () {var thisTable = $ ("table"); $ (thisTable ). find ("tr "). bind ("mouseover", function () {functions (this).css ({color: "# ff0011", background: "blue"}) ;}); $ (thisTable ). find ("tr "). bind ("mouseout", function () {detail (this).css ({color: "#000000", background: "white "});});}}; // self-call $ (function () {$. tableUI. set () ;}) ;}( jQuery); example: if the above Code is in my. plugin. In the js file, you only need to add a reference to the script file on the page. The reference method is: <script src = "Scripts/my. plugin. js "type =" text/javascript "> </script>. Of course, to use JQuery, you must first Add a reference to the JQuery library script. In the code of the referenced plug-in, the most important thing is to take the initiative to call the plug-in method you have written in the plug-in. The code above contains comments. Otherwise, the plug-in code we write will not work.