【Jquery mobile】tab功能的实现

目前有两种简单的实现方式：

一，jquery mobile 的实现

jquery的tab的实现是通过在各自页面的footer添加tab项实现的，如下：

实现代码如下：

 

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
<li><a href="footer-persist-b.html">Albums</a></li>
<li><a href="footer-persist-c.html">Emails</a></li>
</ul>
</div><!-- /navbar -->
</div>

二，还有一个开源js：

https://github.com/groovetrain/jQuery.mobile-Tabs

有例子，说的也很明白：

<div data-role="page" id="page-title">
    <div data-role="header">
        <h1><%= @page_title %></h1>
        <div data-role="tabs">
            <ul>
                <li><a href="#tab-1" class="">Tab 1</a></li>
                <li><a href="#tab-2" class="">Tab 2</a></li>
            </ul>
        </div>
    </div>

    <div data-role="content">
        <ul id="tab-1">
            <li>First thing</li>
            <li>Second Thing</li>
        </ul>

        <div id="tab-2">
            <h2>Here is the second tab</h2>
        </div>
    </div>
</div>