jquery 对象级别的插件开发 实例demo

发表于   |   分类于   |     |   阅读次数

对于jquery插件，一直以来，更多地只是使用别人的插件、修改别人的插件。今天就费点功夫，自己来折腾一下自定义的jquery插件编写，重点是：jquery 对象级别的插件（即封装方法插件）。

从步步折腾到最终编写出第一个 jquery 插件 demo，中间的确碰了不少的壁。本文就主要记录下成功之后、编写 jquery 对象级别的插件的顺顺步奏。

jquery 插件类别

  • 选择器插件，$.widget()；极少用，略。
  • 类级别插件（封装函数插件），较少用。通过 $.extend() 来给 jQuery 添加静态方法进行扩展。调用时类似于 $.ajax() , $.get() , $post() , $.trim()。如代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//直接给 jquery 添加全局函数
jQuery.myAlert()=function(str){
    alert(str);
};
//调用
$.myAlert('容易发生重名！');
//使用命名空间
jQuery.guo={
    myAlert:function(str){
        alert(str);
    }
}
//调用
$('#id').click(function(){
    $.guo.myAlert('使用了命名空间！');
});
  • 对象级别插件（封装方法插件），常常用。通过 jquery 获取对象、并为对象添加方法、最后讲将方法封装成插件。易调用，易扩展。下面重点讲。

对象级别插件 demo开发过程

仿 bootstrap 弹窗插件

本 demo 编写一个仿 bootstrap 的弹窗插件 jQuery.myPop.js；本插件功能简单，主要是为学习插件编写而写；它可以实现弹窗内容的自定义、弹窗各部分背景色的自定义功能。

demo 目录结构

1
2
3
4
5
6
7
|-jqPlugin_pro
    |-css
        pop.css
    |-js
        jquery-1.11.3.min.js
        jQuery.myPop.js
    index.html

注意点抢先看

  1. 插件命名： jQuery.[插件名].js ，如本弹窗插件命名为： jQuery.myPop.js 。
  2. 对象级别插件，所有方法均依附于 jquery.fn 主体对象。如本插件里：方法 popTxt,popBgcolor 均依附于 $.fn.popPlugin ；下文有详细说明。
  3. 插件结尾必须以分好 ; 结束；为保证起见，插件开头也加上分好，如：;(function($){})(jQuery);。
  4. 插件内部，若要遍历（如多个 .class），用 this.each 方法。

  5. 系统变量以参数形式传递到插件内部,就有了一个局部变量，可提高一点访问速度；如：

    1
    2
    3
     ;(function($,window,document,undefined){
        //
    })(jQuery,window,document);

配合插件的 html/css

jquery 插件，自然是依赖 jquery，所以引入 jquery-1.11.3.min.js 和 插件 jQuery.myPop.js；
弹窗的 html 结构如下代码 pop.html：

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery plugin pop test</title>
    <link rel="stylesheet" type="text/css" href="css/pop.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jQuery.myPop.js"></script>
</head>
<body>
    <a href="javascript:void(0);" class="pop-click">点击弹窗(仿bootstrap)</a>
    <div id="pop-back"></div>
    <div id="pop-content">
        <div class="pop-head">
            <h4>头部头部头部头部头部头部头部头部头部头部头部头部头部</h4>
        </div>
        <div class="pop-body">
            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
        </div>
        <div class="pop-foot">
            <button id="pop-close">关闭</button>
        </div>
    </div>
    <script type="text/javascript">
        $(function(){
            
        });
    </script>
</body>
</html>

pop.css 在全文最后再附上。

编写插件 jQuery.myPop.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
30
31
32
33
34
35
36
37
38
39
//jQuery.MyPop.js
;(function($){
    //一、定义构造函数MyPop
    var MyPop=function(obj,opt){
        this.$element=obj,
        this.defaults={
            //默认参数设置
        },
        this.options=$.extend({},this.defaults,opt);    //
    };
    //二、定义MyPop的方法
    MyPop.prototype={
        //方法 popTxt：自定义弹窗内容
        popTxt:function(){
            //弹窗的出现，样式
            //自定义弹窗的内容
            //返回 this.$element=obj, 保持链式操作
            return this.$element;
        },
        //方法 popBgcolor：自定义弹窗的背景色
        popBgcolor:function(){
            //弹窗的背景色设置
            //返回 this.$element=obj, 保持链式操作
            return this.$element;
        }
    };
    //三、插件中使用MyPop对象创建实例并返回
    $.fn.popPlugin=function(options){
        //利用 构造函数MyPop 创建实例
        var myPop=new MyPop($(this),options);
        //直接返回实例 myPop
        return myPop;
        //调用实例的方法 popTxt() ，并返回
        // return myPop.popTxt();
        
    }
})(jQuery);

