javascript - jQuery Dialog - 修改按钮数组

Question

我有一个函数可以创建一个充满按钮的对话框，这些按钮的名称来自按钮数组。见此帖here .

我想做的是修改此函数，以便我可以将样式应用于生成的按钮数组。如此……

function setAutoDialog(){
    var testArray = ["T1", "T2"];

    var testFunction = function () {
        alert("worked");
    }

    var myButtons = {};

    for(var i = 0; i < testArray.length; i++){
        myButtons[testArray[i]] = testFunction;
    }
    for(var i = 0; i < testArray.length; i++){
        myButtons[i].css('background','black');
    }

    $('#autoDialog').dialog({
        autoOpen: false,
        width: 'auto',
        buttons : myButtons
    }); 
}

正如你们中的一些人可能建议的那样，我不能将类应用到按钮，因为颜色将由用户设置，或者来自一组有序颜色以匹配所述按钮。对此的任何帮助将不胜感激。

Answer 1

你将不得不稍微捏造一下。

使用这个标记:

<div id="autoDialog">howdy</div>

您可以创建一组颜色和类名，然后应用它们:

我稍微修改了您的程序，并添加了一些警报，因此您会看到已添加该类:(这是针对类属性的警报测试的 jQuery 1.9 版本)- 基本上我创建了一个动态样式元素并且应用它。我添加的样式刚好足以覆盖现有样式 - 确保它是一个 hack 但应该可以工作。 实践中的例子:http://jsfiddle.net/Q4qT3/1/

function setAutoDialog() {
    var testArray = ["T1", "T2"];
    var myClass = [{
        myclass: "primary",
        color: "#558899"
    }, {
        myclass: "secondary",
        color: "pink"
    }];
    var testFunction = function (e) {
        alert("worked2");
        alert($(e.target).prop("class"));
    };

    var myButtons = [];
    var i = 0;
    for (i = 0; i < testArray.length; i++) {
        myButtons[i] = {
            text: testArray[i],
            click: testFunction,
            myclass: myClass[i].myclass
        };
    }
    var myStyle = "<style type='text/css'> ";
    for (i = 0; i < testArray.length; i++) {
        myStyle += " .ui-dialog-buttonset ." ;
        myStyle += myClass[i].myclass;
        myStyle += " span.ui-button-text {background:";
        myStyle += myClass[i].color + ";}";
    }
    myStyle += "< /style > ";
    $(myStyle).appendTo("head");

    $('#autoDialog').dialog({
        autoOpen: false,
        width: 'auto',
        buttons: myButtons,
        create: function (event, ui) {
            //         Get the dialog
            var dialog = $(event.target).parents(".ui-dialog.ui-widget");
            var buttons = dialog.find(".ui-dialog-buttonpane").find("button");
            for (var i = 0; i < buttons.length; i++) {
                $(buttons[i]).addClass($(buttons[i]).attr("myclass"));
            }
        }
    });
    $('#autoDialog').dialog("open");
}
setAutoDialog();