编写jQuery插件

jQuery插件分为类级与对象级,前者基本不用。本文主要实现一个导航页,并将调用封装成jQuery插件形式,可以配置事件,CSS,及支持jQuery链式操作等。
找插件的几个网站推荐plugins.jquery.comwww.jq22.comwww.htmleaf.com


类级别插件

类级别插件就是给jQuery添加静态方法。有以下3种方法。

  • 添加全局函数
  • 使用$.extend()
  • 使用命名空间

插件开发中基本不用这种方式。

添加全局函数

1
2
3
jQuery.myAlert = function(str){
alert(str);
}

使用$.extend()

1
2
3
4
5
jQuery.extend({
myAlert:function(str){
alert(str);
}
});

以上2种的调用方法:

1
$.myAlert("哈哈哈!");

使用命名空间

xnspace为自己取的名字

1
2
3
4
5
jQuery.xnspace = {
myAlert:function(str){
alert(str);
}
}

调用方法:

1
$.xnspace.myAlert("哦哦哦!");

支持链式操作

以添加全局函数为例,可以这样做:

1
2
3
4
5
jQuery.myAppend = function(obj){
obj.append("test");
return obj;
}

只要返回传入的对象即可。调用形如:

$.myAppend(“#some_id”).text() ;

对象级别插件

对象级就是对jQuery对象而非直接给jQuery添加静态方法。

插件开发基本模版

然后有一个基本的模版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
;(function ($) {
$.fn.your_plusin_name = function (options) {
var defaults = {
//各种参数设置
}
options = $.extend(defaults, options);
this.each(function () {
//实现各种功能的代码
});
return this; //支持链式操作
}
})(jQuery);

一个导航插件实例

基本的HTML与CSS布局,下面是实现一个导航。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../jquery-2.2.2.min.js"></script>
<script src="jquery-NavDemo-1.0.js"></script>
</head>
<style>
/*清除li默认间距*/
*{
padding: 0px;
margin: 0px;
}
.myTabNav{
list-style-type: none; /*列表圆点去掉*/
}
.myTabNav li{
float: left;
width: 150px;
height: 30px;
line-height: 30px; /*整行*/
text-align: center;
border: 1px solid darkorchid;
border-bottom: none;
cursor: pointer; /*手形*/
}
.myTabNav li.current{
background: orange;
color: #0099ff;
font-weight: 700;
}
.myTabNavContent{
clear: both; /*显示第一个*/
}
.myTabNavContent div{
border: 1px solid indigo;
width: 453px;/**151*3*/
height: 300px;
display: none;
}
</style>
<script>
$(function(){
//调用插件
$(".myTab").myNavPlusin({
currentClass:'current',
nav:'.myTabNav>li',
navContent:'.myTabNavContent>div',
eventType:'mouseover'
});
//}).find(".myTabNav>li").css("background","yellow"); //链式操作
});
</script>
<body>
<div class="myTab">
<ul class="myTabNav">
<li class="current">主页</li>
<li>下载</li>
<li>关于</li>
</ul>
<div class="myTabNavContent">
<div style="display: block">这是主页的内容</div>
<div>这是下载页的内容</div>
<div>这是关于页面</div>
</div>
</div>
</body>
</html>

做成插件形式,命名jquery-NavDemo-1.0.js。
然后将JavaScript代码封装到js文件中,只需在html文件中引入,作简单配置即可实现功能。

html中调用的js框架部分代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
$(function(){
//调用插件. 不设置参数的话, 会用默认参数.
$(".myTab").myNavPlusin({
currentClass:'current',
nav:'.myTabNav>li',
navContent:'.myTabNavContent>div',
eventType:'mouseover'
});
//}).find(".myTabNav>li").css("background","yellow"); //链式操作
});
</script>

jquery-TableDemo-1.0.js中的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
;(function ($) {
$.fn.myNavPlusin = function (options) {
var defaults = {
//各种可以自定义的参数
currentClass:'current',
nav:'.myTabNav>li',
navContent:'.myTabNavContent>div',
eventType:'click',
}
options = $.extend(defaults, options);
this.each(function () {
//实现各种功能的代码
var _this = $(this);
_this.find(options.nav).bind(options.eventType,function(){
//为找到的添加currentClass, 并移除所有同胞子元素的currentClass
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
//nav的content设置: 找到当前点击的显示, 并且隐藏同胞子元素.
var index = $(this).index();
_this.find(options.navContent).eq(index).show().siblings().hide();
});
});
return this; //支持链式操作
}
})(jQuery);

结语

在使用别人的jQuery插件时,会发现也是这种调用与配置方式。

转载请注明出处,有疑问欢迎留言!