Question

在我的HTML5 / JQueryMobile应用程序中，我在同一个index.html文件中使用了几个data-role =“page”div：

<body>
  <!-- Map page -->
  <div data-role="page" data-theme="b" id="map">
    <div data-role="header" data-theme="b">
        <h1>Map</h1>
    </div>
    <div data-role="content">
       <div id="map_canvas" style="width:320px; height:300px; float:left; border: 1px solid black;">
       </div>
    </div>
    <div data-role="footer" data-position="fixed">
       <div data-role="navbar">
          <ul>
             <li><a href="#map" class="ui-btn-active">Map</a></li>
             <li><a href="#list">List</a></li>
             <li><a href="#settings">Settings</a></li>
          </ul>
       </div>
    </div>
  </div>

  <!-- List page -->
  <div data-role="page" data-theme="b" id="list">
    <div data-role="header" data-theme="b">
        <h1>List</h1>
    </div>
    <div data-role="content">
        … 
    </div>
    <div data-role="footer" data-position="fixed">
       <div data-role="navbar">
          <ul>
             <li><a href="#map">Map</a></li>
             <li><a href="#list" class="ui-btn-active">List</a></li>
             <li><a href="#settings">Settings</a></li>
          </ul>
       </div>
  </div>

  <!-- Settings page -->
  <div data-role="page" data-theme="b id="settings">
    <div data-role="header" data-theme="b">
        <h1>Settings</h1>
    </div>
    <div data-role="content">
        ...
    </div>
    <div data-role="footer" data-position="fixed">
       <div data-role="navbar">
          <ul>
             <li><a href="#map">Map</a></li>
             <li><a href="#list">List</a></li>
             <li><a href="#settings" class="ui-btn-active">Settings</a></li>
          </ul>
       </div>
    </div>
  </div>
</body>

此代码不能很好地工作。几次点击后，导航的选定项目没有很好地突出显示这个页面结构（正文中有几个data-role =“page”）是正确的方法吗？

更新

似乎是这样做的方式（http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html），所以我必须错过一些东西。

Answer 1

您正在使用Alpha版本1，它们在Alpha版本4中得到了很大改进：http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html

您也可以查看工具栏部分： http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/index.html

演示：http://jsfiddle.net/jAwPR/3/

页面组织的jquery移动应用程序

1 个答案: