1. Write the plugin section as follows:
;(function ($) {
$.fn.plugin = function (options) {
var defaults = {
Various properties, various parameters
}
var options = $.extend (defaults, options);
This.each (function () {
function code
var _this = this;
});
}
}) (JQuery);
Attach an example:
1;(function($){2$.fn.table =function(options) {3 varDefaults = {4 //arguments, Properties5Evenrowclass: ' Evenrow ',6Oddrowclass: ' Oddrow ',7Currentrowclass: ' CurrentRow ',8EventType: ' MouseOver ',9EventType2: ' Mouseout ',Ten } One varOptions =$.extend (defaults, options); A - This. each (function(){ - the //function Code - var_this = $ ( This); - //even row -_this.find (' Tr:even:not ("#thead") '). addclass (Options.evenrowclass); + //_this.find (' #thead '). Removeclass (Options.evenrowclass); - //Odd Row +_this.find (' tr:odd '). addclass (Options.oddrowclass); A at /*_this.find (' tr '). MouseOver (function () { - $ (this). addclass (Options.currentrowclass); - }). mouseout (function () { - $ (this). Removeclass (Options.currentrowclass); - });*/ - in_this.find (' tr '). Bind (Options.eventtype,function(){ -$( This). addclass (Options.currentrowclass); to }); + -_this.find (' tr '). Bind (Options.eventtype2,function(){ the$( This). Removeclass (Options.currentrowclass); * }); $ Panax Notoginseng }); - return This; the } +}) (JQuery);
The HTML part calls the plugin as follows:
$ (); ==$ (function () {}); ==$ (document). Ready (); And so on after the page loads successfully executes
; $ (function () {
$ (' #table1 '). Table ({
Arguments, properties
Evenrowclass: ' EvenRow1 ',
Oddrowclass: ' OddRow1 ',
Currentrowclass: ' CurrentRow1 '
});
});
Attached code:
1<!doctype html>234<meta charset= "UTF-8" >5<meta name= "Generator" content= "editplus®" >6<meta name= "Author" content= "" >7<meta name= "Keywords" content= "" >8<meta name= "Description" content= "" >9<title>Document</title>Ten<style> One*{margin:0; padding:0;} A table{ -border-Collapse:collapse; -width:100%; the border:1px solid red; -margin-top:50px; -text-Align:center; - } + - tr, th, td{ + height:30px; A border:1px solid red; at } - . evenrow1{ - background:red; - } - . oddrow1{ - Background:orange; in } - . currentrow1{ to Background:blue; + } - #ss { the float: Right; *margin-right:100px; $ }Panax Notoginseng #search { -font-size:14px; the width:50px; + } A the</style> +<script src= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> -<script src= "Jquery-table-1.0.js" ></script> $ $<body> -<script> -;$(function(){ the$ (' #table1 '). Table ({ - Wuyi //arguments, Properties theEvenrowclass: ' EvenRow1 ', -Oddrowclass: ' OddRow1 ', WuCurrentrowclass: ' CurrentRow1 ' - About }); $ -$ (' Input[type=button] '). Click (function(){ - varText = $ (' input[type=text] '). Val (); -$ (' #table1 tr:not ("#thead"). Hide (). Filter (': Contains ("' +text+ '")). Show (); A }); + the }); - $</script> the the<div id= "ss" > the<input type= "text" placeholder= "Please enter query data" > the<input id= "Search" type= "button" value= "Query" > -</div> in the<table id= "Table1" > the<tr id= "Thead" > About<th> name </th> the<th> Study No. </th> the<th> Sex </th> the<th> Age </th> + -</tr> the<tr>Bayi<td> Zhang San </td> the<td>1</td> the<td> Men </td> -<td>20</td> -</tr> the the<tr> the<td> John Doe </td> the<td>2</td> -<td> Men </td> the<td>30</td> the</tr> the<tr>94<td> Zhang San </td> the<td>1</td> the<td> Women </td> the<td>20</td>98</tr> About -<tr>101<td> John Doe </td>102<td>2</td>103<td> Men </td>104<td>30</td> the</tr>106<tr>107<td> Harry </td>108<td>3</td>109<td> Men </td> the<td>30</td>111</tr> the<tr>113<td> Harry </td> the<td>3</td> the<td> Men </td> the<td>30</td>117</tr>118<tr>119<td> Zhang San </td> -<td>1</td>121<td> Women </td>122<td>20</td>123</tr>124 the<tr>126<td> John Doe </td>127<td>2</td> -<td> Men </td>129<td>30</td> the</tr>131 the</table>133</body>134This example learns the JQuery object-level plug-in development
jquery plug-in way to implement table query function