Question

我有一个使用jquery Colorbox插件的.Net 4，MVC 3网站。一切都按预期工作，但是，我想允许单个<a>标签自定义颜色框的选项。

在网页上有<a>标记：

    <a class="AddNewItem" 
       href="@Url.Action("Create", "Phone", new { masterSID = ViewData["MasterSID"] })"
       cboxOptions='transition: "fade", scrolling: false, overlayClose: false, height: "100%"'>
        Add Phone
    <a>

在js文件中，我有以下代码：

$(document).ready(function () {

    $(".AddNewItem").colorbox($.extend({ title: "Add New Item" },
                                   SetCboxOptions($(this))
                             )
    );
});

function SetCboxOptions(obj) {
    var options = {};

    if ($(obj).attr("cboxOptions") != undefined) {
        var hash;
        var hashes = $(obj).attr("cboxOptions").replace(' ', '').split(',');
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split(':');
            options[hash[0]] = hash[1];
        }
    }

    return options;
}

当我点击链接时，会出现一个弹出窗口，其中包含通过调用/ Phone / Create生成的正确表单？masterSID =＃。验证工作，并提交作品。

以下是问题

<a>标记的cboxOptions属性中设置的所有选项都不会对Colorbox生效。我正在使用Colorbox网站上的代码，说明这应该有效。任何人都可以指出它为什么不是吗？

Answer 1

我建议使用HTML5数据属性创建一个属性，以JSON格式存储您想要的设置对象。例如：

<a class="AddNewItem" href="@Url.Action("Create", "Phone", new { masterSID = ViewData["MasterSID"] })" data-cbox='{"transition":"fade", "height":"100%"}'>Add Phone<a>

$(".AddNewItem").each(function(){
    var settings = $(this).attr('data-cbox');

    if (settings) {
        settings = $.parseJSON(settings);
    }

    $(this).colorbox(settings || {});
});

Answer 2

为了让Jack的答案更进一步，我修改了他的代码以允许定义默认设置并通过data-cbox属性中设置的值覆盖：

        $(".AddNewItem").each(function () {
            var settings = $(this).attr('data-cbox');
            var defaults = $.parseJSON('{"transition":"fade","overlayClose":false,"scrolling":false,"initialWidth":"200","initialHeight":"200"}');

            if (settings) {
               settings = $.parseJSON(settings);
               settings = $.extend(defaults, settings);
            }        

            $(this).colorbox(settings || defaults);
       });

$.extend方法将defaults中设置的值替换为settings定义的值。再次感谢杰克，给出了一个简洁明了的答案。我计划使用这种模式。

从Anchor标签设置Colobox选项

2 个答案: