How do I make nested options for plugins in jQuery

Question

I know how to do plugins, but how do I do nested options like:

var defaults = {
    spacing:10,
    shorten_to:50,
    from_start:0,
    from_end:2,
    classes: {
        test:'testing'
    }
};

i know that isn't right, i just dont know how to write the proper syntax when I want to do something like this:

$('#breadcrumbs').breadcrumbs({classes{test:'new_example'},spacing:12})

other suggestions are welcome, im in need of the ability to custom class names and there are 7, so rather than making something like test_class, example_class, etc id like it cleaner and neater like the example above.

Answer 1

Actually that is correct. Your notation there is known as JSON, and it's an extremely simple notation (see json.org)

var someobject = { prop: 'prop' };
var anotherobject = { name: 'name' };
someobject.someproperty = anotherobject;

Is equivalent to

var someobject = { prop: 'prop', { name: 'name' }};

In your second example, you're just missing a colon.

$('#breadcrumbs').breadcrumbs({classes:{test:'new_example'},spacing:12})

Answer 2

Your plugin takes one options parameter and people pass parameters into the plugin using an object literal. You then use $.extend to combine the options with the defaults. Here is a pattern for a plug-in you can copy.

//Create closure
(function($) {

    var defaults = { //Default settings for breadcrumbs
        async: false,
        race: 100,
        interval: 1,
        classes: {
            test:'testing'
        }
    };

    //Plugin definition
    $.extend({

        //Execute the functions added to the stack
        breadcrumbs: function(options) {

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

            //Loop through each item in the matched set and apply event handlers
            return this.each(function(i) {

                //Code here , this = current selection
            });
        }
    });

// end of closure and execute
})(jQuery);

You would call this plug-in like so

$('div').breadcrumbs({async:true, interval:2, classes: {another: true}});