手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery 插件开发指南
jQuery 插件开发指南
摘要:那么首先我们来简单的看一下最正统的jQuery插件定义方式:复制代码代码如下:(function($){$.fn.插件名=function(...

那么首先我们来简单的看一下最正统的 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种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些

【jQuery 插件开发指南】相关文章:

jQuery插件制作之全局函数用法实例

jQuery插件jRumble实现网页元素抖动

jQuery插件bgStretcher.js实现全屏背景特效

jQuery插件zepto.js简单实现tab切换

Ctrl+Enter提交内容信息

jQuery插件datepicker 日期连续选择

javascript插件开发的一些感想和心得

jquery实现弹出层效果实例

jQuery实现不断闪烁文字的方法

jQuery插件实现适用于移动端的地址选择器

精品推荐
分类导航