自己动手JQuery插件开发
最近在复习JQuery，发现自己还没写过一个插件。在写插件之前，觉得开发插件是高端上档次的事，跟我这种小菜不搭边啊。不过在网上查了相关资料，发现开发插件其实是很简单的。
在这里我将说明JQuery插件常用的写法，以及这些插件的常用场景。 希望对大家有所帮助。
先准备了自己以前写过的一个火车票列表的页面，点击"设置样式与事件"出现以下效果。
这页面效果直接用Js代码实现的，那么在这里我们用插件的方法实现以上效果。
页面表格代码如下：
1 <body> 2 <input type="button" id="btnshow" value="加载数据" /> 3 <input type="button" id="setStyle" value="设置样式与事件" /> 4 <table id="tb1" border="1px solid white" cellpadding="0" cellspacing="0"> 5 <tr> 6 <th rowspan="2"> 7 序号 8 </th> 9 <th rowspan="2"> 10 车次 11 </th> 12 <th colspan="2"> 13 查询区间 14 </th> 15 <th colspan="3"> 16 区间运行时刻 17 </th> 18 <th colspan="5"> 19 余票信息 20 </th> 21 <th> 22 列车信息 23 </th> 24 </tr> 25 <tr> 26 <th> 27 发站 28 </th> 29 <th> 30 到站 31 </th> 32 <th> 33 发时 34 </th> 35 <th> 36 到时 37 </th> 38 <th> 39 历时 40 </th> 41 <th> 42 商务座 43 </th> 44 <th> 45 特等座 46 </th> 47 <th> 48 一等座 49 </th> 50 <th> 51 二等座 52 </th> 53 <th> 54 硬座 55 </th> 56 <th> 57 等级 58 </th> 59 </tr> 60 </table> 61 </body>
一、插件的几种写法
1.对JQuery自身的扩展插件
这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.扩展函数名()的方式直接使用。
格式如下:
$.extend({
函数名:function(data){};
})
调用方式
$.函数名();
示例代码:
1 $.extend({ 2 TestJs: function (table) { 3 var tb = table; 4 //背景图片 5 $(tb).find("tr:lt(2)").css({ "color": "#055A78", 'background-image': 'url("bg.png")' }); 6 7 //文字居中 8 $(tb).find("td,th").css({ "text-align": "center" }); 9 //奇偶变色 10 $(tb).find("tr:gt(1):odd").css("backgroundColor", "white"); 11 $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5F2F8"); 12 13 //tr事件 14 $(tb).find("tr").mouseover(function () { 15 $(this).css("cursor", "default"); 16 }).mouseout(function () { 17 $(this).find("td:eq(1)").css("color", "black"); 18 }).click(function () { 19 $(tb).find("tr:gt(1):odd").css("backgroundColor", "white"); 20 $(tb).find("tr:gt(1):even").css("backgroundColor", "#E5F2F8"); 21 $(this).css("backgroundColor", "#9AC2E5"); 22 }) 23 //车次所在列每个td的事件 24 $(tb).find("tr td:eq(1)").wrapInner('<a style="color:black;text-decoration:none"></a>').children().mouseover(function () { 25 $(this).css("color", "red"); 26 }).mouseout(function () { 27 $(this).css("color", "black"); 28 }) 29 30 } 31 });
通过此种方式我们就可以定义JQuery自己的扩展方法，而且这个方法可以在web页面通过智能提示显示出来。页面中调用的代码如下：
<script type="text/javascript"> $(function () { $("#setStyle").click(function () { //extend 扩展插件 $.TestJs("#tb1"); }) }); </script>
2.对HTML标记或页面元素进行扩展
这种方法需要引用经过JQuery包装的页面元素。如：$("#tb").Method();
代码示例:
(function ($) { $.fn.HelpTest = function (options) { //要改变的就是HelpTest,这是你的jquery函数的名称[在你的html中要调用这个函数的时候就得用到这个名称]， //其他的就不需要进行改变了。 var defaults = { //var defaults{ 这里面是你的这个函数的参数的默认值 } helptext: "default help", tmpWidth:"200px" } var options = $.extend(defaults, options); //这句话是死的，它的意思就是说，若你在html中调用这个插件的时候，若是没有传入参数的值得话， //那么我就用defalut里面定义好的参数，否则就用你传入的参数的值，[注意]：下面若是要用到参数的话， //就得使用[options.参数名]如：options.helpText $(this).mouseover(function (e) { //添加this的mousemove事件，就是说，哪个html元素调用了我的这个插件，那么我就给他添加mousemove事件 alert("mouser over"); }) } })(jQuery);
当要对页面元素进行JQuery扩展时，需要采用(function($){...})(JQuery);的方式进行开发。在“...”处，定义我们自己的方法，定义方式是：$.fn.自定义方法名 = function(参数){...};
页面中调用代码如下:
<script type="text/javascript"> $(function () { $("#tb1").HelpTest(); }); </script>
二、注意
jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JavaScript库插件混淆。
