jquery 插件开发指南
jquery 插件定义方式：
复制代码 代码示例:
(function ($) {
$.fn.插件名 = function (settings) {
//默认参数
var defaultSettings = {
} /* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings, settings);
return this.each(function () { //代码 }); //插件在元素内多次出现
} })(jQuery);
先来看模板中的第一行代码：
(function ($) {
})(jQuery);
以上代码用于创建一个匿名函数。
如果对匿名函数和闭包不了解，请参考文章：javascript 匿名函数与闭包入门教程
jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。
例1，jquery插件定义方式一：
复制代码 代码示例:
$.fn.tip = function (settings) {
var defaultSettings = {
//颜色
color: 'yellow',
//延迟
timeout: 200 }
/* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultSettings, settings);
alert(settings.input);
}
例2，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: ""
}
//内部实现略.........
return _index;
}
})(jQuery);
调用 $("#team").tabpanel('add',"");
以上二种jquery插件开发的方法，在日常的jquery插件编写中经常会用得到，朋友们可以参考实践下。
