Posted in Javascript onMay 06, 2010
网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend.
jquery.fn表示jquery.prototype,,给jquery对象添加方法。刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多,蛮写蛮写
比如当点击 button时弹出一个textbox的值加一个参数值
jquery.fn.extend({ alertMessage:function(message){ var txtboxValue = $(this).val();//使用$(this)表示对哪个对象添加了扩展方法,这里是指$('#textbox' ) alert(txtboxValue + message); } }); $(function(){ $("input[name='btn' ]").click(function(){ $('#textbox' ).alertMessage("是字符串"); }) })
html:
<input type='button' name='btn' value='Alert'/> <input type='text' id='textbox' value='abc'/>
于是翻出了前年的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>
Jquery 扩展方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@