之前使用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.css 和 jquery.ui.tabs.paging.js 文件,在创建 tabs 对象后再执行代码激活一下插件 $tabs.tabs('paging'); 就可以了。 压缩包内带有 demo 。
综上所述,`jQuery.mobile.tabs` 是一个强大且易于使用的标签页组件,通过结合 `jquery.mobile.tabs.css` 和 `jquery.mobile.tabs.js`,我们可以快速构建功能完备、视觉美观的移动应用界面。在实际开发过程中,结合 ...
本篇文章将详细探讨标题为“jquery tab 的几个插件”的主题,介绍其中包含的三个jQuery Tab插件,以及它们如何帮助开发者实现功能完善的Tab效果。 1. **jQuery UI Tabs** jQuery UI 是一个官方的jQuery扩展库,...
idTabs是一款基于jQuery库的轻量级Tab切换插件,其设计目标是提供一个简单、易用且功能齐全的解决方案,用于在网页中创建Tab式布局。这个插件以其直观的API和良好的浏览器兼容性而受到开发者的青睐。在本文中,我们...
jQuery UI Tabs Paging 是一个用来对太多的 Tab 进行分页显示的 jQuery 插件。 默认的 tabs 插件一旦 tab 过多就会换行,影响页面布局。jquery.ui.tabs.paging 的作用就在于不让其换行,在两头增加左右滑动的图片...
**jQuery Tab 插件详解** ...通过自定义插件或利用现成的jQuery UI Tab,我们可以轻松实现Tab效果,包括左右切换这样的动态交互。理解这些基础知识,将有助于我们更高效地开发功能丰富的网页应用。
《jQuery UI 1.10.3 自定义版本:深入解析与应用》 jQuery UI 是一个基于 jQuery 的开源库,提供了丰富的用户界面组件和交互功能,使得开发者能够更轻松地创建具有吸引力和交互性的Web应用。这个压缩包“jquery-ui-...
jQuery UI中的Tab组件可以通过CSS样式来定制,包括使用这些小图标。开发者可以通过设置特定的CSS类或使用JavaScript API来改变Tab的图标。例如,可以使用以下CSS代码将某个Tab的图标设置为"tabicons.png"中的一个...
`jQuery UI Tabs` 支持多种配置选项和方法,如设置默认激活的选项卡、添加动态内容、禁用选项卡等。通过查阅官方文档,你可以根据项目需求自定义选项卡的行为。 总的来说,`jQuery UI Tabs` 是一个强大而灵活的组件...
用户可以通过在线构建工具(如 http://jqueryui.com/download/)选择所需的组件、主题和语言,以减少最终文件的大小,提高页面加载速度。在压缩包中,"development-bundle" 文件夹内包含未压缩的源代码,便于开发者...
通过这个实例,我们可以学习如何创建、布局、激活和禁用选项卡,以及如何与其他jQuery UI组件(如 accordion 或 slider)结合使用,为用户提供流畅的导航体验。 其次,"消息框"是另一个重要的特性。jQuery UI 提供...
而jQuery Mobile则是一个轻量级的前端框架,专注于简化移动Web应用程序的开发,通过HTML5、CSS3和JavaScript实现响应式布局和触控友好的用户界面。 在原生安卓中实现Tab选项卡通常会使用`TabHost`或`ViewPager`配合...
《jQuery UI 1.8.16 自定义版本:打造高效Web交互体验》 jQuery UI是基于jQuery库的扩展框架,旨在提供丰富的用户界面组件,让网页开发更加便捷高效。在"jquery-ui-1.8.16.custom.zip"这个压缩包中,包含了构建高效...
本示例源码“原生安卓和jquery.mobile组合做的tab选项卡.zip”展示了如何将Android原生开发与jQuery Mobile框架结合,实现一个功能丰富的Tab切换界面。jQuery Mobile是一款轻量级、触屏优化的JavaScript库,适用于...
jQuery Tools 是一套非常优秀的 Web UI 库,包括 Tab 容器,可折叠容器,工具提示,浮动层以及可滚动容器等等,可以为你的站点带来非同寻常的桌面般体验,这套工具的主要作用是显示内容,这是绝多多数站点最需要的...
本项目涉及的主题是“jQuery Tab选项卡且可关闭”,这是一个常见的UI组件,用于组织和展示页面上的多部分内容。下面我们将深入探讨这个功能的实现、原理以及相关的jQuery和HTML/CSS知识。 首先,jQuery Tab选项卡的...
然后,通过调用特定的 jQuery 方法来初始化小部件或触发交互行为。 总的来说,jQuery UI 是一个强大且全面的前端开发工具,可以帮助开发者快速实现复杂而美观的用户界面。无论你是构建大型 Web 应用还是简单的功能...
多年收集积累的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....
金属质感通常通过特定的背景颜色、高光和阴影来模拟,使得UI元素看起来具有类似金属的光泽和质感。在网页上,这可能通过CSS3的渐变、阴影和边框属性来实现。 接下来,我们将深入探讨如何利用jQuery来创建这样的tab...
在JavaScript部分,我们需要引入jQuery库和jQuery UI库,后者提供了Tab插件。通过简单的初始化代码,我们可以将HTML结构转换为交互式的选项卡: ```html <!DOCTYPE html> <script src="https://code.jquery....