• jQuery 插件开发指南


    jQuery凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。

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

    (function ($) {     
    $.fn.插件名 = function (settings) {         
    //默认参数         
    var defaultSettings = {
     
            }         /* 合并默认参数和用户自定义参数 */        
     
    settings = $.extend(defaultSettings, settings);
     
    return this.each(function () {             //代码         });   //插件在元素内多次出现
     
    } })(jQuery);

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

    (function ($) {
     
    })(jQuery);

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

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

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

     jQuery 插件定义第二种方式:

    (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',"");

     

  • 相关阅读:
    log4net 无法输出日志,跟踪发现IsErrorEnabled等,都是Flase
    jquery load加载不了内容
    数据库中的表还是一定要建索引
    最近的项目中用到读卡器,用的华视身份证阅读器,附上SDK使用手册
    背景自动滚动
    理解JavaScript函数(函数和对象的区别和联系)
    代码运行框
    ie8以ie7方式解析
    js开发工具集
    cssZip
  • 原文地址:https://www.cnblogs.com/sjqq/p/6400657.html
Copyright © 2020-2023  润新知