jquery - 如何使用数组扩展 jquery 插件的选项

Question

我正在编写一个 jQuery 插件。有一些默认选项，我可以在 HTML 上更改它们，但是如果选项由数组组成，我如何更改它？

这是插件中的代码:

(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 中，但我不知道该怎么做。

Answer 1

将颜色数组添加到默认值中，如下所示

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']});

<小时/>

fiddle 演示: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

<小时/>