jQuery UI：对话框按钮样式答案

【问题标题】：jQuery UI: Dialog button stylingjQuery UI：对话框按钮样式
【发布时间】：2011-01-28 23:05:41
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

我可以看到它很老的问题，但你现在可以在 jQuery UI 中以更好的方式做到这一点，只需将“类”或“样式”属性添加到按钮对象，如下所示：

$("#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"}
    ]
});

【讨论】：

我已将此更新为可接受的答案，因为它是一个更好更现代的解决方案。

【解决方案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 元素和按钮窗格 div 元素的父元素，然后在父元素中查找各个按钮。

【讨论】：

好主意 - 我忘记了那些特殊的选择器。似乎没有更直接的方法可以解决这个问题 - 所以我会接受你的回答，因为这似乎是一种相当干净的方法
谢谢。顺便说一句，UI 1.9 应该支持增强的按钮控制。如果你只想修补 1.8，你可以找到更多关于补丁的信息here。
不得不纠结于 $buttonPane 的收购，因为 $(this) 原来不在按钮旁边。 $(this).parent() 是整个对话框的外部元素。

【解决方案3】：

这个线程 - jQuery UI confirmation dialog - manipulating output - 似乎提供了一个更简洁的选项，它应该比 find 执行得更快。

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

【讨论】：

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

【解决方案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 了解可用的对话框样式

【讨论】：

谢谢您，尽管您如何建议使用此路由将图标添加到第一个按钮，而不是“ui-dialog-buttonpane”区域中包含的第二个按钮？
是的...我试过这个，但该死的，如果它不使用我的自定义类。