JQM控件之Navbar和Tabs

在JQM中使用导航栏Navbar是简单的。

只需要将data-role="navbar"赋给div即可：

<div data-role="navbar">    <ul>        <li><a href="#" class="ui-btn-active">One</a></li>        <li><a href="#">Two</a></li>    </ul></div><!-- /navbar -->

class="ui-btn-active"用于表示该nav呈选中状态，还可以使用ui-state-persist保持这种选中状态，以免每次进入该page选中状态复位的问题。
navbar一行上最多显示5个，多余5个的话会换行显示。
navbar可以放在header，footer，content中。

你可以让每个nav都有一个icon，并且可以指定icon的位置

<div data-role="footer">        <div data-role="navbar" data-iconpos="bottom">            <ul>                <li><a href="#" data-icon="grid">Summary</a></li>                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>                <li><a href="#" data-icon="gear">Setup</a></li>            </ul>        </div><!-- /navbar --></div><!-- /footer -->

还可以自定义icon,设置data-icon="custom"，然后为每个a设置background即可：

<div data-role="footer" class="nav-glyphish-example" data-theme="b">    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">    <ul>        <li><a href="#" id="chat" data-icon="custom">Chat</a></li>        <li><a href="#" id="email" data-icon="custom">Email</a></li>        <li><a href="#" id="skull" data-icon="custom">Danger</a></li>        <li><a href="#" id="beer" data-icon="custom">Beer</a></li>        <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>    </ul>    </div></div>

.nav-glyphish-example .ui-btn { padding-top: 40px !important; }.nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }#chat:after { background:  url("../_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat; background-size: 24px 22px; }#email:after { background:  url("../_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat; background-size: 24px 16px;  }#login:after { background:  url("../_assets/img/glyphish-icons/30-key.png") 50% 50% no-repeat;  background-size: 12px 26px; }#beer:after { background:  url("../_assets/img/glyphish-icons/88-beermug.png") 50% 50% no-repeat;  background-size: 22px 27px; }#coffee:after { background:  url("../_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat;  background-size: 20px 24px; }#skull:after { background:  url("../_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat;  background-size: 22px 24px; }

当然如果想换皮肤的话也很简单，需要设置class="ui-body-a ui-body"，把其中的a改成b,c,c,e....：

<div class="ui-body-a ui-body">    <h3>Swatch "a"</h3>    <div data-role="navbar">        <ul>            <li><a href="#" data-icon="grid">A</a></li>            <li><a href="#" data-icon="star">B</a></li>            <li><a href="#" data-icon="gear">C</a></li>            <li><a href="#" data-icon="arrow-l">D</a></li>            <li><a href="#" data-icon="arrow-r">E</a></li>        </ul>    </div><!-- /navbar --></div><!-- /container -->

如果想设置单个navbar的话，需要使用data-theme属性：

<div data-role="footer">    <div data-role="navbar">        <ul>            <li><a href="#" data-icon="grid" data-theme="a">A</a></li>            <li><a href="#" data-icon="star" data-theme="b">B</a></li>        </ul>    </div><!-- /navbar --></div><!-- /footer -->

==============================================================================
后面更精彩
==============================================================================

上面谈到的Navbar无非就是换不同的内容的，注意：不是换page！！！如果换page的话只需要用button就可以了。Navbar一般用于在同一界面显示不同的内容的！
既然是同一界面显示不同的内容，那么像下面的代码如何实现呢？

<div data-role="footer">        <div data-role="navbar" data-iconpos="bottom">            <ul>                <li><a href="#page0" data-icon="grid">Summary</a></li>                <li><a href="#page1" data-icon="star" class="ui-btn-active">Favs</a></li>                <li><a href="#page2" data-icon="gear">Setup</a></li>            </ul>        </div><!-- /navbar --></div><!-- /footer -->

上面的代码的问题：将连接指向了新的page，既然是新的page，就不会有navbar，难道再新page中重复写一个一模一样的？Bad idea!

为了解决这个问题，需要引入Tabs
在tabs中使用navbar：

<div data-role="tabs" id="tabs">  <div data-role="navbar">    <ul>      <li><a href="#one" data-ajax="false">one</a></li>      <li><a href="#two" data-ajax="false">two</a></li>      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>    </ul>  </div>  <div id="one" class="ui-body-d ui-content">    <h1>First tab contents</h1>  </div>  <div id="two">    <ul data-role="listview" data-inset="true">        <li><a href="#">Acura</a></li>        <li><a href="#">Audi</a></li>        <li><a href="#">BMW</a></li>        <li><a href="#">Cadillac</a></li>        <li><a href="#">Ferrari</a></li>    </ul>  </div></div>

上面这种是最普通的写法。呈现的是上下结构的Tabs。
如果是左右结构需要在listview中添加data-inset="true"和class="tablist-left"
完整的代码如下：

<h2>Use inset listview for tabs</h2><div data-role="tabs">    <ul data-role="listview" data-inset="true" class="tablist-left">      <li><a href="#one" data-ajax="false">one</a></li>      <li><a href="#two" data-ajax="false">two</a></li>      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>    </ul>    <div id="one" class="ui-body-d tablist-content">    <h1>First tab contents</h1>  </div>    <ul id="two" class="tablist-content" data-role="listview" data-inset="true">        <li><a href="#">Acura</a></li>        <li><a href="#">Audi</a></li>        <li><a href="#">BMW</a></li>        <li><a href="#">Cadillac</a></li>        <li><a href="#">Ferrari</a></li>    </ul></div>

用到的CSS：

.tablist-left {    width: 25%;    display: inline-block;}.tablist-content {    width: 60%;    display: inline-block;    vertical-align: top;    margin-left: 5%;}

over！

navbar动态生成不刷新？
http://blog.csdn.net/danielinbiti/article/details/27333311