jquery对话框保存取消按钮样式

Question

我在我的应用程序中使用jquery ui对话框.如何在jquery对话框中以不同方式设置"保存"和"取消"按钮的样式？所以"保存"比"取消"更具吸引力.我可以使用超级链接"取消",但如何将其放在同一按钮面板中？

Answer 1

以下是如何在jQuery UI Dialog(版本1.8+)中添加自定义类:

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
}); 

Answer 2

在jQueryUI 1.8.9中使用className而不是classes工作.

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

Answer 3

我正在使用jQuery UI 1.8.13,以下配置可以正常工作:

var buttonsConfig = [
    {
        text: "Ok",
        "class": "ok",
        click: function() {
        }
    },
    {
        text: "Annulla",
        "class": "cancel",
        click: function() {
        }
    }
];

$("#foo").dialog({
    buttons: buttonsConfig
// ...

ps:记得用引号包装"class",因为它是js中的保留字!

Answer 4

自从发布此问题以来已经有一段时间了,但以下代码适用于所有浏览器(请注意,尽管MattPII在FFox和Chrome中可以解决问题,但它会在IE中引发脚本错误).

$('#foo').dialog({
    autoOpen: true,
    buttons: [
    {
        text: 'OK',
        open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button.
        click: function() { alert('OK Clicked')}
    },
    {
        text: "Cancel",
        click: function() { alert('Cancel Clicked')}
    }
  ]
});

Answer 5

截至下面的jquery ui版本1.8.16是我如何使它工作.

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});

Answer 6

如果您在任何时候只在页面中有一个对话框,这些解决方案都非常好,但是如果您想一次设置多个对话框的样式,请尝试:

$("#element").dialog({
    buttons: {
        'Save': function() {},
        'Cancel': function() {}
    }
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();

这不是全局选择按钮,而是获取窗口小部件对象并找到它的按钮窗格,然后单独设置每个按钮的样式.当您在一个页面上有多个对话框时,这可以节省很多痛苦