如何在jQuery中为插件设置嵌套选项

时间:2022-09-28 20:24:06

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.

其他建议是受欢迎的,我需要自定义类名的能力,有7个,所以不需要像上面的例子一样使test_class、example_class等变得更整洁。

2 个解决方案

#1


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

#2


3  

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

实际上这是正确的。这里的符号是JSON,这是一个非常简单的符号(参见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})

#1


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

#2


3  

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

实际上这是正确的。这里的符号是JSON,这是一个非常简单的符号(参见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})