Question

是否有一种简单的方法将CSS /图标应用于jQuery UI模式对话框中的模态按钮？

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

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

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

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（索引）。

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

Answer 3

这个帖子 - jQuery UI confirmation dialog - manipulating output - 似乎提供了一个更清晰的选项，它应该比查找更快地执行。

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

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

jQuery UI：对话框按钮样式

4 个答案: