如何在jQuery中为插件创建嵌套选项

时间:2010-04-12 22:10:24

标签: javascript jquery css jquery-plugins

我知道如何做插件,但我如何做嵌套选项,如:

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

知道这是不对的,我只是不知道如何编写正确的语法,当我想做喜欢这个:

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

其他建议是受欢迎的,我需要能够自定义类名,并且有7个,所以不要像test_class,example_class等id那样像上面的例子那样更干净,更整洁。

2 个答案:

答案 0 :(得分:3)

其实这是正确的。你的符号被称为JSON,它是一个非常简单的符号(见json.org

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

相当于

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

在你的第二个例子中,你只是错过了冒号。

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

答案 1 :(得分:2)

你的插件有一个选项参数,人们使用对象文字将参数传递到插件中。然后使用$ .extend将选项与默认值组合在一起。这是您可以复制的插件的模式。

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

您可以像这样调用此插件

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