9

jQuery UI を使用して、個別にスタイルを設定したい承認/却下の 2 つのラジオ ボタンがあるので、「承認」を選択すると青色になり、「却下」を選択すると赤色になります。

何も選択されていません

選択を承認

選択を拒否

ひどい赤いボタンのモックアップで申し訳ありません :-) うまくいけば、これで私が何を求めているかがわかります。両方のボタン/ラベルのクラスを変更しようとしましたが、これは 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();
    }
});

どんな助けでも大歓迎です-ありがとう！

4

2 に答える 2

22

必要なことは、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 デモを見る

于 2012-05-10T15:49:21.287 に答える