2

アクティブなボタンを切り替えるためにクラスをcontrolgroup動的に追加および削除しています。ui-btn-activeボタンは問題なく切り替わりますが、アクティブなボタンのテーマを変更する方法が見つからないようです。

非アクティブなボタンでdテーマを使用し、アクティブなボタンでテーマを使用する必要がありますa。

誰も私がこれを行う方法を知っていますか?

ここに画像の説明を入力

HTML:

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
    <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
</div>
4

2 に答える 2

2

OK、これが私がやったことです。

jQuery：

$('[data-role="page"]').live('pageshow', function () {
    $('#myApptBtn').addClass('ui-btn-active');

    $('#myApptBtn').click(function () {
        $('#allApptBtn').removeClass('ui-btn-active');
        $('#myApptBtn').addClass('ui-btn-active');
    });

    $('#allApptBtn').click(function () {
        $('#myApptBtn').removeClass('ui-btn-active');
        $('#allApptBtn').addClass('ui-btn-active');
    });
});

HTML：

<li data-theme="d" class="li-state-small" style="text-align: center;">
    <div data-role="controlgroup" data-type="horizontal" class="btnFontSize12">
        <a href="#" data-role="button" data-inline="true" data-mini="true" id="myApptBtn">My Appointments</a>
        <a href="#" data-role="button" data-inline="true" data-mini="true" id="allApptBtn">All Appointments</a>
    </div>
</li>



質問への回答：

したがって、結局のところ、マークアップを介してテーマをオーバーライドすることはできません。

グローバルな「アクティブ」状態

jQuery Mobileフレームワークは、「アクティブ」（デフォルトのテーマでは明るい青色）と呼ばれる見本を使用して、特定のウィジェットの個々の見本に関係なく、選択された状態を一貫して示します。現在選択されているものを示す必要がある場合は常に、ナビゲーションおよびフォームコントロールでこれを適用します。このテーマ見本は、明確で一貫性のあるユーザーフィードバックを目的として設計されているため、マークアップを介してオーバーライドすることはできません。テーマに一度設定され、選択された状態またはアクティブな状態が必要になるたびにフレームワークによって適用されます。この状態のスタイルは、ui-btn-activeスタイルルールのテーマスタイルシートにあります。

于 2012-08-29T19:34:11.547 に答える
0

jQuery の.addClassおよび関数を使用して、この操作を実行できます。.removeClassアクティブなクラスと非アクティブなクラスを設定し、jQuery を使用してオンクリックで変更するだけです。

これが例です。私はjQueryの専門家ではありませんが、これはうまく機能しています:例

于 2012-08-23T16:45:37.927 に答える