jQuery Ui對話框按鈕，如何添加類？

How to add multiple buttons in Jquery UI dialog box?

使用此語法，你怎麼添加類特定的按鈕？

$("#mydialog").dialog({ 
     buttons: { 
     'Confirm': function() { 
      //do something 
      $(this).dialog('close'); 
     }, 
     'Cancel': function() { 
      $(this).dialog('close'); 
     } 
     } 
    });

來源

2011-07-15 maru

+13

... Laphroiag威士忌和古巴雪茄。 – rockerest

@rockerest：你剛剛度過了我的一天。 Laphroiag 10年單一麥芽是我去蘇格蘭。 –

它看起來並不像有通過API來做到這一點的好方法，但是你可以在事件處理程序中添加類create：

$("#dialog").dialog({ 
    buttons: { 
     'Confirm': function() { 
      //do something 
      $(this).dialog('close'); 
     }, 
     'Cancel': function() { 
      $(this).dialog('close'); 
     } 
    }, 
    create:function() { 
     $(this).closest(".ui-dialog") 
      .find(".ui-button:first") // the first button 
      .addClass("custom"); 
    } 
});

如果你想第二個按鈕，你可以使用：

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

的關鍵是$(this).closest(".ui-dialog").find(".ui-button")，這將選擇對話框中的按鈕。之後，您可以應用您需要的任何選擇器（包括:contains(...)，如果您想根據其文本而不是其順序來選擇按鈕，這可能很有用）。

下面是一個例子：http://jsfiddle.net/jjdtG/

另請注意，要應用的樣式（S）的CSS選擇器有可能比jQueryUI的內置的選擇更具體的爲了要應用的樣式。

來源

2011-07-15 03:18:02

+1這很好，但我用'open'而不是'create'，因爲我打開和關閉幾次相同的對話框。 – rg89

.dialog（{dialogClass：「custom」，...}）是如何在文檔中做到的。 – Popnoodles

@popnoodles：這是一個非常古老的答案。這可能*是現在這樣做的首選方式。 –

使用Open事件處理程序：

open: function(event) { 
    $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton'); 
}

清潔，簡單，小菜一碟！

來源

2011-07-15 03:23:49 bpeterson76

不要忘記i18n！如果網站支持多種語言，則此方法不起作用 –

如果您將該按鈕的字符串替換爲該語言的值，它可能會尊重國際化。如果需要，你也可以改變你的選擇器。 i18n不是OP的問題的一部分.....對於大多數開發人員來說，這主要是一個邊緣案例。 – bpeterson76

@ bpeterson76：也許大多數甲骨文開發者，但在美國以外的國家，i18n是一個主要問題......通常對於無法應對不使用「特殊」日期格式的網站的美國用戶。 –

您可以通過

$('#mydialog').dialog({ 
    buttons:{ 
    "send":{ 
     text:'Send', 
     'class':'save' 
    }, 
    "cancel":{ 
     text:'Cancel', 
     'class':'cancel' 
    } 
    });

添加類按鈕在對話框......我認爲這會爲你工作。你可以找到更多的答案here。

來源

2011-07-15 05:20:58

如果你的UI版本只是比較新的， – bpeterson76

您應該更改「className」這個單詞作爲「class」 – kajo

雖然這個方法有效，但它會在許多IDE（如Netbeans）中生成錯誤，導致我選擇上述方法（查找按鈕並添加類）。 – streetlight

希望它會幫助！

$("#mydialog").dialog({ 
      buttons: { 
      'Confirm': function() { 
       //do something 
       $(this).dialog('close'); 
      }, 
      "Cancel": { 
        click: function() { 
         $(this).dialog("close"); 
        }, 
        text: 'Cancel', 
        class: 'custom-class' 
       } 
      } 
     });

來源

2014-07-17 09:33:45 LintonB

upvoted用於顯示點擊，文本和類的例子在一起。 – pymarco

這很有幫助。雖然我希望jQuery會追加類，但不是先插入它。 – nacho4d

jQuery Ui對話框按鈕，如何添加類？

回答

相關問題