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”