JqueryUI-Tabs(选项卡)

本来打算学习jQueryUI的，然后去买了一本书，《jQueryUI开发指南》。结果那天一跑例子，各种跑不通。后来一看官网，原来从jQueryUI从1.10.0开始对之前很多控件的方法都进行了一定程度的调整，删除了大量原1.9.2以下的方法。所以，没办法，本人这就直接从官网上去学习新的jQuery1.10.0吧。

widget-Tabs（选项卡）

本小节学习选项卡Tabs的各种使用方法：

先放出HTML，供参考。

 

[html] view plaincopy
 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="zh_CN">  
  4.     <head>  
  5.         <meta charset="utf-8">  
  6.         <title>jQueryUI学习</title>  
  7.         <script type="text/javascript" src="jQueryUI/js/jquery-1.9.0.js"></script>  
  8.         <script type="text/javascript" src="jQueryUI/js/jquery-ui-1.10.0.custom.js"></script>  
  9.         <link rel="stylesheet" href="jQueryUI/css/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />  
  10.         <link rel="stylesheet" href="css/main.css" type="text/css"/>  
  11.         <script src="js/main.js"></script>  
  12.     </head>  
  13.     <body>  
  14.         <div id="tabs">  
  15.             <ul>  
  16.                 <li><a href="#tab1">标签一</a></li>  
  17.                 <li><a href="#tab2">标签二</a></li>  
  18.                 <li><a href="#tab3">标签三</a></li>  
  19.             </ul>  
  20.             <div id="tab1">标签1的内容</div>  
  21.             <div id="tab2">标签2的内容</div>  
  22.             <div id="tab3">标签3的内容</div>  
  23.         </div>  
  24.     </body>  
  25. </html>  



 

1.默认功能

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     $("#tabs").tabs();   
  3. });  

 

2.可折叠内容框

双击标签名称部分，可以折叠标签内容。

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     $("#tabs").tabs({  
  3.       collapsible: true  
  4.     });   
  5. });  

 

3.鼠标滑过打开标签

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     $("#tabs").tabs({  
  3.       event: "mouseover"  
  4.     });   
  5. });  


加入event。这样在鼠标滑过的时候，就可以触发打开标签了。

 

4.顺序可调节标签

使用sortable方法可以让选项卡的顺序通过鼠标拖动标签名调节。

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     var tabs = $("#tabs").tabs();  
  3.     tabs.find( ".ui-tabs-nav" ).sortable({  
  4.       axis: "x",  
  5.       stop: function() {  
  6.         tabs.tabs( "refresh" );  
  7.       }  
  8.     });  
  9. });  

 

5.Ajax载入选项卡内容

选项卡的对应内容可以通过Ajax从服务器获取，当使用Ajax载入的时候，标签内容将为“Loading...”，当载入完毕以后，则会填充实际的内容。

注意，Ajax需要服务器支持。这里使用Tomcat7作为Ajax应用服务器。

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     $( "#tabs" ).tabs({  
  3.       beforeLoad: function( event, ui ) {  
  4.         ui.jqXHR.error(function() {  
  5.           ui.panel.html("内容无法载入……请稍后再试！");  
  6.         });  
  7.       }  
  8.     });  
  9. });  

这里，新版本的jQuery使用了beforeLoad这个回调函数，而不是之前的那个什么AjaxObject，嗯。不过使用更加方便了。这里的ui直接封装了jqXHR对象，所以更加好处理了。

 

这里分别是2个HTML载入，和2个JSP动态生成载入。都差不多，需要注意的就是JSP一定要写上这

 

[html] view plaincopy
 
  1. <%@ page contentType="text/html;charset=utf-8"%>  

要不然会乱码。

 

这里修改了HTML文件为：

 

[html] view plaincopy
 
  1. <div id='tabs'>  
  2.         <ul>  
  3.             <li><a href="#tab1">标签一</a></li>  
  4.             <li><a href="ajax/content1.html">Ajax载入HTML文件1</a></li>  
  5.             <li><a href="ajax/content2.html">Ajax载入HTML文件2</a></li>  
  6.             <li><a href="ajax/shortContent.jsp">Ajax载入jsp短文件</a></li>  
  7.             <li><a href="ajax/longContent.jsp">Ajax载入jsp长内容文件</a></li>  
  8.         </ul>  
  9.         <div id="tab1">Contents of first tab</div>  
  10. </div>  

