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

jQuery Dialog - Modification on an Array of Buttons

本文关键字：数组 修改 按钮 对话框 jQuery      更新时间：2023-09-26

我有一个函数，它创建一个充满按钮的对话框，其名称来自按钮数组。 请在此处查看此帖子。

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

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

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

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

使用此标记：

<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();
相关文章：