本文主要是介绍jQueryUI1.10.0新版本学习（widget-Tabs），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
本来打算学习jQueryUI的，然后去买了一本书，《jQueryUI开发指南》。结果那天一跑例子，各种跑不通。后来一看官网，原来从jQueryUI从1.10.0开始对之前很多控件的方法都进行了一定程度的调整，删除了大量原1.9.2以下的方法。所以，没办法，本人这就直接从官网上去学习新的jQuery1.10.0吧。
widget-Tabs（选项卡）
本小节学习选项卡Tabs的各种使用方法：
先放出HTML，供参考。
<!DOCTYPE html><html lang="zh_CN"><head><meta charset="utf-8"><title>jQueryUI学习</title><script type="text/javascript" src="jQueryUI/js/jquery-1.9.0.js"></script><script type="text/javascript" src="jQueryUI/js/jquery-ui-1.10.0.custom.js"></script><link rel="stylesheet" href="jQueryUI/css/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" /><link rel="stylesheet" href="css/main.css" type="text/css"/><script src="js/main.js"></script></head><body><div id="tabs"><ul><li><a href="#tab1">标签一</a></li><li><a href="#tab2">标签二</a></li><li><a href="#tab3">标签三</a></li></ul><div id="tab1">标签1的内容</div><div id="tab2">标签2的内容</div><div id="tab3">标签3的内容</div></div></body>
</html>1.默认功能
$(document).ready(function(){$("#tabs").tabs();
});
2.可折叠内容框
双击标签名称部分，可以折叠标签内容。
$(document).ready(function(){$("#tabs").tabs({collapsible: true});
});
3.鼠标滑过打开标签
$(document).ready(function(){$("#tabs").tabs({event: "mouseover"});
});加入event。这样在鼠标滑过的时候，就可以触发打开标签了。
4.顺序可调节标签
使用sortable方法可以让选项卡的顺序通过鼠标拖动标签名调节。
$(document).ready(function(){var tabs = $("#tabs").tabs();tabs.find( ".ui-tabs-nav" ).sortable({axis: "x",stop: function() {tabs.tabs( "refresh" );}});
});
5.Ajax载入选项卡内容
选项卡的对应内容可以通过Ajax从服务器获取，当使用Ajax载入的时候，标签内容将为“Loading...”，当载入完毕以后，则会填充实际的内容。
注意，Ajax需要服务器支持。这里使用Tomcat7作为Ajax应用服务器。
$(document).ready(function(){$( "#tabs" ).tabs({beforeLoad: function( event, ui ) {ui.jqXHR.error(function() {ui.panel.html("内容无法载入……请稍后再试！");});}});
});
这里分别是2个HTML载入，和2个JSP动态生成载入。都差不多，需要注意的就是JSP一定要写上这
<%@ page contentType="text/html;charset=utf-8"%>这里修改了HTML文件为：
<div id='tabs'><ul><li><a href="#tab1">标签一</a></li><li><a href="ajax/content1.html">Ajax载入HTML文件1</a></li><li><a href="ajax/content2.html">Ajax载入HTML文件2</a></li><li><a href="ajax/shortContent.jsp">Ajax载入jsp短文件</a></li><li><a href="ajax/longContent.jsp">Ajax载入jsp长内容文件</a></li></ul><div id="tab1">Contents of first tab</div>
</div>6.选项卡的简单操作
这里的选项卡的简单操作是指选项卡的添加、删除操作。
先说添加，代码如下：
$(document).ready(function(){var tabs = $( "#tabs" ).tabs();addTab();//在已有的选项卡后添加新的选项卡function addTab() {var label = "新加的标签",id = "tab4",li = $('<li><a href="#tab4">'+label+'</a></li>'),tabContentHtml = "新内容";tabs.find( ".ui-tabs-nav" ).append( li );tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );tabs.tabs( "refresh" );}
});
这里成功调用这个addTab方法加入了新的选项卡。
移除选项卡如下：
//移除tab2
$("li[id='removeme']").remove();
$("#tabs2").remove();tabs.tabs( "refresh" );
如图，这里删除掉了Tab2标签。
HTML改为：
<li id='removeme'><a href="#tab2">Tab2</a></li>7.底部选项卡
通过一些CSS和JS的设定，可以使选项卡的标签出现在内容底部这种风格。
如图这种风格。要实现这种风格，首先要添加CSS的修正：
/* 固定高度，从而使标签栏不会随着内容高度的变化而跳动。 */
#tabs .tabs-spacer { float: left; height: 200px; }
.tabs-bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
.tabs-bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
.tabs-bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }<div id='tabs' class="tabs-bottom"><ul><li><a href="#tab1">Tab1</a></li><li><a href="#tab2">Tab2</a></li><li><a href="#tab3">Tab3</a></li></ul><div class="tabs-spacer"></div><div id="tab1">Contents of first tab</div><div id="tab2">Contents of the second tab</div><div id="tab3">Contents of the third tab</div>
</div>并且在ul标签下加入了一个空的div，使用tabs-spacer。
接下来就是js的编写：
$(document).ready(function(){var tabs = $( "#tabs" ).tabs();// 修改CSS$( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" ).removeClass( "ui-corner-all ui-corner-top" ).addClass( "ui-corner-bottom" );// 将导航标签移动到底部$( ".tabs-bottom .ui-tabs-nav" ).appendTo( ".tabs-bottom" );
});这里首先修改所应用的css，然后通过appendTo将导航标签移动到底部。
8.侧边选项卡
选项卡风格还可以选择侧边标签风格的。如图：
这个相对于底部选项卡要简单一些，只需要加入适当的css并且在js上替换即可，同时，也不用修改HTML
css：
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.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; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}$(document).ready(function(){$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
好了，以上基本就是jQueryUI对于选项卡tabs这个小组件的全部用法。更多的资料，大家可以参考jQueryUI官网，还有API。
这篇关于jQueryUI1.10.0新版本学习（widget-Tabs）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