6.选项卡的简单操作

这里的选项卡的简单操作是指选项卡的添加、删除操作。

先说添加，代码如下：

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     var tabs = $( "#tabs" ).tabs();  
  3.     addTab();  
  4.       
  5.       
  6. //在已有的选项卡后添加新的选项卡  
  7.     function addTab() {  
  8.       var label = "新加的标签",  
  9.         id = "tab4",  
  10.         li = $('<li><a href="#tab4">'+label+'</a></li>'),  
  11.         tabContentHtml = "新内容";  
  12.    
  13.       tabs.find( ".ui-tabs-nav" ).append( li );  
  14.       tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );  
  15.       tabs.tabs( "refresh" );  
  16.     }  
  17. });  

从jQuery1.10开始，原来的那个add方法被官方干掉了。取而代之的是这refresh。这东西用起来略微坑爹，需要自己构建dom，不过还好jQuery操作dom不困难。如下图：

 

这里成功调用这个addTab方法加入了新的选项卡。

移除选项卡如下：

 

[javascript] view plaincopy
 
  1. //移除tab2  
  2. $("li[id='removeme']").remove();  
  3. $("#tabs2").remove();  
  4.  tabs.tabs( "refresh" );  

 

 

选项卡的添加删除方法在官网上还有更加复杂同时也更加好用的示例代码，那里用到了delegate给li后面的小x绑定点击事件，当触发事件的时候删除这个li和所对应的div。其实原理是一样的。

如图，这里删除掉了Tab2标签。

HTML改为：

 

[html] view plaincopy
 
  1. <li id='removeme'><a href="#tab2">Tab2</a></li>  

7.底部选项卡

通过一些CSS和JS的设定，可以使选项卡的标签出现在内容底部这种风格。

如图这种风格。要实现这种风格，首先要添加CSS的修正：

 

[css] view plaincopy
 
  1. /* 固定高度，从而使标签栏不会随着内容高度的变化而跳动。 */  
  2. #tabs .tabs-spacer { float: left; height: 200px; }  
  3. .tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }  
  4. .tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }  
  5. .tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }  

然后将整个div部分的HTML改为

 

 

[html] view plaincopy
 
  1. <div id='tabs' class="tabs-bottom">  
  2.         <ul>  
  3.             <li><a href="#tab1">Tab1</a></li>  
  4.             <li><a href="#tab2">Tab2</a></li>  
  5.             <li><a href="#tab3">Tab3</a></li>  
  6.         </ul>  
  7.         <div class="tabs-spacer"></div>  
  8.         <div id="tab1">Contents of first tab</div>  
  9.         <div id="tab2">Contents of the second tab</div>  
  10.         <div id="tab3">Contents of the third tab</div>  
  11. </div>  

这里在整个div加入了class为tabs-bottom的风格

 

并且在ul标签下加入了一个空的div，使用tabs-spacer。

接下来就是js的编写：

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     var tabs = $( "#tabs" ).tabs();  
  3.       
  4.     // 修改CSS  
  5.     $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )  
  6.       .removeClass( "ui-corner-all ui-corner-top" )  
  7.       .addClass( "ui-corner-bottom" );  
  8.    
  9.     // 将导航标签移动到底部  
  10.     $( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );  
  11. });  


这里首先修改所应用的css，然后通过appendTo将导航标签移动到底部。
8.侧边选项卡

 

选项卡风格还可以选择侧边标签风格的。如图：

这个相对于底部选项卡要简单一些，只需要加入适当的css并且在js上替换即可，同时，也不用修改HTML

css：

 

[css] view plaincopy
 
  1. .ui-tabs-vertical { width: 55em; }  
  2. .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }  
  3. .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }  
  4. .ui-tabs-vertical .ui-tabs-nav li a { display:block; }  
  5. .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }  
  6. .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}  

js：

 

 

[javascript] view plaincopy
 
  1. $(document).ready(function(){  
  2.     $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );  
  3.     $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );  
  4. });  

HTML是最初始的那个，这里就不列出来了。

 

 

好了，以上基本就是jQueryUI对于选项卡tabs这个小组件的全部用法。更多的资料，大家可以参考jQueryUI官网，还有API。

posted @ 2015-12-13 20:14  奋斗的大鹏  阅读(1664)  评论(0)    收藏  举报