推荐一款jQuery插件模板_jquery
程序员文章站
2022-05-17 09:37:51
...
我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:
;(function($) {
// multiple plugins can go here
(function(pluginName) {
var defaults = {
color: 'black',
testFor: function(div) {
return true;
}
};
$.fn[pluginName] = function(options) {
options = $.extend(true, {}, defaults, options);
return this.each(function() {
var elem = this,
$elem = $(elem);
// heres the guts of the plugin
if (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
borderColor: options.color
});
}
});
};
$.fn[pluginName].defaults = defaults;
})('borderize');
})(jQuery);
//下面是用法
$('div').borderize();
$('div').borderize({color: 'red'});
$('.borderize').borderize({
testFor: function(elem) {
var $elem = $(elem);
if (elem.is('.inactive')) {
return false;
} else {
// calling "parent" function
return $.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});
We can even do this with regular properties like this
var someVarThatMayBeSet = false;
/* code ... */
$('.borderize').borderize({
color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});
复制代码 代码如下:
;(function($) {
// multiple plugins can go here
(function(pluginName) {
var defaults = {
color: 'black',
testFor: function(div) {
return true;
}
};
$.fn[pluginName] = function(options) {
options = $.extend(true, {}, defaults, options);
return this.each(function() {
var elem = this,
$elem = $(elem);
// heres the guts of the plugin
if (options.testFor(elem)) {
$elem.css({
borderWidth: 1,
borderStyle: 'solid',
borderColor: options.color
});
}
});
};
$.fn[pluginName].defaults = defaults;
})('borderize');
})(jQuery);
//下面是用法
$('div').borderize();
$('div').borderize({color: 'red'});
以下是我喜欢这种模板的原因
1. 你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)
2. 通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)
第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:
复制代码 代码如下:
$('.borderize').borderize({
testFor: function(elem) {
var $elem = $(elem);
if (elem.is('.inactive')) {
return false;
} else {
// calling "parent" function
return $.fn.borderize.defaults.testFor.apply(this, arguments);
}
}
});
We can even do this with regular properties like this
var someVarThatMayBeSet = false;
/* code ... */
$('.borderize').borderize({
color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color
});
小伙伴们,你们也会喜欢上这款jQuery插件模板的吧,他实在是太灵活了。
上一篇: 200行描述MVC,读完kohana总结的一点笔记
下一篇: 特制大型PHP项目的方法
推荐阅读
-
基于jquery的blockui插件显示弹出层_jquery
-
每天学一个jquery插件-做右键菜单2
-
jquery 插件开发 extjs中的extend用法小结
-
基于jQuery的弹出框插件开发教程
-
关于jquery.edbox插件的使用方法
-
分享精心挑选的23款美轮美奂的jQuery 图片特效插件_jquery
-
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_PHP
-
基于jQuery的Tab选项框效果代码(插件)_jquery
-
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能_jquery
-
jquery插件lazyload.js延迟加载图片的使用方法