Pages organisation of jquery mobile app

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.

-------------Problems Reply------------

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/

Category:html5 Views:0 Time:2011-04-27

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.086 (s). 11 q(s)