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”