jQuery UI - 更改按钮颜色

Question

使用jQuery UI我有两个单选按钮,Approve/Reject,我想独立地设置样式,所以当选择'Approve'时,它将是蓝色,当选择'Reject'时,它将是红色:

为我可怕的红色按钮样机道歉:-)希望这会让你知道我在追求什么.我已经尝试更改两个按钮/标签的类,但这不会反映到jQuery-UI叠加层上.

这是我当前的代码,它生成按钮,并根据选择显示刻度线或十字形:

$('.approvedToggle').buttonset();

$('input:radio').click(function() {
    if($(this).val() === 'approve') {
        $(this).parent('div').children(".tick").show();
        $(this).parent('div').children(".cross").hide();
    } else {
        $(this).parent('div').children(".tick").hide();
        $(this).parent('div').children(".cross").show();
    }
});

任何帮助将不胜感激 - 谢谢!

Answer 1

您需要做的是覆盖 jQuery UI默认样式.

以下是文档说明的内容:

如果需要更深层次的自定义,则可以修改jquery.ui.button.css样式表中引用的特定于窗口小部件的类.这些类在下面以粗体显示.

使用jQuery UI CSS Framework类进行示例标记

<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button>

所以基本上,你能做什么,是这样的:

HTML:

<div id="approvedToggle">
    <input type="radio" id="ApproveButton" name="radio" />
    <label id="ApproveButtonLabel" for="ApproveButton">Approve</label>

    <input type="radio" id="RejectButton" name="radio" />
    <label id="RejectButtonLabel" for="RejectButton">Reject</label>
</div>?

CSS (重要!这个样式必须在jQuery UI CSS文件之后声明):

#ApproveButtonLabel.ui-state-active { background: blue; }
#ApproveButtonLabel.ui-state-active span.ui-button-text { color: red; }

#RejectButtonLabel.ui-state-active { background: red; }
#RejectButtonLabel.ui-state-active span.ui-button-text { color: blue; }

jQuery:

$('#approvedToggle').buttonset();?

输出:

查看有效的jsFiddle演示