选项卡控件
第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">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jqueryui1.6rc2/
themes/flora/flora.tabs.css">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>jQuery UI Tabs Example 1</title>
</head>
<body>
<ul id="myTabs">
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</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>
<script type="text/javascript" src="jqueryui1.6rc2/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.core.js"></script>
<script type="text/javascript" src="jqueryui1.6rc2/ui/
ui.tabs.js"></script>
<script type="text/javascript">
//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展示了选项卡对象的默认外观。
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
