Jquery mobile tab功能的实现 详细

下面是别人的经验

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

一，jquery mobile 的实现

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

实现代码如下：

 

[html]  view plain copy

1. <div data-role="footer" data-id="foo1" data-position="fixed">  
2. <div data-role="navbar">  
3. <ul>  
4. <li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>  
5. <li><a href="footer-persist-b.html">Albums</a></li>  
6. <li><a href="footer-persist-c.html">Emails</a></li>  
7. </ul>  
8. </div><!-- /navbar -->  
9. </div>  

二，还有一个开源js：

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

有例子，说的也很明白：

[html]  view plain copy

1. <div data-role="page" id="page-title">  
2.     <div data-role="header">  
3.         <h1><%= @page_title %></h1>  
4.         <div data-role="tabs">  
5.             <ul>  
6.                 <li><a href="#tab-1" class="">Tab 1</a></li>  
7.                 <li><a href="#tab-2" class="">Tab 2</a></li>  
8.             </ul>  
9.         </div>  
10.     </div>  
11.   
12.     <div data-role="content">  
13.         <ul id="tab-1">  
14.             <li>First thing</li>  
15.             <li>Second Thing</li>  
16.         </ul>  
17.   
18.         <div id="tab-2">  
19.             <h2>Here is the second tab</h2>  
20.         </div>  
21.     </div>  
22. </div>  

 

 

原文 http://blog.csdn.net/actual_/article/details/7029593

附加上相关资料

jQuery Mobile 包含了允许您选择页面打开方式的 CSS 效果。

jQuery Mobile 过渡效果

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：

浏览器支持

• Internet Explorer 10 支持 3D 转换（更早的版本不支持）
• Opera 仍然不支持 3D 转换

过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：

<a href="#anylink" data-transition="slide">滑动到页面二</a>

下面的表格展示了可与 data-transition 属性一同使用的可用过渡：

过渡	描述	测试
fade	默认。淡入淡出到下一页。	测试
flip	从后向前翻动到下一页。	测试
flow	抛出当前页面，引入下一页。	测试
pop	像弹出窗口那样转到下一页。	测试
slide	从右向左滑动到下一页。	测试
slidefade	从右向左滑动并淡入到下一页。	测试
slideup	从下到上滑动到下一页。	测试
slidedown	从上到下滑动到下一页。	测试
turn	转向下一页。	测试
none	无过渡效果。	测试

提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。

实例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

点击链接加入QQ群【PHP web APP android交流】：http://jq.qq.com/?_wv=1027&k=X9kjbo