2

ボタン配列から名前が付けられたボタンでいっぱいのダイアログを作成する関数があります。こちらの投稿をご覧ください。

生成されたボタン配列にスタイルを適用できるように、この関数を変更します。そのような...

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

一部の人が示唆しているように、色はユーザーが設定するか、ボタンに一致するように順序付けられた色の配列から取得されるため、ボタンにクラスを適用することはできません。これに関する助けをいただければ幸いです。

4

1 に答える 1

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();
于 2013-01-24T23:31:20.967 に答える