Navbar in jQuery Mobile
I've this navbar at the footer
<footer data-role="footer">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
<li><a href="b.html" data-icon="back">Recent</a></li>
<li><a href="a.html" data-icon="delete">Contacts</a></li>
<li><a href="b.html" data-i开发者_开发技巧con="grid">Keypad</a></li>
<li><a href="a.html" data-icon="delete">Voicemail</a></li>
</ul>
</div><!-- /navbar -->
</footer>
http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html says, the nav bar can take upto 5 items in one line but here, the nav items are assigned with 3 columns layout and the last 2 li items falls down in the second line.
Did I miss something??
Try the beat 4.1 instead of the bleeding edge changes.
Instead of using: http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html Try: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
Live demo using 4.1 beta. Your code works fine: http://jsfiddle.net/BCnBN/
Please try this..
<footer data-role="footer">
<div data-role="navbar" data-iconpos="top" data-grid="d">
<ul>
<li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
<li><a href="b.html" data-icon="back">Recent</a></li>
<li><a href="a.html" data-icon="delete">Contacts</a></li>
<li><a href="b.html" data-icon="grid">Keypad</a></li>
<li><a href="a.html" data-icon="delete">Voicemail</a></li>
</ul>
</div><!-- /navbar -->
</footer>
精彩评论