Jquery.ui.tab插件通过程序激活制定的tab方法
本帖最后由 feiyang10086 于 2012-01-19 16:59 编辑Jquery.ui.tab插件通过程序激活制定的tab方法
之前使用jquery的jquery-ui-1.7.2.tabs.js插件（http://docs.jquery.com/UI/Tabs），都是通过鼠标事件在页面点击来切换不同的tab，现在需要通过后台程序来控制，结果发现实现不了（很久了，懒得去看官网的说明），搞了几次都失败。无奈只好上官网看看，在此记录一下：
初始化tabs：
页面代码
Java代码1.<div id="tabs" style="margin: 0px;padding: 0px;">
2. <ul>
3. <li>
4. <a href="#tab1">×××× Location</a>
5. </li>
6. <li>
7. <a href="#tab2">×××× Status</a>
8. </li>
9. ........
10. </ul>
11. <div id="tab1" style="padding: 3px;">
12. <div id="map" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
13.
14. <div id="tab2" style="padding: 3px;">
15. <div id="status" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
16. ........
17. </div>
<div id="tabs" style="margin: 0px;padding: 0px;">
<ul>
<li>
<a href="#tab1">×××× Location</a>
</li>
<li>
<a href="#tab2">×××× Status</a>
</li>
........
</ul>
<div id="tab1" style="padding: 3px;">
<div id="map" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
<div id="tab2" style="padding: 3px;">
<div id="status" style="height: 375px; width:98%; border: 1px #A5B6C8 solid;" ></div>
........
</div>Java代码1.$(function() {
2.
3. // 初始化tabs的页面控件
4. $("#tabs").tabs( {
5.
6. // 自定义显示方法，通过事件控制
7. show : function(event, ui) {
8.
9. var activeTab = 0;
10.
11. if (activeTab != $("#tabs").tabs('option', 'selected')) {
12.
13. activeTab = $("#tabs").tabs('option', 'selected');
14. switch (activeTab ) {
15.
16. case 0:
17. break;
18. case 1:
19. $("#tab2").show();
20. break;
21. }
22. }
23.
24. return true;
25. }
26. });
27.});
$(function() {
// 初始化tabs的页面控件
$("#tabs").tabs( {
// 自定义显示方法，通过事件控制
show : function(event, ui) {
var activeTab = 0;
if (activeTab != $("#tabs").tabs('option', 'selected')) {
activeTab = $("#tabs").tabs('option', 'selected');
switch (activeTab ) {
case 0:
break;
case 1:
$("#tab2").show();
break;
}
}
return true;
}
});
});通过程序控制激活的tab，想简单，
直接掉$("#tab2").show();死活不行，实现当前激活的仍然是默认的tab1（index为0）,
或者$("#tabs").tabs({ selected: 1 });程序制定激活tab2、不行，
或者$("#tabs").tabs({ selected: 1 }); $("#tab2").show();程序制定激活tab2、还不行，
........
重复折腾了几次，失败告终，只好看官网,原来setter方法搞过了：
Java代码1.showStatusTab=function(vehicleID){
2.
3. if($("#tabs").tabs('option', 'selected') != 1){
4.
5. // 如果当前激活的不是第二个tab，则激活第二个tab
6. // 参数1：表示参数，参数2：要设置的属性，参数3：设置的值（index从0开始）
7. $("#tabs").tabs("option", "selected", 1);
8. }
9.} 谢谢分享
页:
[1]