首頁 > web前端 > js教程 > 主體

推薦一款jQuery外掛模板_jquery

WBOY
發布: 2016-05-16 16:21:26
原創
943 人瀏覽過

我使用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'});

  以下是我喜歡這種模板的原因

  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插件模板的吧,他實在是太靈活了。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板