Adobe Dreamweaver * 使用 Spry 选项卡式面板 Widget

font: Arial;

关于选项卡式面板 Widget

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

A.

Tab

B.

内容

C.

选项卡式面板 Widget

D.

选项卡式面板

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

有关选项卡式面板 Widget 工作方式的更全面的说明（包括选项卡式面板 Widget 代码的全面分析），请访问 www.adobe.com/go/learn_dw_sprytabbedpanels_cn。

返回页首

插入和编辑选项卡式面板 Widget

插入选项卡式面板 Widget

 选择“插入”>“Spry”>“Spry 选项卡式面板”。

注： 还可以使用“插入”面板中的“Spry”类别插入选项卡式面板 Widget。

将面板添加到选项卡式面板 Widget

1. 在“文档”窗口中选择一个选项卡式面板 Widget。
2. 在属性检查器（“窗口”>“属性”）中单击“面板”旁边的加号按钮。
3. （可选）更改选项卡的名称，方法是在“设计”视图中选择选项卡的文本并对其进行修改。

从选项卡式面板 Widget 删除面板

1. 在“文档”窗口中选择一个选项卡式面板 Widget。
2. 在属性检查器（“窗口”>“属性”）的“面板”菜单中，选择要删除的面板的名称，然后单击减号按钮。

打开面板进行编辑

 执行下列操作之一：

• 将鼠标指针移到要在“设计”视图中打开的面板选项卡上，然后单击出现在该选项卡右侧中的眼睛图标。

• 在“文档”窗口中选择一个选项卡式面板 Widget，然后单击要在属性检查器（“窗口”>“属性”）的“面板”菜单中编辑的面板的名称。

更改面板的顺序

1. 在“文档”窗口中选择一个选项卡式面板 Widget。
2. 在属性检查器（“窗口”>“属性”）的“面板”菜单中，选择要移动的面板的名称。
3. 单击向上箭头或向下箭头可以向上或向下移动该面板。

设置默认的打开面板

您可以设置当页面在浏览器中打开时，在默认情况下将打开选项卡式面板 Widget 的哪个面板。

1. 在“文档”窗口中选择一个选项卡式面板 Widget。
2. 在属性检查器（“窗口”>“属性”）中，从“默认面板”弹出菜单中选择默认情况下要打开的面板。

返回页首

自定义选项卡式面板 Widget

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

有关更改选项卡式面板 Widget 颜色的快速参考，请参阅 David Powers 的 Quick guide to styling Spry tabbed panels, accordions, and collapsible panels（样式 Spry 选项卡式面板、折叠 Widget 和可折叠面板的快速指南）。

有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprytabbedpanels_custom_cn。

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

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

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

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

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

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

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

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

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

限制选项卡式面板的宽度

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

1. 打开 SpryTabbedPanels.css 文件查找 .TabbedPanels CSS 规则。此规则可为选项卡式面板 Widget 的主容器元素定义属性。
   查找规则的另一种方法是：选择选项卡式面板 Widget，然后在“CSS 样式”面板（“窗口”>“CSS 样式”）中进行查找。请确保该面板设置为“当前”模式。
2. 向该规则中添加一个 width 属性和值，例如 width: 300px;。