jQuery Ui对话框按钮,如何添加类？

Question

我在另一个帖子上找到了这个答案..

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

使用此语法,如何将类添加到特定按钮？

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

Answer 1

您可以在Dialog ...中添加类的按钮

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

我认为这对你有用.你可以在这里找到更多答案.

Answer 2

通过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/

另请注意,要应用的样式的CSS选择器必须比jQueryUI的内置选择器更具体,以便应用样式.

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事件处理程序:

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

干净,简单,一块蛋糕!