标签:style blog color io os ar sp div on
//插件代码
;(function($){ $.fn.extend({ "alterBgColor":function(options){ options = $.extend({ "odd":"odd",//偶数行的class "even":"even",//奇数行class "selected":"selected"//被点击行class },options);//传入的class参数替换默认的class设置 console.info(options) $("tbody tr:odd").addClass(options.odd);//偶数行设置class $("tbody tr:even").addClass(options.even);//奇数行设置class $("tbody tr").click(function(){//table行的点击事件 //当前点击行添加selected样式,其他行去除selected样式,end()指的是对象又为$(this),该行的radio被选中 $(this).addClass(options.selected).siblings().removeClass(options.selected).end().find(":radio").attr("checked",true); }); //页面载入时默认选中行的样式 $("table :radio:checked").closest("tr").addClass(options.selected); return this;//返回this,使方法具有可链性 } }) })(jQuery);
样式:
table{ border: 1px gray solid; width: 500px; height: 400px; text-align: center; margin: 0 auto; } .odd{background-color: gainsboro;} .even{background-color: #FFFFEE} .selected{background-color:gold}
html:
<table> <thead> <tr> <th></th> <th>姓名</th> <th>性别</th> <th>暂住地</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td><input type="radio" name="radio"></td> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table>
<script>中的代码
$(function(){ $("table").alterBgColor();//调用插件,可以自己制定样式,以"{}"对象参数的方式传递 });
注意:页面需首先引入jquery库
jquery的选择符可能会匹配1个或多个元素,因此,插件必须考虑这些情况。可以在插件内部调用each()方法来遍历匹配元素,然后执行相应的方法,this会依次引用每个dom元素
如下jquery代码所示:
;(function($){ $.fn.extend({ "pluginName" : function(options){ return this.each(function(){ //这里放置插件代码 }); } }); })(jQuery);)
标签:style blog color io os ar sp div on
原文地址:http://www.cnblogs.com/zhangyanlei183/p/4040535.html