折叠构件是一组可折叠的面板,可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时,折叠构件的面板会相应地展开或收缩。在折叠构件中,每次只能有一个内容面板处于打开且可见的状态。下例显示一个折叠构件,其中的第二个面板处于展开状态: 折叠构件是一组可折叠的面板,可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时,折叠构件的面板会相应地展开或收缩。在折叠构件中,每次只能有一个内容面板处于打开且可见的状态。下例显示一个折叠构件,其中的第二个面板处于展开状态: 折叠构件的默认 HTML 中包含一个含有所有面板的外部 div 标签以及各面板对应的 div 标签,各面板的标签中还有一个标题 div 和内容 div。折叠构件可以包含任意数量的单独面板。在折叠构件的 HTML 中,在文档头中和折叠构件的 HTML 标记之后还包括 script 标签。 有关折叠构件工作方式的更全面的说明(包括折叠构件代码的全面分析),请参阅 。
折叠构件的默认 HTML 中包含一个含有所有面板的外部 div 标签以及各面板对应的 div 标签,各面板的标签中还有一个标题 div 和内容 div。折叠构件可以包含任意数量的单独面板。在折叠构件的 HTML 中,在文档头中和折叠构件的 HTML 标记之后还包括 script 标签。 有关折叠构件工作方式的更全面的说明(包括折叠构件代码的全面分析),请参阅 。 注: 还可以使用“插入”栏中的“Spry”类别插入折叠构件。
请执行下列操作之一:
尽管使用属性检查器可以简化对折叠构件的编辑,但是属性检查器并不支持自定义的样式设置任务。您可以修改折叠构件的 CSS 规则,并创建根据自己的喜好设置样式的折叠构件。有关样式任务的更高级列表,请访问 。 下列主题中的所有 CSS 规则都是指 SpryAccordion.css 文件中的默认规则。每当您创建 Spry 折叠构件时,Dreamweaver 都会将 SpryAccordion.css 文件保存到您的站点的 SpryAssets 文件夹中。此文件还包含有关适用于该构件的各种样式的注释信息,因此,您可能会发现参考该文件也会有所帮助。 要更改折叠构件的文本样式,请使用下表来查找相应的 CSS 规则,然后添加自己的文本样式属性和值:
要更改折叠构件不同部分的背景颜色,请使用下表来查找相应的 CSS 规则,然后添加或更改背景颜色的属性和值:
|