自己动手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>
View Code

 

一、插件的几种写法

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 });
View Code

通过此种方式我们就可以定义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);
View Code

当要对页面元素进行JQuery扩展时,需要采用(function($){...})(JQuery);的方式进行开发。在“...”处,定义我们自己的方法,定义方式是:$.fn.自定义方法名 = function(参数){...};

页面中调用代码如下:

<script type="text/javascript">
    $(function () {
        $("#tb1").HelpTest();
    });
</script>
View Code

二、注意

jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆。

自己动手JQuery插件开发,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。