您的位置：首页 > Web前端 > JQuery

自己动手JQuery插件开发

2014-03-04 16:49 676 查看

最近在复习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 jquery插件

相关文章推荐

新的分享

章节导航