标签：
jQuery提供了用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。
基本的JS框架代码如下：
1 ;(function($) { 2 $.fn.extend({ 3 //这里写插件代码 4 }); 5 })(jQuery);
例子：编写一个表格隔行变色插件
JS代码
1. 插件编写
1 //插件编写 2 ;(function($) { 3 $.fn.extend({ 4 "alterBgColor":function(options){ 5 //设置默认值 6 options=$.extend({ 7 odd:"odd", /* 偶数行样式*/ 8 even:"even", /* 奇数行样式*/ 9 selected:"selected" /* 选中行样式*/ 10 },options); 11 $("tbody>tr:odd",this).addClass(options.odd); 12 $("tbody>tr:even",this).addClass(options.even); 13 $(‘tbody>tr‘,this).click(function() { 14 //判断当前是否选中 15 var hasSelected=$(this).hasClass(options.selected); 16 //如果选中，则移出selected类，否则就加上selected类 17 $(this)[hasSelected?"removeClass":"addClass"](options.selected) 18 //查找内部的checkbox,设置对应的属性。 19 .find(‘:checkbox‘).attr(‘checked‘,!hasSelected); 20 }); 21 // 如果单选框默认情况下是选择的，则高色. 22 $(‘tbody>tr:has(:checked)‘,this).addClass(options.selected); 23 return this; //返回this，使方法可链。 24 } 25 }); 26 })(jQuery);
2. 插件应用
1 //插件应用 2 $(function(){ 3 $("#table") 4 .alterBgColor() //应用插件 5 .find("th").css("color","red");//可以链式操作 6 })
HTML代码
1 <table id="table1"> 2 <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead> 3 <tbody> 4 <tr> 5 <td><input type="checkbox" name="choice" value=""/></td> 6 <td>张山</td> 7 <td>男</td> 8 <td>浙江宁波</td> 9 </tr> 10 <tr> 11 <td><input type="checkbox" name="choice" value="" /></td> 12 <td>李四</td> 13 <td>女</td> 14 <td>浙江杭州</td> 15 </tr> 16 <tr> 17 <td><input type="checkbox" name="choice" value="" checked="checked" /></td> 18 <td>王五</td> 19 <td>男</td> 20 <td>湖南长沙</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox" name="choice" value="" /></td> 24 <td>找六</td> 25 <td>男</td> 26 <td>浙江温州</td> 27 </tr> 28 <tr> 29 <td><input type="checkbox" name="choice" value="" /></td> 30 <td>Rain</td> 31 <td>男</td> 32 <td>浙江杭州</td> 33 </tr> 34 <tr> 35 <td><input type="checkbox" name="choice" value="" checked="checked" /></td> 36 <td>MAXMAN</td> 37 <td>女</td> 38 <td>浙江杭州</td> 39 </tr> 40 </tbody> 41 </table>
CSS代码
1 table { border:0;border-collapse:collapse;} 2 td { font:normal 12px/17px Arial;padding:2px;width:100px;} 3 th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;} 4 .even { background:#FFF38F;} /* 偶数行样式*/ 5 .odd { background:#FFFFEE;} /* 奇数行样式*/ 6 .selected { background:#FF6500;color:#fff;}
标签：
原文地址：http://www.cnblogs.com/shizq/p/5723966.html
