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

     

  • 相关阅读:
    超强、超详细Redis入门教程
    zsh: command not found: pip 解决方法
    Python 进阶必备函数
    【debian】解决debian中文安装后出现乱码的问题
    【随笔】关于服务器
    【随笔】Linux主机简单判断CC攻击的命令
    【Docker】通过cookie欺骗在ubuntu中使用wget下载jdk
    【linux】在ubuntu中使用apt-get安装oracle jdk6
    【Nginx】关于域名转发proxy_pass
    【Docker】制作一个支持SSH终端登录的镜像
  • 原文地址:https://www.cnblogs.com/sjqq/p/6400657.html
Copyright © 2020-2023  润新知