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

【问题标题】：jquery dialog save cancel button stylingjquery对话框保存取消按钮样式
【发布时间】：2010-11-11 10:01:32
【问题描述】：

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

【问题讨论】：

您说的是典型的 Javascript 对话框（例如，您通过调用 alert() 得到的那种）？因为那些不能被样式化。你最好的选择是为 jQuery 使用某种类型的模态覆盖（我不能推荐一种，因为我从未使用过任何一种）。
正如帖子中提到的，他正在使用 jQuery UI 对话框。
然后，只需查看 jQuery 添加到页面的元素并基于该元素进行样式设置（或阅读文档，这无疑涵盖了这一点 - jqueryui.com/demos/dialog/#theming）
实际上，不，文档没有涵盖这一点。框架添加的按钮是通用的，因此除非您自己添加，否则您无法根据类名进行样式设置。

【解决方案1】：

这里是如何在 jQuery UI Dialog（1.8+ 版本）中添加自定义类：

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

【讨论】：

不幸的是，他们似乎已将此补丁的 milestore 更改为 1.9。
课程有效，课程无效。他们只是将您放入该对象的任何属性附加到 dom。
添加类实际上破坏了IE8中的js并导致对话框不起作用。如果你使用这个，请在单词 class 周围加上撇号。所以：优先级：'secondary'，'class'：'foo bar baz'，...等
另外，如果类没有被双引号/单引号包围，在 iPad 中也会出现问题。
看起来 1.11 版本的文档在这一点上仍然有点稀疏。 api.jqueryui.com/dialog/#option-buttons 提到了icons 和showText，给出了text、icons 和click 的例子，但没有提到priority 或class/className。

【解决方案2】：

在 jQueryUI 1.8.9 中使用 className 而不是 classes 有效。

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

【讨论】：

【解决方案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中的保留字！

【讨论】：

他所说的 - class: 有效，但不适用于 "class": 的旧版 IE

【解决方案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')}
    }
  ]
});

【讨论】：

谢谢！在 1.8.23 版本中为我工作，但我无法使用旧版本的一些旧答案。

【解决方案5】：

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

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

【讨论】：

刚刚尝试使用此样式，但在 IE 7,8 和 9 中生成了脚本错误。
我也遇到过这个问题，并以答案的形式添加了解决方案。

【解决方案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();

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

【讨论】：

【解决方案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>");

我很想看看是否有更好的方法，但这似乎很有效。

【讨论】：

【解决方案8】：

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

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

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案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 () {}
});

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案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.
            }
        }
    );

【讨论】：