Jquery 扩展方法
好久没有温习JS了。 最近看到VS2010把Jquery作为JS标准库纳入了Web项目里,再不会用Jquery,真怕自己“OUT”了。 于是翻出了前年的Jquery中文文档。 大致浏览了下Jquery的方法。发现Jquery如此之强大,怎么以前就没有发现呢?于是就亲手写了基于Jquery的扩展函数,代码如下:
jQuery.fn.__toggleCheck = function (idPrefix) { var c = false; $(this).click(function () { if (c) c = false; else c = true; $("input[type=checkbox][id^=" + idPrefix + "]").each( function () { this.checked = c; } ); }); }; jQuery.fn.__setRepeaterStyle = function (itemTag, evenStyle, hoverStyle) { $("#" + this.attr("id") + " " + itemTag + ":odd").addClass(evenStyle); var cssOriginal = ""; $("#" + this.attr("id") + " " + itemTag + "").mouseover(function () { cssOriginal = $(this).attr("class"); $(this).addClass(hoverStyle); }); $("#" + this.attr("id") + " " + itemTag + "").mouseout(function () { $(this).removeClass(); if (cssOriginal.length > 0) { $(this).addClass(cssOriginal); } }); };
以上函数调用如下:
<div id="selBox"> <input type="checkbox" id="a_1" />1 <input type="checkbox" id="a_2" />2 <input type="checkbox" id="a_3" />3 <input type="checkbox" id="a_4" />4 <input type="checkbox" id="a_5" />5 <input type="checkbox" id="a_6" />6 <input type="checkbox" id="a_All" />All</div> <div id="a_All1">Check</div> </div> <style type="text/css"> table tr {} table .rowStyle { background:#dedede;} table .hoverStyle {font-weight:bold; color:Red; background-color:Gray;} </style> <table id="tb" style="width:100%; border:solid 1px #dedede;"> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> <tr> <td>1</td> </tr> </table> <script type="text/javascript"> $("#a_All").__toggleCheck("a_"); $("#a_All1").__toggleCheck("a_"); $("#tb").__setRepeaterStyle("tr", "rowStyle", "hoverStyle"); </script>
-- From Bndy.Net