为 jquery 对话框按钮添加样式答案

【问题标题】：adding style to jquery dialog buttons为 jquery 对话框按钮添加样式
【发布时间】：2012-04-07 02:59:12
【问题描述】：

如何为对话框上的 jquery 按钮添加样式？我想给一些颜色上色，另一些颜色上色。

我试过使用这个类：但我似乎没有得到太多的效果。难道我做错了什么？我需要用别的东西吗？我需要在其他地方放置一些东西吗？

代码：

function DisplayCommonDialog(url, title, height, width) {
    HideDialogs();
    var dialogButtons = [{
        text: "Save",
        click: function () {
                    ...
                }
            }
        },
        width: '70px'
    }, {
        text: "Cancel",
        click: function () {
            $(this).dialog("close");
        }
    }];
    if (title.indexOf("Delete") >= 0) {
        dialogButtons = [{
            text: "OK",
            click: function () {
                ...
            },
            width: '70px'
        }, {
            text: "Cancel",
            click: function () {
                $(this).dialog("close");
            }
        }];
    }
if (popUpDialog != null) {
        $("#").dialog("option", {
            width: width,
            height: height,
            title: title,
            open: function () {
                ...
            },
            close: function () {
                ...
            },
            buttons: dialogButtons

        });
        ...
    }
    else {
        popUpDialog = $("#").dialog({
            width: width,
            height: height,
            autoResize: true,
            modal: true,
            title: title,
            open: function () {
                ...
            },
            close: function () { 
                ...
            },
            overlay:
            {
                opacity: 0.5,
                background: "black"
            },
            position: ['center', 'center'],
            buttons: dialogButtons
        });
    }
}

【问题讨论】：

how to change jquery dialog buttons 的可能重复项

标签： javascript jquery jquery-ui

【解决方案1】：

要在对话框按钮中添加css类，只需使用按钮按钮属性“class”：

$("#").dialog({
    buttons: [{
        "text":'your button name',
        "click": $.noop,
        "class": 'your-css-class1 your-css-class2'
    }]
})

每个声明按钮中的属性“类”将在创建对话框时插入。

希望对您有所帮助。

【讨论】：

确实如此。我承认这个解决方案对我来说就像一个副作用，因为它没有在文档中真正解释，只是在对话框小部件中创建按钮时，所有给定的属性将在调用 .button() 之前添加到按钮本身.但是代码也更容易阅读。

【解决方案2】：

http://jqueryui.com/themeroller/

或

How to style different hover colors for jquery dialog buttons

或how to change jquery dialog buttons

【讨论】：

【解决方案3】：

使用 firebug 找出应用于按钮的 CSS 类，然后在您的 css 中覆盖它

【讨论】：

不再，现在我们知道使用主题滚轮或在按钮对象中提供类。这样他们甚至可以更改类名，它仍然可以工作
@mplungjan ：如果您通过 javascript 执行此操作，则在使用默认 css 加载元素后重新应用一个类。我认为在我们的 css 中覆盖默认样式要容易得多。