之前使用jquery的jquery-ui-1.7.2.tabs.js插件(http://docs.jquery.com/UI/Tabs),都是通过鼠标事件在页面点击来切换不同的tab,现在需要通过后台程序来控制,结果发现实现不了(很久了,懒得去看官网的说明),搞了几次都失败。无奈只好上官网看看,在此记录一下:
初始化tabs:
页面代码
通过程序控制激活的tab,想简单,
直接掉$("#tab2").show();死活不行,实现当前激活的仍然是默认的tab1(index为0),
或者$("#tabs").tabs({ selected: 1 });程序制定激活tab2、不行,
或者$("#tabs").tabs({ selected: 1 }); $("#tab2").show();程序制定激活tab2、还不行,
........
重复折腾了几次,失败告终,只好看官网,原来setter方法搞过了:
[img]http://dl.iteye.com/upload/attachment/0062/3071/e360354d-da44-335e-b0ad-bb6d62b69546.jpg[/img]
初始化tabs:
页面代码
<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>
$(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方法搞过了:
showStatusTab=function(vehicleID){
if($("#tabs").tabs('option', 'selected') != 1){
// 如果当前激活的不是第二个tab,则激活第二个tab
// 参数1:表示参数,参数2:要设置的属性,参数3:设置的值(index从0开始)
$("#tabs").tabs("option", "selected", 1);
}
}
[img]http://dl.iteye.com/upload/attachment/0062/3071/e360354d-da44-335e-b0ad-bb6d62b69546.jpg[/img]