jQuery 插件开发指南


Posted in Javascript onNovember 14, 2014

那么首先我们来简单的看一下最正统的 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',"");

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

Javascript 相关文章推荐
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
Javascript window对象详解
Nov 12 Javascript
浅谈jquery事件处理
Apr 24 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
一文读懂ES7中的javascript修饰器
May 06 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
js与C#进行时间戳转换
Nov 14 #Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 #Javascript
使用node.js 制作网站前台后台
Nov 13 #Javascript
You might like
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP缓存技术的多种方法小结
2012/08/14 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
简述php环境搭建与配置
2016/12/05 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
动态刷新 dorado树的js代码
2009/06/12 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
Python单例模式的两种实现方法
2017/08/14 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python实现Linux监控的方法
2019/05/16 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
python超时重新请求解决方案
2019/10/21 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
综合办公室主任职责
2013/12/16 职场文书
个人委托书范本
2014/04/02 职场文书
会计工作总结范文2014
2014/12/23 职场文书
安全学习心得体会范文
2016/01/18 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python