Array in jQuery plugin options?


#1

Is there a way to pass an array to a jQuery plugin options like that:

defaults = { x: 300, y: ['32%','33%','34%','36%','37%','32%'] }

it’s not working with me.


#2

Depends on whether or not the plugin accepts that. It has nothing to do with jQuery.

What you posted looks like valid javascript code, though.


#3
outandouter said

Depends on whether or not the plugin accepts that. It has nothing to do with jQuery.

What you posted looks like valid javascript code, though.

I’m developing a jQuery plugin and I want to make that option but it’s not working :slight_smile:


#4
alialaa said
outandouter said

Depends on whether or not the plugin accepts that. It has nothing to do with jQuery.

What you posted looks like valid javascript code, though.

I’m developing a jQuery plugin and I want to make that option but it’s not working :slight_smile:

defaults = { x: 300, y: ['32%','33%','34%','36%','37%','32%'] };

Testing in console? :wink:

defaults = { x: 300, y: ['32%','33%','34%','36%','37%','32%'] }; alert(defaults.y[0]);

If yes then now will be fine.


#5

Absolutely possible, but just keep in mind the end user. Simple key, value pairs can be confusing to some customers so keep it simple. I’ve found that something as simple as {‘x’:‘20,40,60,80’ , ‘y’:‘25,45,65,85’} is a simple format that many users are already familiar with and is still fast and flexible. For example, this could allow users to animate an element through an infinite set of x/y coordinates. All you need to do in your plugin code is SPLIT the value by comma, which creates an array. The number of items on the array is the number of points the user wants to animate through. You could then setup a delay, and a time setting in a similar, comma-separated and very straight forward fashion, allowing the user to control the speed and delay at each point. Then just setup a loop (where i is the length of the array) and use the xArray[i] or yArray[i] to grab each specific coordinate point for a .animate or animation FOR loop. This format is easy for users to understand, provides a ton of flexibility as far as scaling to what the user wants, can be used in a ton of different situations from switching through elements, animating through colors, coordinates, etc, and is fast. Make sure to do all of your unit checks and array length checks and this will allow users to pass in a simple string like they are used to and keep things simple on the user end. :slight_smile:


#6
Crusader12 said

Absolutely possible, but just keep in mind the end user. Simple key, value pairs can be confusing to some customers so keep it simple. I’ve found that something as simple as {‘x’:‘20,40,60,80’ , ‘y’:‘25,45,65,85’} is a simple format that many users are already familiar with and is still fast and flexible. For example, this could allow users to animate an element through an infinite set of x/y coordinates. All you need to do in your plugin code is SPLIT the value by comma, which creates an array. The number of items on the array is the number of points the user wants to animate through. You could then setup a delay, and a time setting in a similar, comma-separated and very straight forward fashion, allowing the user to control the speed and delay at each point. Then just setup a loop (where i is the length of the array) and use the xArray[i] or yArray[i] to grab each specific coordinate point for a .animate or animation FOR loop. This format is easy for users to understand, provides a ton of flexibility as far as scaling to what the user wants, can be used in a ton of different situations from switching through elements, animating through colors, coordinates, etc, and is fast. Make sure to do all of your unit checks and array length checks and this will allow users to pass in a simple string like they are used to and keep things simple on the user end. :slight_smile:

The problem is that when I test getting a value from the array like so:
alert(options.array[2])
it gets weird and wrong values :frowning:


#7

Strange…
Something like this for the plugin call/initialization:

$(’.myElements’).plugin({ ‘setting1’:‘value1, value2, value3’, ‘setting2’: ‘value1,value2,value3’});

Then in your JS, your defaults will look like any standard jQuery plugin (key/value), except your values are strings that can quickly be converted to arrays for use in loops/other situations.
Inside your plugin JS file you’ll initially be dealing with 2 objects, the defaults object and the options object. (sorry if some of this is a already a big duh, but hopefully others can benefit from this as well). The defaults object contains the static settings set inside plugin. The options object contains the settings (not necessarily all of the plugin settings) passed in from the user. At the beginning of your plugin, both objects are merged together ($.extend). This uses the settings from the options object to overwrite those in the defaults object. We’ll save this into a new object called “settings”.

