jQuery UI:对话框按钮样式

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(index).

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