如何擴展一個jQuery插件的選項與數組

我正在寫一個jQuery插件。有一些默認選項，我可以在HTML上更改它們，但如果它包含數組，則如何更改選項？如何擴展一個jQuery插件的選項與數組

這裏是插件代碼：

(function($){  
    $.fn.extend({ 
     aniTag: function(options) {  
      var defaults = { 
       radius: 25, 
       defaultradius: 0, 
       enableTilt: true, 
       tilt : 20, 
       random : true, 
       randomMax : 25 , 
      }; 

      var colors = new Array('4AC7ED', 'FDC015', '9F78EC', 'F25C33');   

      var options = $.extend(defaults, options); 

      return this.each(function() {     
       var o = options; 
       //some stuff 
      }); 
     } 
    }); 
})(jQuery);

下面是HTML用法：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.tags').aniTag({enableTilt: false}); 
    }); 
</script>

正如你可以看到我可以改變enableTilt選項。我需要做的是更改color陣列中的值。是的，我知道我需要將該數組放在defaults var中，但我不知道該怎麼做。

來源

2011-11-21 dum

您的顏色陣列添加到您的默認值，像這樣

var defaults = { 
    radius: 25, 
    defaultradius: 0, 
    enableTilt: true, 
    tilt : 20, 
    random : true, 
    randomMax : 25 , 
    colors: ['4AC7ED', 'FDC015', '9F78EC', 'F25C33'] 
};

然後你就可以用

$('.tags').aniTag({enableTilt: false, colors: ['ffffff', '000000']});

小提琴演示覆蓋它們：http://jsfiddle.net/Beufe/1/

var defaults = { 
    radius: 25, 
    defaultradius: 0, 
    enableTilt: true, 
    tilt: 20, 
    random: true, 
    randomMax: 25, 
    colors: ['4AC7ED', 'FDC015', '9F78EC', 'F25C33'] 
}; 

alert(defaults.colors.length); // output: 4 
alert('Default Value colors[0] = ' + defaults.colors[0]); // output: 4AC7ED 

var options = $.extend(defaults, { 
    enableTilt: false, 
    colors: ['ffffff', '000000'] 
}); 

alert(options.colors.length); // Output: 2 
alert('New Value colors[0] = ' + options.colors[0]); // output: ffffff

來源

2011-11-21 14:07:00

我按照你的方式添加了數組。但它沒有從數組中獲得任何值。甚至沒有默認值 – dum

defaults.colors [0]產生4AC7ED的結果，通過傳遞一個新數組並改變'.extend（）'該數組產生一個ffffff值。小提琴在這裏演示http://jsfiddle.net/Beufe/ –

我給我的答案和小提琴演示添加了示例代碼。 –

我還以爲你可以這樣做 -

var newcolors = new Array('FFFFFF', '00FFFF', '9F78EC', 'F25C33');

然後只需將您的陣列到您的插件通過選項地圖 -

$('.tags').aniTag({enableTilt: false,colorArray:newcolors});

如果您在初始選項定義數組以及

var defaults = { radius: 25, defaultradius: 0, enableTilt: true, tilt : 20, random : true, randomMax : 25 , colorArray:colors };

然後擴展函數應該用新的覆蓋初始數組已在已經通過

來源

2011-11-21 14:06:03 ipr101

我試過了，但它只是帶來了默認數組。 – dum

當您使用數組時，您是否在您的插件中引用了'options.colorArray'？ 'extend'的文檔表明它應該適用於數組 - http://api.jquery.com/jQuery.extend/ – ipr101

我想你是說你想從html屬性中獲取參數？

<a data-param1="test" data-param2="test">test</a>

那麼你可以做

$('a').data('param1') and $('a').data('param2')

得到它們。

來源

2011-11-21 14:08:58 DoXicK

如何擴展一個jQuery插件的選項與數組

回答

相關問題