jQuery Ui对话框button，如何添加类？

我在另一个线程上find了这个答案..

如何在Jquery UI对话框中添加多个button？

使用这个语法，你如何添加类到一个特定的button？

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

Answer 1

看起来好像没有很好的方法可以通过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"); } }); 

如果你想要第二个button，你可以使用：

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

关键是$(this).closest(".ui-dialog").find(".ui-button") ，它将select对话框中的button。 之后，你可以应用你想要的任何select器（包括:contains(...)如果你想select一个基于它的文本，而不是它的顺序的button可能是有用的）。

这是一个例子： http : //jsfiddle.net/jjdtG/

还要注意，要应用样式的CSSselect器必须比jQueryUI的内置select器更具体，才能应用样式。

Answer 2

您可以将类添加到button的对话框中

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

我认为这会为你工作。 你可以在这里find更多的答案。

Answer 3

希望它会帮助！

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

Answer 4

使用打开的事件处理程序：

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

干净，简单，一块蛋糕！