当前位置: 代码迷 >> Web前端 >> Jquery.ui.tab插件透过程序激活制定的tab方法
  详细解决方案

Jquery.ui.tab插件透过程序激活制定的tab方法

热度:102   发布时间:2012-08-26 16:48:06.0
Jquery.ui.tab插件通过程序激活制定的tab方法
之前使用jquery的jquery-ui-1.7.2.tabs.js插件(http://docs.jquery.com/UI/Tabs),都是通过鼠标事件在页面点击来切换不同的tab,现在需要通过后台程序来控制,结果发现实现不了(很久了,懒得去看官网的说明),搞了几次都失败。无奈只好上官网看看,在此记录一下:

初始化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);
	}
}




  相关解决方案