前言
jQuery UI是基于jQuery基础类库API开发的开源的JavaScript 网页UI（用户界面）代码组件库，使用jQuery UI可以实现Web UI界面交互、动画、特效和可更换主题的可视控件，并且还可以定制Web UI的主题风格。从而可以应用它轻松地构建出高度可交互的Web 应用程序的UI界面。
随着Web应用的普及及AJAX相关应用的深入，客户端和Web服务器端需要频繁地交互数据，对Web交互的界面也提出了新的要求——简洁、方便、人性化等用户体验度高；同时随着移动设备的普及，客户端的访问设备也逐渐多样化。如何为不同的客户端设备提供统一的Web应用界面，从而提高开发效率和降低开发成本。目前比较好的技术实现手段是应用JQuery及JQuery UI系统库相关的技术。
作者根据自身多年的软件开发实践和经验总结，结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验，在本系列文档中通过具体的程序代码示例为读者介绍jQuery UI中典型的应用组件技术。本文档主要涉及jQuery UI Tabs组件主要的技术特性、Tabs组件主要的成员属性及应用示例、Tabs组件主要的事件及应用示例、如何创建普通的Tabs组件实现示例以及如何创建特殊的Tabs组件实现示例等方面的内容。
本文目录
1.1jQuery UI选项卡Tabs (3)
1.1.1jQuery UI Tabs组件主要的技术特性 (3)
1.1.2Tabs组件主要的成员属性及应用示例 (4)
1.1.3Tabs组件主要的事件及应用示例 (11)
1.2普通的Tabs组件实现示例 (15)
1.2.1页头Tab和页面内容构成要素 (15)
1.2.2普通的Tabs组件的应用示例 (15)
1.2.3使用cookie缓存最后选中Tab页签的应用示例 (18)
1.3特殊的Tabs组件实现示例 (20)
1.3.1面板的内容通过AJAX技术异步更新的应用示例 (20)
1.3.2可以重新排序卡片头的应用示例 (20)
1.3.3动态添加和删除Tabs组件内的页头和内容区域的示例 (22)
1.3.4卡片标题朝下的Tabs组件实现示例 (26)
1.3.5实现纵向Tabs组件应用示例 (29)
1.1jQuery UI选项卡Tabs
1.1.1jQuery UI Tabs组件主要的技术特性
1、Tabs组件为选项卡组件
（1）在Windows系统的应用程序中广泛地应用Tabs组件
Tabs组件在Windows系统的应用程序中是很常见的一种用户交互组件，如下示图为DW软件的界面局部截图，其中所打开的每个HTML页面文件都在一个独立的Tabs组件中显示。
（2）Tabs组件也广泛地应用于Web页面中
而在Web应用系统的Web页面中也大量地应用Tabs组件改善Web应用系统的UI界面和提高界面的可交互性。如下示图为某个项目中的修改用户相关信息的页面局部截图，其中将“修改基本信息”和“修改职业信息”分别设计为一个Tabs组件中的两个不同的页面。
（3）JQuery UI也提供对Tabs组件的技术实现支持
如下示图为JQuery UI的技术帮助文档中所提供的Tabs组件示例，在JQuery UI中全面地提供对Tabs 组件的技术实现支持。
2、Tabs组件的应用场合
Tabs组件通常用于将内容分解成多个相互独立的单元部分，并且可以切换标题头从而切换不同的内容区域，可以节省屏幕显示空间。
因此，Tabs组件在Web网页及桌面应用程序中都使用得相当广泛，应用它可以实现界面中的菜单和作为可切换内容的的选项卡。
3、官方示例jqueryui/tabs/
jquery在线库1.1.2Tabs组件主要的成员属性及应用示例
1、active成员属性
（1）主要的功能
active成员属性主要决定当前正在打开的Tabs组件内的内容面板的顺序，也就是正在打开的内容面板是哪个。
（2）成员属性值的数据类型
该成员属性值的数据类型为布尔（Boolean）或者数字（Integer）数据类型，默认值为0，代表第一个内容面板处于打开状态。如果将active成员属性值设置为false，将折叠所有的内容面板从而没有打开状态的内容面板。当然，此时也要求将另一个成员属性collapsible的值要设置为true。
而如果设置该属性值为某个整数值，则是即将要打开的内容面板的顺序号码；而如果设置为负数，则意味着该面板将自动地为Tabs组件的最后一个内容面版。
（3）在初始化Tabs组件时设置active成员属性的代码示例
<script type="text/javascript">
$(function(){
$('#tabsDivTagID').tabs(
{
active: 1
}
);
});
</script>
上面的示例最终实现将某个Tabs组件中的第2个面板设置为初始为活动状态——处于打开状态，如下示图所示。
（4）在初始化Tabs组件后获得和设置active成员属性的代码示例
获得该成员属性值的示例代码如下：var active = $( "JQuery选择器" ).tabs( "option", "active" );
而设置该成员属性的示例代码如下：$("JQuery选择器" ).tabs( "option", "active", 1 );
2、collapsible成员属性
（1）主要的功能
当Tabs组件中的某个内容面板已经处于打开状态后，collapsible成员属性可以控制是否可折叠已经打开的内容面板。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。