选项卡式面板构件

选项卡式面板构件

选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态。下例显示一个选项卡式面板构件，第三个面板处于打开状态：

A.Tab B. 内容 C. 选项卡式面板构件 D. 选项卡式面板

选项卡式面板构件的 HTML 代码中包含一个含有所有面板的外部div标签、一个标签列表、一个用来包含内容面板的div和以及各面板对应的div。在选项卡式面板构件的 HTML 中，在文档头中和选项卡式面板构件的 HTML 标记之后还包括脚本标签。

自定义选项卡式面板构件

尽管使用属性检查器可以简化对选项卡式面板构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改选项卡式面板构件的 CSS 规则，并创建根据自己的喜好设置样式的构件。

下列主题中的所有 CSS 规则都是指 SpryTabbedPanels.css 文件中的默认规则。每当您创建 Spry 选项卡式面板构件时，Dreamweaver 都会将 SpryTabbedPanels.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件中还包括有关适用于该构件的各种样式的有用的注释信息。

尽管可以直接在相关联的 CSS 文件中方便地编辑选项卡式面板构件的规则，您还可以使用“CSS 样式”面板来编辑选项卡式面板构件的 CSS。“CSS 样式”面板对于查找分配给构件不同部分的 CSS 类非常有用，在使用面板的“当前”模式时尤其如此。

设置选项卡式面板构件文本的样式

，通过设置整个选项卡式面板构件容器的属性或分别设置构件的各个组件的设置，可以设置选项卡式面板构件的文本样式。

 要更改选项卡式面板构件的文本样式，请使用下表来查找相应的 CSS 规则，然后添加自己的文本样式属性和值：

要更改的文本	相关 CSS 规则	要添加的属性和值的示例
整个构件中的文本	.TabbedPanels	font: Arial; font-size:medium;
仅限面板选项卡中的文本	.TabbedPanelsTabGroup 或 .TabbedPanelsTab	font: Arial; font-size:medium;
仅限内容面板中的文本	.TabbedPanelsContentGroup 或 .TabbedPanelsContent	font: Arial; font-size:medium;

更改选项卡式面板构件的背景颜色

 要更改选项卡面板构件不同部分的背景颜色，请使用下表来查找相应的 CSS 规则，然后根据自己的喜好添加或更改背景颜色的属性和值：

要更改的颜色	相关 CSS 规则	要添加或更改的属性和值的示例
面板选项卡的背景颜色	.TabbedPanelsTabGroup 或 .TabbedPanelsTab	background-color: #DDD;（这是默认值。）
内容面板的背景颜色	.Tabbed PanelsContentGroup 或 .TabbedPanelsContent	background-color: #EEE;（这是默认值。）
选定选项卡的背景颜色	.TabbedPanelsTabSelected	background-color: #EEE;（这是默认值。）
当鼠标指针移过面板选项卡上方时，选项卡的背景颜色	.TabbedPanelsTabHover	background-color: #CCC;（这是默认值。）

限制选项卡式面板的宽度

默认情况下，选项卡式面板构件会展开以填充可用空间。但是，您可以通过设置折叠式容器 width 属性来限制选项卡式面板构件的宽度。

1. 打开 SpryTabbedPanels.css 文件查找 .TabbedPanels CSS 规则。此规则可为选项卡式面板构件的主容器元素定义属性。

查找规则的另一种方法是：选择选项卡式面板构件，然后在“CSS 样式”面板（“窗口”>“CSS 样式”）中进行查找。请确保该面板设置为“当前”模式。

1. 向该规则中添加一个 width 属性和值，例如width: 300px;。