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