源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

推荐一款jQuery插件模板

  • 时间:2022-10-03 20:05 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:推荐一款jQuery插件模板
我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:
[u]复制代码[/u] 代码如下:
;(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点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:
[u]复制代码[/u] 代码如下:
$('.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插件模板的吧,他实在是太灵活了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部