Question

使用jquerymobile主题，我希望标题中的导航栏使用与标题不同的样本。根据{{3}}底部的示例，似乎我需要做的就是将主题应用于充当导航栏项的各个链接。如果您查看示例中的源代码，它们看起来与我在代码中的内容类似。

目前，样本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>
...

Answer 1

主题属性应该应用于列表项，而不是其中的链接。更改此代码：

    <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

Answer 2

实际上原始标记还可以。我误解了jQueryMobile。我认为导航栏会拾取工具栏颜色，而是选择您应用的样本的按钮颜色。修复主题应用了正确的颜色而不更改标记。

jQueryMobile使用不同的样本在标题中添加导航栏

2 个答案: