jquery移动应用程序的页面组织
在我的 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），所以我一定错过了一些东西。
In my HTML5 / JQueryMobile app, I use several data-role="page" divs in the same index.html file:
<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>
This code does not work very nicely. The selected item of the navigation is not well highlighted after several clicks.
Is this page structure (several data-role="page" in the body) the correct way to do ?
UPDATE
Seems to be the way to do it (http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html), so I must miss something.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（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/
You're using Alpha version 1, they have improved much with Alpha version 4: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-pages.html
You might also have a look at the toolbar section as well:
http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/index.html
Demo: http://jsfiddle.net/jAwPR/3/