使用 jQuery UI,我有两个单选按钮,批准/拒绝,我想独立设置样式,所以当选择“批准”时,它将是蓝色的,当选择“拒绝”时,它将是红色的:
对我糟糕的红色按钮模型表示歉意:-)希望这能让你了解我想要什么。我尝试更改两个按钮/标签的类,但这不会反射(reflect)到 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();
}
});
任何帮助将不胜感激 - 谢谢!
最佳答案
您需要做的是覆盖 jQuery UI 默认样式。
这就是documentation状态:
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below.
Sample markup with jQuery UI CSS Framework classes
<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();
输出:
关于jQuery UI - 更改按钮颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10536541/