1.写插件部分,如下:
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种属性,各种参数
}
var options = $.extend(defaults, options);
this.each(function(){
//功能代码
var _this = this;
});
}
})(jQuery);
附上一个例子:
1 ;(function($){ 2 $.fn.table = function(options){ 3 var defaults = { 4 //arguments , properties 5 evenRowClass : 'evenRow', 6 oddRowClass : 'oddRow', 7 currentRowClass : 'currentRow', 8 eventType : 'mouseover', 9 eventType2 : 'mouseout',10 } 11 var options = $.extend(defaults, options);12 13 this.each(function(){14 15 //function code16 var _this = $(this);17 //even row18 _this.find('tr:even:not("#thead")').addClass(options.evenRowClass);19 //_this.find('#thead').removeClass(options.evenRowClass);20 // odd row 21 _this.find('tr:odd').addClass(options.oddRowClass);22 23 /*_this.find('tr').mouseover(function(){24 $(this).addClass(options.currentRowClass);25 }).mouseout(function(){26 $(this).removeClass(options.currentRowClass);27 });*/28 29 _this.find('tr').bind(options.eventType, function(){30 $(this).addClass(options.currentRowClass);31 });32 33 _this.find('tr').bind(options.eventType2, function(){34 $(this).removeClass(options.currentRowClass);35 });36 37 });38 return this;39 }40 })(jQuery);
html部分调用插件如下:
$();==$(function(){});==$(document).ready(); 等页面加载成功后执行
;$(function(){
$('#table1').table({
//arguments , properties
evenRowClass : 'evenRow1',
oddRowClass : 'oddRow1',
currentRowClass : 'currentRow1'
});
});
附上代码:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <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> 10 <style> 11 *{margin:0; padding:0;} 12 table{ 13 border-collapse:collapse; 14 width:100%; 15 border:1px solid red; 16 margin-top:50px; 17 text-align:center; 18 } 19 20 tr, th, td{ 21 height:30px; 22 border:1px solid red; 23 } 24 .evenRow1{ 25 background:red; 26 } 27 .oddRow1{ 28 background:orange; 29 } 30 .currentRow1{ 31 background:blue; 32 } 33 #ss{ 34 float:right; 35 margin-right:100px; 36 } 37 #search{ 38 font-size:14px; 39 width:50px; 40 } 41 42 </style> 43 <script src='/images/loading.gif' data-original="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 44 <script src='/images/loading.gif' data-original="jquery-table-1.0.js"></script> 45 </head> 46 <body> 47 <script> 48 ;$(function(){ 49 $('#table1').table({ 50 51 //arguments , properties 52 evenRowClass : 'evenRow1', 53 oddRowClass : 'oddRow1', 54 currentRowClass : 'currentRow1' 55 56 }); 57 58 $('input[type=button]').click(function(){ 59 var text = $('input[type=text]').val(); 60 $('#table1 tr:not("#thead")').hide().filter(':contains("'+text+'")').show(); 61 }); 62 63 }); 64 65 </script> 66 67 <div id="ss"> 68 <input type="text" placeholder="请输入查询数据"> 69 <input id="search" type="button" value="查询"> 70 </div> 71 72 <table id="table1"> 73 <tr id="thead"> 74 <th>姓名</th> 75 <th>学号</th> 76 <th>性别</th> 77 <th>年龄</th> 78 79 </tr> 80 <tr> 81 <td>张三</td> 82 <td>1</td> 83 <td>男</td> 84 <td>20</td> 85 </tr> 86 87 <tr> 88 <td>李四</td> 89 <td>2</td> 90 <td>男</td> 91 <td>30</td> 92 </tr> 93 <tr> 94 <td>张三</td> 95 <td>1</td> 96 <td>女</td> 97 <td>20</td> 98 </tr> 99 100 <tr>101 <td>李四</td>102 <td>2</td>103 <td>男</td>104 <td>30</td>105 </tr>106 <tr>107 <td>王五</td>108 <td>3</td>109 <td>男</td>110 <td>30</td>111 </tr>112 <tr>113 <td>王五</td>114 <td>3</td>115 <td>男</td>116 <td>30</td>117 </tr>118 <tr>119 <td>张三</td>120 <td>1</td>121 <td>女</td>122 <td>20</td>123 </tr>124 125 <tr>126 <td>李四</td>127 <td>2</td>128 <td>男</td>129 <td>30</td>130 </tr>131 132 </table>133 </body>134 </html>
通过这个例子学到了jquery 对象级插件开发
原标题:jquery插件方式实现table查询功能
关键词:jquery