At this point, the user has passed in
$(’.myElements’).plugin({ ‘setting1’:‘value1, value2, value3’, ‘setting2’: ‘value1,value2,value3’});

So, settings.setting1 will be a string of ‘value1,value2,value3’

After settings are merged in the plugin, I like to call a quick method that cycles through the new merged settings object and does unit/type checks on all of the options. This is very handy since it keeps code down to a minimum (you don’t have to worry about writing parseInt, parseFloat, to string, etc a billion times in your code, and it makes the important code a lot leaner and easier to read. Setup all of your setting values at the beginning is a logical way for you to work with throughout the rest of the code. Just call a quick method/function to handle this, or if you only have a few settings, do it right in beginning.

This is the place to use .split on your settings :slight_smile:

var mySetting1Array = settings.setting1.split(’,’);

That command will update that setting and convert it into an array, splitting at the comma.
Then you can just use alert(mySetting1Array[i]).

That way, users can enter something like this:

.plugin({ ‘x’: ‘10,20,30’, ‘y’: ‘20,40,60’ });

Which is very easy and straight forward to read. The plugin merges the user’s X and Y settings over the plugin’s default X and Y settings - saving to a new object called settings. Then, a function/method is called to cycle through, update all of the setting values - which is where they are split into arrays. It takes the load off of the user and places it in your plugin. :slight_smile:

You’re alerting the options object (which is the object the user is passing in, so the value would still be a string - if you’re using this approach). After you split the string by comma (or any other character you want), you’ll be able to alert the ArrayName[2]

Hopefully this helps :slight_smile:


#8
Crusader12 said

Strange…
Something like this for the plugin call/initialization:

$(’.myElements’).plugin({ ‘setting1’:‘value1, value2, value3’, ‘setting2’: ‘value1,value2,value3’});

Then in your JS, your defaults will look like any standard jQuery plugin (key/value), except your values are strings that can quickly be converted to arrays for use in loops/other situations.
Inside your plugin JS file you’ll initially be dealing with 2 objects, the defaults object and the options object. (sorry if some of this is a already a big duh, but hopefully others can benefit from this as well). The defaults object contains the static settings set inside plugin. The options object contains the settings (not necessarily all of the plugin settings) passed in from the user. At the beginning of your plugin, both objects are merged together ($.extend). This uses the settings from the options object to overwrite those in the defaults object. We’ll save this into a new object called “settings”.

At this point, the user has passed in
$(’.myElements’).plugin({ ‘setting1’:‘value1, value2, value3’, ‘setting2’: ‘value1,value2,value3’});

So, settings.setting1 will be a string of ‘value1,value2,value3’

After settings are merged in the plugin, I like to call a quick method that cycles through the new merged settings object and does unit/type checks on all of the options. This is very handy since it keeps code down to a minimum (you don’t have to worry about writing parseInt, parseFloat, to string, etc a billion times in your code, and it makes the important code a lot leaner and easier to read. Setup all of your setting values at the beginning is a logical way for you to work with throughout the rest of the code. Just call a quick method/function to handle this, or if you only have a few settings, do it right in beginning.

This is the place to use .split on your settings :slight_smile:

var mySetting1Array = settings.setting1.split(’,’);

That command will update that setting and convert it into an array, splitting at the comma.
Then you can just use alert(mySetting1Array[i]).

That way, users can enter something like this:

.plugin({ ‘x’: ‘10,20,30’, ‘y’: ‘20,40,60’ });

Which is very easy and straight forward to read. The plugin merges the user’s X and Y settings over the plugin’s default X and Y settings - saving to a new object called settings. Then, a function/method is called to cycle through, update all of the setting values - which is where they are split into arrays. It takes the load off of the user and places it in your plugin. :slight_smile:

You’re alerting the options object (which is the object the user is passing in, so the value would still be a string - if you’re using this approach). After you split the string by comma (or any other character you want), you’ll be able to alert the ArrayName[2]

Hopefully this helps :slight_smile:

Thanks for your time, I’ll read this long post and try to get the most out of it. Thank you :slight_smile:


#9

No problem, hope you find it helpful :slight_smile: