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

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

    <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 回答