码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 插件开发解析

时间:2014-05-09 23:15:29      阅读:393      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

那么首先我们来简单的看一下最正统的 jQuery 插件定义方式:

1
2
3
4
5
6
7
8
9
10
11
12
(function ($) {    
$.fn.插件名 = function (settings) {        
//默认参数        
var defaultSettings = {
 
        }         /* 合并默认参数和用户自定义参数 */        
 
settings = $.extend(defaultSettings, settings);
 
return this.each(function () {             //代码         });   //插件在元素内多次出现
 
} })(jQuery);

 

 

先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):

1
2
3
(function ($) {
 
})(jQuery);

 这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解,将会对这种代码非常疑惑,那么强烈建议您阅读JavaScript中的匿名函数及函数的闭包这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用,就是用于合并参数。

1
2
3
4
5
6
7
8
9
$.fn.tip = function (settings) {    
var defaultSettings = {           
//颜色    
color: ‘yellow‘,       
//延迟       
timeout: 200     }
 /* 合并默认参数和用户自定义参数 */   
settings = $.extend(defaultSettings, settings);   
alert(settings.input); <br>}

 

 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
(function ($) {
    //插件定义--更换名字
    $.fn.tabpanel = function (method) {
        var methods = $.fn.tabpanel.methods;
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === ‘object‘ || !method) {
            return methods.init.apply(this, arguments);
        } else {
 
        }
    }
    //支持的方法
    $.fn.tabpanel.methods =
    {
        //初始化
        init: function (p_options) {
            tabpanelBind(p_options, this);
        },
        add: function (p_options) {
            addTab(p_options, this);
            tabpanelBind(p_options, this);
            // debugger
        }    }
    function add(p_options) {
        var _defaults = {
            id: ""
        }
    <br>    //内部实现略.........<br>        return _index;
    }
<br>})(jQuery);<br><br>调用  $("#team").tabpanel(‘add‘,"");

 

 

 

jQuery 插件开发解析,布布扣,bubuko.com

jQuery 插件开发解析

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/shanhe/p/3718875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!