开发者

Navbar in jQuery Mobile

开发者 https://www.devze.com 2023-03-13 01:12 出处:网络
I\'ve this navbar at the footer <footer data-role=\"footer\"> <div data-role=\"navbar\" data-iconpos=\"top\">

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??

Navbar in jQuery Mobile


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>
0

精彩评论

暂无评论...
验证码 换一张
取 消