jQuery用户界面库学习指南

来源：互联网发布：手机云便签知乎编辑：程序博客网时间：2024/06/06 06:43

选项卡控件

第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>元素的链接目标。到目前为止，所讨论的元素以及它们所需要的属性，是构成选项卡控件基础所必需的最小集合。

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

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