Jquery ui tabs控件的使用技巧

Jquery ui tabs控件是jquery组件提供的一个标签页的控件。下面介绍一下。

注意事项

1. 注意不同版本调用api可能不同，如：1.9以上是active, 1.8是select，1.9以上使用这个方法$('#tabs').tabs('option', 'active',2);

2. Tab页每个抬头li的索引顺序最好不变，如果有些抬头因业务逻辑不需要显示，最好不要用jsp脚本加载页面来初始化抬头，这样有些抬头未加载，抬头索引顺序可能会改变，这样用js脚本再去定位相应抬头，就不能根据索引号了，最好办法是加载时用js脚本判断隐藏抬头，这样抬头的顺序始终不变，用索引号定位抬头就很方便了，如下代码：

Js脚本：

//初始化导航标签 function initTasbs(){ $( "#tabs_orderview" ).tabs(); var ordersource ="<s:property value='order.ordersource'/>"; //alert(ordersource) var orderstate ="<s:property value='order.orderstate'/>"; //alert(orderstate) if(ordersource=="sp"){ $("#fragment-li2").addClass("ui-tabs-hide"); $("#fragment-li4").addClass("ui-tabs-hide"); } }

Tab页面脚本：

<div id="tabs_orderview" style="width: 88%;margin: 8px auto;"> <ul> <li><a href="#fragment-1"><span>基本信息</span></a></li><!-- fragment-1 --> <li id="fragment-li2"><a href="<%=path%>/order/viewRequire.action?orderId=<s:property value='order.id'/>"><span>需求信息</span></a></li><!-- fragment-2 --> <li><a href="<%=path%>/order/viewDataInfo.action?orderId=<s:property value='order.id'/>"><span></span>数据列表</a></li><!-- 订购信息 fragment-3 --> <li id="fragment-li4"><a href="<%=path%>/order/listTask.action?orderId=<s:property value='order.id'/>"><span>任务信息</span></a></li><!-- fragment-4 --> </ul> <div id="fragment-1"><div> <div id="fragment-2"><div>…

常见问题

1. 调用api方法时报错“no suchmethod 'active' for tabs widget instance”

调用代码如下：

var $tabs_orderview = $( "#tabs_orderview" ).tabs();// $tabs_orderview.tabs('active',"#fragment-5");

js报错为“no such method 'active' for tabs widget instance”