如何将css类赋予JQuery对话框的OK按钮？答案

【问题标题】：How to give css class to the OK button of dialog in JQuery?如何将css类赋予JQuery对话框的OK按钮？
【发布时间】：2011-07-24 07:38:13
【问题描述】：

我是 Jquery 的新手。我有一个对话框代码。

$(this.choosePadsContainer).dialog({ 
        title: 'Choose pad locations',
        autoOpen: false,
        modal: true,
        buttons: { "OK": function () {
            //Extract all checked pad locations.
            var checkedPads;
            checkedPads = new Array();
            $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
                checkedPads.push($(value).val());
            });
            //Set selected pad text.
            setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
            $(this).dialog("close");
        }
        }
    });

我想为确定按钮提供 css 类。怎么做？

【问题讨论】：

标签： jquery css

【解决方案1】：

对buttons 属性使用备用（数组）语法：

$(this.choosePadsContainer).dialog({ 
    title: 'Choose pad locations',
    autoOpen: false,
    modal: true,
    buttons: [
        {
            text: 'OK',
            className: 'myClass',
            click: function () {
                //Extract all checked pad locations.
                var checkedPads;
                checkedPads = new Array();
                $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
                    checkedPads.push($(value).val());
                });
                //Set selected pad text.
                setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
                $(this).dialog("close");
            }
        }
    ]
});

【讨论】：

+1，@Raphael，我不知道这是可能的。它也有效，所以谢谢。

【解决方案2】：

我认为你可以做这样的事情。

$(window).load(function() {
    $("span[class=ui-button-text]:contains('OK')").each(function() {
          $(this).addClass("myClass");
    });
});

【讨论】：

【解决方案3】：

根据tvanfosson的回答here，可以使用open handler：

open: function(event) {
    $('.ui-dialog-buttonpane').find('button:contains("OK")').addClass('okButton');
}

例如

$(this.choosePadsContainer).dialog({ 
    title: 'Choose pad locations',
    autoOpen: false,
    modal: true,
    open: function(event) {
        $('.ui-dialog-buttonpane').find('button:contains("OK")').addClass('okButton');
    },
    buttons: { "OK": function () {
        //Extract all checked pad locations.
        var checkedPads;
        checkedPads = new Array();
        $(self.padLocationsForActivity + " input:checked").each(function (index, value) {
            checkedPads.push($(value).val());
        });
        //Set selected pad text.
        setSelectedPadText(self.selectedPadsLblIdFormat, $(self.hiddenActivityAreaCode).val(), checkedPads);
        $(this).dialog("close");
    }
    }
});

【讨论】：

【解决方案4】：

AFAIK 不直接支持它，但它应该可以工作：

$(".ui-dialog-buttonset .ui-button", this.choosePadsContainer).addClass("foo");

【讨论】：