3

我需要通过添加另一个 css 的类来更改 jquery ui 对话框按钮颜色的颜色。

  $('.ui-dialog-buttonpane').find('button').addClass('cancelButton');

上面的代码行已用于更改 css 类，但对更改颜色没有帮助。

示例代码已放置在以下小提琴中。

http://jsfiddle.net/DOMEl/PCkQD/5/

谁能帮我确定这里的问题是什么？

4

5 回答 5

6

您还可以在初始化按钮集合时设置按钮的类：

buttons: [ { text: 'Cancel', class : 'cancelButton' } ]
于 2013-09-29T15:15:12.620 回答
4

Gruff Bunny 是对的，但代码非常简单。更有用的代码如下所示：

$('#dialog').html("This is a confirmation dialog.");
$('#dialog').dialog({
            buttons : [
                {
                    text:'OK',
                    class:'green',
                    click: function() {
                        alert("OK");
                        $(this).dialog("close");                        
                    }                   
                },
                {
                    text:'CANCEL',
                    class:'red',
                    click: function() {
                        $(this).dialog("close");
                    }                   
                }
            ]
        });
于 2017-05-08T11:57:51.153 回答
3

尝试

$('#message1').find('.ui-button').addClass('cancelButton');

和

.ui-button.cancelButton {
    border: 1px solid #aaaaaa
    /*{borderColorContent}*/
    ;
    color: #FF0000
    /*{fcContent}*/
    ;
}

演示：小提琴

于 2013-09-29T14:16:27.263 回答
1

jquery-ui 按钮不是 html 按钮。它们是使用 div 和 span 构建的。因此，您需要通过其他方式找到它，例如 class 或 id：

$('#btnCancel').addClass('cancelButton');

查看更新的小提琴

编辑

如果您想更改多个按钮，请查找或添加公共类，就像在 ArunPJohny 的回答中一样。所有的 ui 按钮都已经有了ui-button类，这在某些情况下就足够了。

于 2013-09-29T14:19:25.600 回答
1 
$('#dialog').html("This is a confirmation dialog.");
$( "#dialog" ).dialog({
    buttons: [
        {
            text: "OK",
            open: function() {
                $(this).addClass('okClass');
            },
            click: function() {
                alert("OK");
                $( this ).dialog( "close" );
            }
        },
        {
            text: "CANCEL",
            open: function() {
                $(this).addClass('cancelClass');
            },
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
});
于 2018-12-12T06:13:54.350 回答