jQuery對話框 - 修改按鈕陣列

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