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版本） - 基本上我创建了一个动态样式元素，适用它。我添加了足够的样式来覆盖现有的样式 - 确定它是一个黑客，但应该工作。实践中的例子：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();

jQuery对话框 - 按钮数组的修改

1 个答案: