Jquery ui tabs控件的使用技巧

雨点打透心脏的1/2处 2022-09-19 13:28 176阅读 0赞

### 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脚本**：

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

**Tab页面脚本**：

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

## 常见问题 ##

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

调用代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> var $tabs_orderview = $( "#tabs_orderview" ).tabs();// $tabs_orderview.tabs('active',"#fragment-5"); </td> 
 </tr> 
 </tbody> 
</table>

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