jQuery用户界面库学习指南 _《jquery用户界面库学习指南》-优快云博客

本文链接：https://blog.youkuaiyun.com/supermanjames/article/details/5078679

选项卡控件

第1章已经介绍了jQuery UI库，现在可以开始讨论库中包含的各种组件了。接下来的6章将关注程序库所提供的控件，它们构建于低层交互助手的基础之上，是一套视觉上吸引人而配置灵活的用户界面控件。

其中选项卡控件（tab）用于在一组不同元素之间切换视角，可以通过单击每个元素的标题来访问该元素包含的内容，这些标题都作为独立的选项卡而出现。每个元素，或者说每个内容片段都具有一个与之关联的选项卡，并且在同一时刻只能打开其中一个内容片段。

图2-1显示了UI选项卡控件的各个组成部分。

图2-1

本章包括以下主题：

·　该控件的默认实现；

·　如何为一组选项卡设置风格；

·　配置选项卡属性；

·　内建的内容面板变化时的切换特效；

·　使用选项卡控件提供的方法控制选项卡；

·　自定义选项卡控件定义的事件；

·　AJAX选项卡。

2.1 选项卡的基本实现

选项卡控件所基于的底层HTML元素结构是固定的，控件的运转依赖于一些特定的元素。

选项卡本身必须从列表元素中创建，列表是排序或不排序的，并且每个列表项应当包含一个<span>元素和一个<a>元素。每个链接还需要具有相应的<div>元素与它的href属性相关联。在下面的第一个范例中，将会准确地阐释这些元素的结构。

使用文本编辑器新建一个文件，然后创建如下页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/

TR/html4/strict.dtd">

<head>

themes/flora/flora.tabs.css">

charset=utf-8">

<title>jQuery UI Tabs Example 1</title>

</head>

<body>

</ul>

<div id="0">This is the content panel linked to the first tab, it

is shown by default.</div>

<div id="1">This content is linked to the second tab and will be

shown when its tab is clicked.</div>

jquery-1.2.6.js"></script>

ui.core.js"></script>

ui.tabs.js"></script>

//define function to be executed on document ready

$(function(){

//create the tabs

$("#myTabs").tabs();

});

</script>

</body>

</html>

在jqueryui工作目录下，将代码保存为tabs1.html。现在回顾一下程序库的使用方法。下面的脚本和CSS资源对于实例化默认的选项卡控件是必需的：

·　flora.tabs.css、default.all.css或自定义的包含相关元素的样式表

·　jquery-1.2.6.js

·　ui.core.js

·　ui.tabs.js

一套选项卡面板包括了几种以特定方式排列的标准HTML元素（根据实现的需要，可以采取在页面中硬编码的方式，也可以动态添加，或者两者结合使用）：

·　列表元素（<ul>或<ol>）

·　<a>元素

·　<span>元素

·　<div>元素

前3个元素组成了可单击的选项卡标题，以用来打开选项卡所关联的内容片段。每个选项卡应当包括一个带有链接的列表项，并且链接内部还嵌套了一个<span>元素。

每个选项卡的内容片段是通过<div>元素创建的，其中id属性是必需的，标记了相应的<a>元素的链接目标。到目前为止，所讨论的元素以及它们所需要的属性，是构成选项卡控件基础所必需的最小集合。

在声明了所需要的jQuery UI库的3个脚本文件之后，上例在自定义的<script>元素中增加了创建选项卡控件的代码，这里只是通过简单地使用$(function(){})在文档准备就绪时执行代码，即在代表选项卡容器元素的jQuery对象（id为myTabs的<ul>）上调用tabs()构造方法。

下面，图2-2展示了选项卡对象的默认外观。

2.2 选项卡风格

flora或default样式表包含了所有能保证选项卡控件的外观与功能都正确的样式规则。开发者还可以提供自己的样式表，只要其中包含了所需要的规则选项，也可以通过使用主题定制器制作自己的主题。

在下面的范例中，演示了如何增加一个基本的样式以改进页面的美感。为了快速而简便地定制页面的外观，可以使用自定义的简单样式规则来替换原有的规则，同时不会改变与选项卡控件功能相关的规则。

在文本编辑器新建一个文件，并创建如下简单样式：

.ui-tabs-panel {

width:300px;

border:1px solid #0000cc;

}

.ui-tabs-nav a, .ui-tabs-nav a span {

background:url(../img/tab-sprite.gif) no-repeat;

}

.ui-tabs-nav a {

background-position:100% 0%;

}

然后只需要在styles文件夹中将该文件保存为tabsTheme.css。几个样式类的名称将会被自动添加到组成选项卡控件的元素以及控件中与之相关联的内容面板上。使用这些类名可以改变控件的特定属性，如用来创建选项卡标题的背景图片和选项卡内容面板的边框效果。

在主题文件中，指定了一个新的图片tab- sprite.gif，控件使用该图片作为选项卡顶部的选项卡标题。最简单的创建新图片的方法是先在图片编辑器中打开一个flora中已使用的图片，再修改图片中不同部分的颜色。原始的flora图片保存在已解压库的themes文件夹中的i目录下。此外必须在HTML文件中的<head>元素内声明新样式表的链接，如下所示：

加上该语句后，保存修改后的文件为tabs2.html并且在浏览器中访问它，得到的页面如图2-3所示（蓝色样式取代了原来的绿色样式）。

仅仅通过改写flora主题定义的3个规则，就可以改变选项卡控件的配色方案，从而方便地将控件整合到已有的样式风格中去。