`

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);
	}
}




  • 大小: 22.3 KB
分享到:
评论

相关推荐

    jquery ui tabs paging 扩展

    使用上也非常简单,在页面中载入 jquery.ui.tabs.paging.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。

    jquery.mobile.tabs 文件

    综上所述,`jQuery.mobile.tabs` 是一个强大且易于使用的标签页组件,通过结合 `jquery.mobile.tabs.css` 和 `jquery.mobile.tabs.js`,我们可以快速构建功能完备、视觉美观的移动应用界面。在实际开发过程中,结合 ...

    jquery tab 的几个插件

    本篇文章将详细探讨标题为“jquery tab 的几个插件”的主题,介绍其中包含的三个jQuery Tab插件,以及它们如何帮助开发者实现功能完善的Tab效果。 1. **jQuery UI Tabs** jQuery UI 是一个官方的jQuery扩展库,...

    idTabs v3.0 简单易用的jQuery的Tab插件

    idTabs是一款基于jQuery库的轻量级Tab切换插件,其设计目标是提供一个简单、易用且功能齐全的解决方案,用于在网页中创建Tab式布局。这个插件以其直观的API和良好的浏览器兼容性而受到开发者的青睐。在本文中,我们...

    jquery ui tabs paging 不换行

    jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...

    jquery tab插件

    **jQuery Tab 插件详解** ...通过自定义插件或利用现成的jQuery UI Tab,我们可以轻松实现Tab效果,包括左右切换这样的动态交互。理解这些基础知识,将有助于我们更高效地开发功能丰富的网页应用。

    jquery-ui-1.10.3.custom.rar

    《jQuery UI 1.10.3 自定义版本:深入解析与应用》 jQuery UI 是一个基于 jQuery 的开源库,提供了丰富的用户界面组件和交互功能,使得开发者能够更轻松地创建具有吸引力和交互性的Web应用。这个压缩包“jquery-ui-...

    jquery_ui_tabicons小图标

    jQuery UI中的Tab组件可以通过CSS样式来定制,包括使用这些小图标。开发者可以通过设置特定的CSS类或使用JavaScript API来改变Tab的图标。例如,可以使用以下CSS代码将某个Tab的图标设置为"tabicons.png"中的一个...

    jqueryui tabs

    `jQuery UI Tabs` 支持多种配置选项和方法,如设置默认激活的选项卡、添加动态内容、禁用选项卡等。通过查阅官方文档,你可以根据项目需求自定义选项卡的行为。 总的来说,`jQuery UI Tabs` 是一个强大而灵活的组件...

    jquery-ui-1.8.16.custom

    用户可以通过在线构建工具(如 http://jqueryui.com/download/)选择所需的组件、主题和语言,以减少最终文件的大小,提高页面加载速度。在压缩包中,"development-bundle" 文件夹内包含未压缩的源代码,便于开发者...

    jquery-ui-1.10.3.custom3

    通过这个实例,我们可以学习如何创建、布局、激活和禁用选项卡,以及如何与其他jQuery UI组件(如 accordion 或 slider)结合使用,为用户提供流畅的导航体验。 其次,"消息框"是另一个重要的特性。jQuery UI 提供...

    原生安卓和jquery.mobile组合做的tab选项卡

    而jQuery Mobile则是一个轻量级的前端框架,专注于简化移动Web应用程序的开发,通过HTML5、CSS3和JavaScript实现响应式布局和触控友好的用户界面。 在原生安卓中实现Tab选项卡通常会使用`TabHost`或`ViewPager`配合...

    jquery-ui-1.8.16.custom.zip

    《jQuery UI 1.8.16 自定义版本:打造高效Web交互体验》 jQuery UI是基于jQuery库的扩展框架,旨在提供丰富的用户界面组件,让网页开发更加便捷高效。在"jquery-ui-1.8.16.custom.zip"这个压缩包中,包含了构建高效...

    Android例子源码原生安卓和jquery.mobile组合做的tab选项卡.zip

    本示例源码“原生安卓和jquery.mobile组合做的tab选项卡.zip”展示了如何将Android原生开发与jQuery Mobile框架结合,实现一个功能丰富的Tab切换界面。jQuery Mobile是一款轻量级、触屏优化的JavaScript库,适用于...

    jQuery.Tools.min.js 下载

    jQuery Tools 是一套非常优秀的 Web UI 库,包括 Tab 容器,可折叠容器,工具提示,浮动层以及可滚动容器等等,可以为你的站点带来非同寻常的桌面般体验,这套工具的主要作用是显示内容,这是绝多多数站点最需要的...

    JQuery Tab选项卡且可关闭

    本项目涉及的主题是“jQuery Tab选项卡且可关闭”,这是一个常见的UI组件,用于组织和展示页面上的多部分内容。下面我们将深入探讨这个功能的实现、原理以及相关的jQuery和HTML/CSS知识。 首先,jQuery Tab选项卡的...

    jquery-ui.rar

    然后,通过调用特定的 jQuery 方法来初始化小部件或触发交互行为。 总的来说,jQuery UI 是一个强大且全面的前端开发工具,可以帮助开发者快速实现复杂而美观的用户界面。无论你是构建大型 Web 应用还是简单的功能...

    多年收集积累的JavaScript /jQuery插件/UI资料合集(90个).zip

    多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 15jQueryDemo.rar 3DGallery.zip bootstrap-3.3.2-dist.zip bootstrap-3.3.2.zip easyUI 1.4.4 Demo easyzoom....

    jquery金属质感上下折叠tab切换效果.zip

    金属质感通常通过特定的背景颜色、高光和阴影来模拟,使得UI元素看起来具有类似金属的光泽和质感。在网页上,这可能通过CSS3的渐变、阴影和边框属性来实现。 接下来,我们将深入探讨如何利用jQuery来创建这样的tab...

    JqueryTab选项卡

    在JavaScript部分,我们需要引入jQuery库和jQuery UI库,后者提供了Tab插件。通过简单的初始化代码,我们可以将HTML结构转换为交互式的选项卡: ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery....

Global site tag (gtag.js) - Google Analytics