0

jquerymobile テーマを使用して、ヘッダーのナビゲーション バーでヘッダーとは異なるスウォッチを使用するようにします。http://jquerymobile.com/demos/1.1.1/docs/toolbars/docs-navbar.htmlの下部にある例によると、提供する個々のリンクにテーマを適用するだけでよいようですナビゲーションバーのアイテムとして。例のソースを表示すると、私のコードにあるものと似ています。

現在、見本 A はヘッダー (ロゴ画像がある場所) に適用されていますが、ナビゲーション バーは標準のグレーです。

  <section data-role="page" data-theme="a">
      <header data-role="header">
        <img src="images/mcn-logo-rev.png" id="logo" />
        <img src="images/question-mark-in-circle.png" id="help" class="ui-btn-right" />

        <div data-role="navbar">
          <ul>
            <li><a href="#" data-icon="mcn-messages" data-theme="b">Messages</a></li>
            <li><a href="#" data-icon="mcn-groups" data-theme="b">Groups</a></li>
            <li><a href="#" data-icon="mcn-settings" data-theme="b">Settings</a></li>
          </ul>
        </div>

        <div data-role="navbar">
          <ul>
            <li><a href="#" data-theme="b">All</a></li>
            <li><a href="#" data-theme="b">Unread</a></li>
            <li><a href="#" data-theme="b">Search</a></li>
          </ul>
        </div>
...
4

2 に答える 2

1

theme 属性は、リスト アイテム内のリンクではなく、リスト アイテムに適用する必要があります。このコードを変更します。

    <div data-role="navbar">
              <ul>
                <li><a href="#" data-icon="mcn-messages" data-theme="b">Messages</a></li>
                <li><a href="#" data-icon="mcn-groups" data-theme="b">Groups</a></li>
                <li><a href="#" data-icon="mcn-settings" data-theme="b">Settings</a></li>
              </ul>
            </div>

<div data-role="navbar">
          <ul>
            <li><a href="#" data-theme="b">All</a></li>
            <li><a href="#" data-theme="b">Unread</a></li>
            <li><a href="#" data-theme="b">Search</a></li>
          </ul>
        </div>

これに：

    <div data-role="navbar">
              <ul>
                <li data-icon="mcn-messages" data-theme="b"><a href="#">Messages</a></li>
                <li data-icon="mcn-groups" data-theme="b"><a href="#">Groups</a></li>
                <li data-icon="mcn-settings" data-theme="b"><a href="#">Settings</a></li>
              </ul>
            </div>

<div data-role="navbar">
          <ul>
            <li data-theme="b"><a href="#">All</a></li>
            <li data-theme="b"><a href="#">Unread</a></li>
            <li data-theme="b"><a href="#">Search</a></li>
          </ul>
        </div>

リスト アイテムではなくリンクのテーマをマークアップすることはお勧めできません。また、将来のリリースでは動作しなくなる可能性があります。ソースは次のとおりです。http://jquerymobile.com/demos/1.1.1/docs/lists/lists-themes.html

于 2012-08-31T13:27:28.163 に答える
0

実際、元のマークアップは問題ありませんでした。jQueryMobile を誤解していました。ナビゲーションバーはツールバーの色を拾うと思っていましたが、代わりに、適用したスウォッチのボタンの色を拾いました。テーマを修正すると、マークアップを変更せずに適切な色が適用されました。

于 2012-08-31T13:28:37.810 に答える