CODEWITHSUNDEEP
jqueryarrays
dum
dum

Reputation: 228

how to extend options of a jquery plugin with an array

I am writing a jQuery plugin. There are some default options and I can change them on HTML, but how can I change an option if it consists of an array?

Here is the code in plugin:

(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);

Here is the html usage:

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

As you can see I can change enableTilt option. What I need to do is to change the values in the color array. Yes, I know I need to put that array in defaults var, but I don't know how to do it.

Upvotes: 2

Views: 10817

Answers (3)

Jeff Wilbert
Jeff Wilbert

Reputation: 4520

Add your array of colors to your defaults like so

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

Then you can overwrite them with

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

Fiddle Demo: 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

Upvotes: 15

DoXicK
DoXicK

Reputation: 4812

i think you mean you want to get the parameters from the html attributes?

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

then you could do 

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

to get them.

Upvotes: 0

ipr101
ipr101

Reputation: 24236

I would have thought you could do -

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

then just pass your array into your plug-in via the options map -

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

If you define the array in your initial options as well ,

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

Then the extend function should just overwrite the initial array with the new one that has been passed in.

Upvotes: 1

Related Questions