欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

推薦一款jQuery插件模板

 更新時間:2015年01月09日 09:40:08   投稿:hebedich  
這篇文章主要給大家推薦一款jQuery插件模板,這是本人最喜歡的一款了,原因很簡單,使用方便,可選擇性也比較多。有需要的小伙伴參考下吧

我使用jQuery已經(jīng)有相當長的時間了,并且我會常常為它寫一些插件(plugin)。我嘗試過用不同的方式去寫,現(xiàn)在這個模板是我最喜歡的:

復制代碼 代碼如下:

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

相關(guān)文章

  • 淺析jQuery對select操作小結(jié)(遍歷option,操作option)

    淺析jQuery對select操作小結(jié)(遍歷option,操作option)

    本篇文章是關(guān)于jQuery對select的操作進行了總結(jié)介紹,需要的朋友可以參考下
    2013-07-07
  • jQuery性能優(yōu)化技巧分析

    jQuery性能優(yōu)化技巧分析

    這篇文章主要介紹了jQuery性能優(yōu)化技巧,較為詳細的分析了jQuery的常見使用技巧,非常具有實用價值,需要的朋友可以參考下
    2015-02-02
  • jQuery.extend 函數(shù)詳解

    jQuery.extend 函數(shù)詳解

    Jquery的擴展方法extend是我們在寫插件的過程中常用的方法,該方法有一些重載原型,在此,我們一起去了解了解
    2012-02-02
  • jQuery判斷checkbox是否選中的小例子

    jQuery判斷checkbox是否選中的小例子

    判斷checkbox是否選中的方法有很多,不過都是大同小異,下面為大家介紹下使用jquery是如何做到的,下面有個不錯的示例,感興趣的朋友可以參考下
    2013-12-12
  • jquery 插件學習(四)

    jquery 插件學習(四)

    如果你明白了前面講的使用jquery.fn對象屬性的方法創(chuàng)建jquery對象的方法,那么使用extend()方法創(chuàng)建jquery對象就比較容易理解了。理解了嗎,一定要仔細揣摩,仔細研究。我也是再慢慢的學習,慢慢的領(lǐng)悟
    2012-08-08
  • jQuery基本選擇器選擇元素使用介紹

    jQuery基本選擇器選擇元素使用介紹

    基本選擇器:是jQuery中使用最頻繁的選擇器,它由元素Id、Class、元素名、多個選擇符組成,通過基本選擇器可以實現(xiàn)大多數(shù)頁面元素的查找,感興趣的朋友可以參考下哈
    2013-04-04
  • jQuery實現(xiàn)的簡單歌詞滾動功能示例

    jQuery實現(xiàn)的簡單歌詞滾動功能示例

    這篇文章主要介紹了jQuery實現(xiàn)的簡單歌詞滾動功能,結(jié)合實例形式分析了基于jQuery插件scroll.js實現(xiàn)滾動功能相關(guān)操作技巧,涉及jQuery結(jié)合時間函數(shù)動態(tài)操作頁面元素相關(guān)實現(xiàn)方法,需要的朋友可以參考下
    2019-01-01
  • 簡單實現(xiàn)jQuery彈窗效果

    簡單實現(xiàn)jQuery彈窗效果

    這篇文章主要教大家簡單實現(xiàn)jQuery彈窗效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單

    jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單

    這篇文章主要給大家分享了jQuery實現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼,非常的簡單實用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。
    2015-03-03
  • 基于JQuery的密碼強度驗證代碼

    基于JQuery的密碼強度驗證代碼

    密碼強度驗證的方式有很多,今天給大家推薦一個通過JQuery實現(xiàn)的密碼強度驗證控件,只需要很少的代碼便能實現(xiàn)。
    2010-03-03

最新評論