В моем приложении HTML5/JQueryMobile я использую несколько элементов div data-role="page" в одном файле index.html:
<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), поэтому я должен что-то упустить.
