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

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

$('#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();

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

Answer 7

在查看some other threads后，我想出了这个解决方案，在确认对话框中为按钮添加图标，这似乎在1.8.1版本中运行良好，可以修改为其他样式：

$("#confirmBox").dialog({
    modal:true,
    autoOpen:false,        
    buttons: { 
        "Save": function() { ... },                
        "Cancel": function() { ... }
        }
});

var buttons = $('.ui-dialog-buttonpane').children('button');
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon');

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>");

我有兴趣看看是否有更好的方法，但这似乎非常有效。

Answer 8

我必须在jQuery UI 1.8.22中使用以下构造：

var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');

这将删除所有格式并根据需要应用替换样式适用于大多数主流浏览器。

Answer 9

此函数将为您对话框中的每个按钮添加一个类。然后您可以正常设置样式（或使用jQuery选择）：

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});

Answer 10

我有JQuery UI 1.8.11版本，这是我的工作代码。您还可以根据您的要求自定义其高度和宽度。

$("#divMain").dialog({
    modal:true,
    autoOpen: false,
    maxWidth: 500,
    maxHeight: 300,
    width: 500,
    height: 300,
    title: "Customize Dialog",
        buttons: {
            "SAVE": function () {
                //Add your functionalities here
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        },
        close: function () {}
});

Answer 11

查看jquery ui 1.8.5它可以在这里找到 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js 它有对话框ui实现的新按钮

Answer 12

我查看了UI Dialog生成的HTML。它呈现按钮窗格，如下所示：

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
     <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button>
     <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button>
</div>

将一个类添加到“取消”按钮应该很容易。

$（'。ui-dialog-buttonpane：last-child'）。css（'background-color'，'＃ccc'）;

这将使取消按钮变为灰色。您可以随意设置此按钮的样式。

上面的代码假定取消按钮是最后一个按钮。这种万无一失的方法是

$('.ui-dialog-buttonpane :button')
    .each(
        function()
        { 
            if($(this).text() == 'Cancel')
            {
                //Do your styling with 'this' object.
            }
        }
    );

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

12 个答案: