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

Question

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

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

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

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

Answer 1

您可以向对话框中的按钮添加类...通过

$('#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: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

干净，简单，小菜一碟！

Answer 5

感谢 LintonB，您可以添加附加到按钮的所有属性，如样式、id 等...

dialog_options.buttons = {
  'Modify': {
    click: function() {

      $(this).dialog('close');

      if (inputs.phone !== '') {
        inputs.phone.focus();
        inputs.phone[0].value = "";
      }
    },
    class: 'btn btn-labeled btn-warning',
    style: 'margin-right: 30px;',
    id: 'modificationId'
  },
  'Keep': {
    click: function() {
      $(this).dialog('close');

      _this.validatePhone(i);

    },
    class: 'btn btn-labeled btn-warning',
    id: 'conserverId'
  }
};

Answer 6

我无法得到其他人的一些答案来编译，但我不得不使用将我的

buttons

属性更改为数组：

buttons: [
    {
        text: "Okay",
        class: "my-button-class",
        click: function() {
            //
        }
    },
    {
        text: "Cancel",
        click: function() {
            //
        }
    }
]