1

こんにちは、私は現在 JQuery Mobile を使用して Web アプリを作成しています。現在、ページの上部にナビゲーション バーがあり、ナビゲーション バーの各ボタンの中央に一連の画像が配置されています。「data-theme=b」を設定しましたが、これでは必要な色が得られません。これを削除して、css を使用して背景色を設定しようとしましたが、うまくいきませんでした。

cssまたはjqueryだけを使用してナビゲーションバーの色を変更できるかどうか疑問に思っていました。

navbar の私のコードは次のとおりです。

<div data-role="navbar"><!-- navbar -->
  <ul>
    <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"></a></li>
    <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>
    <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"></a></li>
   </ul>
 </div><!-- /navbar -->
4

3 に答える 3

3

クラスui-bodyとui-body-b.

デモ

<div class="ui-body-b ui-body">
  <div data-role="navbar">
    <ul>
        <li><a href="#" data-icon="grid">A</a></li>
        <li><a href="#" data-icon="star">B</a></li>
        <li><a href="#" data-icon="gear">C</a></li>
        <li><a href="#" data-icon="arrow-l">D</a></li>
        <li><a href="#" data-icon="arrow-r">E</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /container -->
于 2013-06-20T09:56:12.133 に答える
3

コードに問題はありません。

Navbar色のテーマはデフォルトで青data-theme="b"で、その青の色です。a に変更して違いを確認します。

作業jsFiddle例: http://jsfiddle.net/Gajotres/vTBGa/

<div data-role="navbar"><!-- navbar -->
    <ul>
        <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="a"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"/></a></li>
    </ul>
</div><!-- /navbar -->

背景色を手動で変更する場合は、!importantオーバーライドを使用して行う必要があります。そうしないと、カスタムCSSが破棄されるためです。

#other-color {
    background: red !important;
}

jQuery Mobile がマークアップの拡張を処理する方法について詳しく知りたい場合は、このARTICLEをご覧ください。これは私の個人的なブログです。これよりもはるかに多くのバインドが可能です。また、このトピックについては次の章で説明します。

于 2013-06-20T09:56:57.217 に答える