jQuery UI – 更改按钮颜色

前端之家收集整理的这篇文章主要介绍了jQuery UI – 更改按钮颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用jQuery UI我有两个单选按钮,批准/拒绝,我想独立风格,所以当选择“批准”,它将是蓝色,当选择“拒绝”时,它将是红色的:

对我可怕的红色按钮模型抱歉:-)希望这将给你一个想法,我后来.我已经尝试改变了两个按钮/标签的类,但是这并不反映在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();​

输出

See the working jsFiddle demo

原文链接:https://www.f2er.com/jquery/175951.html

猜你在找的jQuery相关文章