插件的功能补全，其实就是把普通的代码对应地塞进插件结构中；插件完整代码如下（含详细解释）：

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
//jQuery.MyPop.js
;(function($){
    //一、定义构造函数MyPop
    var MyPop=function(obj,opt){
        this.$element=obj,
        this.defaults={
            'headTxt':'这是默认的头部内容',
            'bodyTxt':'这是默认的主体内容默认的主体内容默认的主体内容默认的主体内容',
            'headBg':'white',
            'bodyBg':'white',
            'footBg':'white'
        },
        this.options=$.extend({},this.defaults,opt);
    };
    //二、定义MyPop的方法
    MyPop.prototype={
        //方法 popTxt：自定义弹窗内容
        popTxt:function(){
            //弹窗的出现，样式
            $('#pop-back').css({display:'block'});
            $('html').css({overflow:'hidden'});
            $('#pop-content').animate({top: 15, opacity: 'show'}, 150);
            $('#pop-close,#pop-back').on('click',function(){
                $('#pop-content').animate({top: -15, opacity: 'hide'}, 150,function(){
                    $('#pop-back').css({display:'none'});
                    $('html').css({overflow:'auto'});
                });
            });
            //自定义弹窗的内容
            this.$element.children('.pop-head').text(this.options.headTxt);
            this.$element.children('.pop-body').text(this.options.bodyTxt);
            //返回 this.$element=obj, 保持链式操作
            return this.$element;
        },
        //方法 popBgcolor：自定义弹窗的背景色
        popBgcolor:function(){
            $('.pop-head').css({background:this.options.headBg});
            $('.pop-body').css({background:this.options.bodyBg});
            $('.pop-foot').css({background:this.options.footBg});
            return this.$element;
        }
    };
    //三、插件中使用MyPop对象创建实例并返回
    $.fn.popPlugin=function(options){
        //利用 构造函数MyPop 创建实例
        var myPop=new MyPop($(this),options);
        //直接返回实例 myPop
        return myPop;
        //调用实例的方法 popTxt() ，并返回
        // return myPop.popTxt();
        
    }
})(jQuery);

插件的调用

在 pop.html 中的 <script> 标签编写调用插件的 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
30
31
32
33
<script type="text/javascript">
    $(function(){
        //弹窗：自定义内容、自定义、背景色
        //参数myTxt：完整、为空、部分
        /*var myTxt={
            'headTxt':'自定义的头部',
            'bodyTxt':'自定义的内容自定义的内容',
            'headBg':'yellow',
            'bodyBg':'green',
            'footBg':'pink'
        }*/
        /*var myTxt={}*/
        var myTxt={
            'headTxt':'自定义的头部',
            'bodyTxt':'自定义的内容自定义的内容'
            
        }
        //调用插件 popPlugin() 及其方法 popTxt()、popBgcolor()
        $('.pop-click').on('click',function(){
            /*$('#pop-content').popPlugin({
                'headTxt':'自定义的头部',
                'bodyTxt':'自定义的内容'
            }).css({color:'red'});*/
            $('#pop-content').popPlugin(myTxt).popTxt();
            $('#pop-content').popPlugin(myTxt).popBgcolor();
            //链式操作 .css()
            // $('#pop-content').popPlugin(myTxt).popTxt().css({color:'red'});
        });
    });
</script>

至此，第一个 jquery 插件 jQuery.myPop.js 就完成了！

附 pop.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
#pop-back{
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  filter:alpha(opacity=50);
  opacity: 0.5;
  background-color:black;
  background-color:rgba(0,0,0,0.5);
  z-index: 1001;
  display:none;
}
#pop-content{
  position: relative;
  margin:40px auto;
  z-index: 1002;
  width: 600px;
  background: white;
  display: none;
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
#pop-content>div{
  padding:15px;
  font-family: Microsoft YaHei !important;
}
@media (max-width: 650px){
  #pop-content{
    width: auto;
    margin:40px 20px;
  }
  .pop-head>span{
    display: none;
  }
}
.pop-head,.pop-body{
  border-bottom: 1px solid #e5e5e5;
}
.pop-head{
  font-size: 18px;
}
.pop-head>h4{
  margin:0px;
  font-weight: normal;
  display: inline-block;
}
.pop-head>span{
  float: right;
  padding:0px 5px 0px 10px;
  cursor: pointer;
}
.pop-body{
  font-size: 14px;
}
.pop-body>p{
  margin:0px;
  text-indent: 1.5em;
}
.pop-foot{
  text-align: right;
}
#pop-close{
  border: none;
  outline: none;
  font-size: 15px;
  font-family: Microsoft YaHei;
  padding:6px 12px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  background: rgb(57,129,196);
}

the end.