47

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

4

12 回答 12

54

以下是如何在 jQuery UI 对话框（版本 1.8+）中添加自定义类：

$('#foo').dialog({
    'buttons' : {
        'cancel' : {
            priority: 'secondary', class: 'foo bar baz', click: function() {
                ...
            },
        },
    }
});
于 2009-08-23T17:21:15.163 回答
40

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

$('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      className:'save'
    },
    "cancel":{
      text:'Cancel',
      className:'cancel'
    }
  });
于 2011-02-02T15:20:48.677 回答
16

我正在使用 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中的保留字！

于 2012-01-04T10:59:45.967 回答
11

自从发布此问题以来已经有一段时间了，但以下代码适用于所有浏览器（请注意，虽然MattPIIFFox 和 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')}
    }
  ]
});
于 2012-05-02T14:34:46.177 回答
10

从下面的 jquery ui 版本 1.8.16 开始，我是如何让它工作的。

$('#element').dialog({
  buttons: { 
      "Save": {  
          text: 'Save', 
          class: 'btn primary', 
          click: function () {
              // do stuff
          }
      }
});
于 2011-12-15T18:25:20.407 回答
7

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

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

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

于 2010-12-20T21:49:18.740 回答
4

在查看了其他一些线程后，我想出了这个解决方案，可以在确认对话框中向按钮添加图标，这在 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>");

我很想看看是否有更好的方法来做到这一点，但这似乎非常有效。

于 2010-05-21T21:40:22.790 回答
2

我不得不在 jQuery UI 1.8.22 中使用以下构造：

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

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

于 2012-09-20T08:27:40.023 回答
1

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

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,''));
});
于 2010-07-30T18:18:13.337 回答
1

我有 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 () {}
});
于 2016-11-09T06:21:58.260 回答
0

查看 jquery ui 1.8.5 它可在此处获得 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js 并且它具有用于对话框 ui 实现的新按钮

于 2010-09-17T11:45:09.077 回答
-1

我查看了 UI 对话框生成的 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.
            }
        }
    );
于 2009-07-16T16:31:27.307 回答