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

【问题标题】：How do I make nested options for plugins in jQuery如何在 jQuery 中为插件创建嵌套选项
【发布时间】：2010-04-12 22:10:24
【问题描述】：

我知道如何做插件，但我如何做嵌套选项，例如：

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 更干净、更整洁。

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案1】：

您的插件采用一个选项参数，人们使用对象文字将参数传递给插件。然后，您使用 $.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}});

【讨论】：

我拥有所有这些，我很好奇如何嵌套默认值:)
好的。更新。 $.extend 应该做一个“深度扩展”。
太棒了，谢谢...但唯一的问题是我在扩展中添加 {} 后，它不会更改默认值？
$('#top-breadcrumbs').breadcrumbs({classes:{breadcrumb_item:'the_bc'},delay_time:100});例如，breadcrumb_item 仍然 == 'breadcrumb-item'
@Oscar，@James，应该是$.extend(true, defaults, options);。 deep 是每个 api.jquery.com/jQuery.extend 的布尔值。

【解决方案2】：

其实这是对的。你的符号被称为 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})

【讨论】：

谢谢，非常接近，但是现在，如果我不设置所有这些，它们都是，但定义的，未定义的。例如。 $('#top-breadcrumbs').breadcrumbs({classes:{breadcrumb_item:'the_bc'},delay_time:100});使每一个未定义，但面包屑项目。我希望它像普通的 jQuery 默认或自定义方式一样工作
@Oscar，为此您需要 Jquery 的扩展功能以及 James 所示的深度复制。