首页 > 代码库 > spry可折叠式面板控件

spry可折叠式面板控件

2024-07-17 14:13:58   222人阅读

关于可折叠面板构件

可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。下例显示一个处于展开和折叠状态的可折叠面板构件：

 

可折叠面板构件的 HTML 中包含一个外部 div 标签，其中包含内容 div 标签和选项卡容器 div 标签。在可折叠面板构件的 HTML 中，在文档头中和可折叠面板的 HTML 标记之后还包括脚本标签。

有关可折叠面板构件工作方式的更全面的说明（包括可折叠面板构件代码的全面分析），请访问 www.adobe.com/go/learn_dw_sprycollapsiblepanel_cn。

插入可折叠面板构件 选择“插入”>“Spry”>“Spry 可折叠面板”。

注： 还可以使用“插入”栏中的“Spry”类别插入可折叠面板构件。

在设计视图中打开或关闭可折叠面板 请执行下列操作之一：

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

  • 在“文档”窗口中选择一个可折叠面板构件，然后在属性检查器（“窗口”>“属性”）中，从“显示”弹出菜单中选择“打开”或“已关闭”。

    设置可折叠面板构件的默认状态

    当系统在浏览器中加载 Web 页时，您可以设置可折叠面板构件的默认状态（打开或已关闭）。

    1. 在“文档”窗口中选择一个可折叠面板构件。
    2. 在属性检查器（“窗口”>“属性”）中，从“默认状态”弹出菜单中选择“打开”或“已关闭”。

启用或禁用可折叠面板构件的动画

默认情况下，如果启用某个可折叠面板构件的动画，站点访问者单击该面板的选项卡时，该面板将缓缓地平滑打开和关闭。如果您禁用动画，则可折叠面板会迅速打开和关闭。

  1. 在“文档”窗口中选择一个可折叠面板构件。
  2. 在属性检查器（“窗口”>“属性”）中，选择或取消选择“启用动画”。

自定义可折叠面板构件

尽管使用属性检查器可以简化对可折叠面板构件的编辑，但是属性检查器并不支持自定义的样式设置任务。您可以修改可折叠面板构件的 CSS，并创建根据自己的喜好设置样式的可折叠面板。有关样式任务的更高级列表，请访问 www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_cn。

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

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

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

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

要更改的样式

相关 CSS 规则

要添加或更改的属性和值的示例

整个可折叠面板中的文本

.CollapsiblePanel

font: Arial; font-size:medium;

仅限面板选项卡中的文本

.CollapsiblePanelTab

font: bold 0.7em sans-serif;（这是默认值。）

仅限内容面板中的文本

.CollapsiblePanelContent

font: Arial; font-size:medium;

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

要更改的颜色

相关 CSS 规则

要添加或更改的属性和值的示例

面板选项卡的背景颜色

.CollapsiblePanelTab

（这是默认值。）

内容面板的背景颜色

.CollapsiblePanelContent

 

在面板处于打开状态时，选项卡的背景颜色

.CollapsiblePanelOpen .CollapsiblePanelTab

（这是默认值。）

当鼠标指针移过已打开面板选项卡上方时，选项卡的背景颜色

.CollapsiblePanelTabHover、.CollapsiblePanelOpen .CollapsiblePanelTabHover

（这是默认值。）

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

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


联系
我们