jQuery UI: 对话框按钮样式化

Question

有没有一种简单的方法来将CSS/图标应用到jQuery UI模态对话框框中的模态按钮上？

如果我包含HTML来显示一个带有按钮文本的图标，它会将HTML显示为文本而不是呈现代码。

我猜我可以编写一些jQuery来查找按钮并使用我想要的内容覆盖HTML，但我希望有一种更简单直接的方法。

- Peter Bridger

Answer 1

我知道这是一个相当旧的问题，但您现在可以使用jQuery UI以更美观的方式完成它，只需向按钮对象添加'class'或'style'属性，如下所示：

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});  

- rafbel

---

我已将此更新为被接受的答案，因为它是更好、更现代化的解决方案。 - Peter Bridger

Answer 2

这是我目前在我们的项目中使用的：

$("#id-dialog").dialog({
        modal: true,
        buttons: {
            'Login': logIn,
            Cancel: logOut
        },
        open: function() {
            $buttonPane = $(this).next();
            $buttonPane.find('button:first').addClass('accept').addClass('ui-priority-primary');
            $buttonPane.find('button:last').addClass('cancel').addClass('ui-priority-secondary');                        
        }
    });

如果只有两个按钮，则可以使用首尾按钮进行操作。如果有多个按钮，您可以使用:nth-child(index)。

另一种方法是引用包含对话框div元素和buttonpane div元素的父元素，然后在父元素中查找各个按钮。

- Joel D'Souza

---

好想法 - 我忘记了那些特定的选择器。看起来没有更直接的方法来解决这个问题 - 所以我会采用你的答案，因为它似乎是一个相当干净的方法。 - Peter Bridger

谢谢。顺便说一下，UI 1.9应该支持增强的按钮控件。如果您只想打补丁1.8，您可以在这里找到更多关于补丁的信息（http://dev.jqueryui.com/ticket/4344）。 - Joel D'Souza

必须调整$buttonPane的获取方式，因为$(this)不是紧贴在按钮旁边。$(this).parent()是整个对话框的外层元素。 - Altreus

Answer 3

这个帖子 - jQuery UI确认对话框 - 操纵输出 - 提供了一个更干净的选项，应该比查找执行得更快。

$('.ui-dialog-buttonpane').children('button')[1]

一开始我在使用它时遇到了困难，但是注意到这不会返回一个jquery DOM对象后，我成功地将其运行起来了。它返回的是html，因此您需要将其放入jquery操作符中才能使用它。例如 -

var button1 = $('.ui-dialog-buttonpane').children('button')[1];
$(button1).removeClass('ui-button-text-only').addClass('ui-button-text-icon');

- paul

---

你也可以使用$('.ui-dialog-buttonpane').children('button').eq(1)将其作为jQuery对象。 - ipopa

Answer 4

可以覆盖模态对话框的 CSS 类以适应您的需求。例如，您可以创建具有指定自定义类的对话框：

$("#id-dialog").dialog({ 
            dialogClass: "loadingScreenWindow",
            ...

然后在 CSS 中：

/* hide the title bar on the loading screen */ 
.loadingScreenWindow .ui-dialog-titlebar {
  display: none;
}

请查看http://docs.jquery.com/UI/Dialog#theming以获取对话框样式类的可用列表

- dragoon

---

谢谢您的回复，不过您认为如何使用这个路由来为第一个按钮添加图标，而不是包含在“ui-dialog-buttonpane”区域内的第二个按钮？ - Peter Bridger

是啊...我尝试过这个，但是该死的它没有使用我的自定义类。 - Nathan Tregillus