javascript代码实例教程-JavaScript编程开发中jQuery 插件开发指南

发布时间:2018-12-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript编程开发中jQuery 插件开发指南脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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

 

代码如下:


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


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

 

 

代码如下:


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

 

 这行代码其实是用于创建一个匿名函数

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

 

好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript编程开发中jQuery 插件开发指南全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript编程开发中jQuery 插件开发指南所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。