跟我学Dreamweaver Spry设计工具——单层可折叠面板功能实现实例

1.1跟我学Dreamweaver Spry设计工具——单层可折叠面板功能实现实例1.1.1Spry 单层可折叠面板（Collapsible Panel）
1、可折叠面板是一个面板
它可将内容存储到“紧凑”的空间中，用户单击可折叠面板的选项卡即可隐藏或显示存储在可折叠面板中的内容。

下图显示一个处于展开和折叠状态的可折叠面板：
其中的“A”代表“已展开”状态，而“B”代表“已折叠”状态。

2、新建一个文件名称为spryCollapsiblePanel.html的页面文件
3、在页面中插入可折叠面板
（1）选择“插入”>“Spry”>“Spry 可折叠面板”
也还可以使用“插入”面板中的“Spry”类别插入可折叠面板，如下图所示：
（2）系统自动地生成下面的内容页面
（3）熟悉所生成的HTML标签
在生成的可折叠面板的HTML页面文件中包含一个外部<div>标签，其中包含内容<div>标签和选项卡容器<div>标签。

（4）每个可折叠面板元素都有一个CSS样式名
这些样式控制可折叠面板的呈现风格，存放在外置的CSS文件SpryCollapsiblePanel.css 中。

在可折叠面板的HTML 页面文件中，在文档头中和可折叠面板的HTML 标签之后还包
括有JavaScript脚本标签及代码。

（5）初始化的脚本
初始化可折叠面板的JavaScript脚本实现将ID为CollapsiblePanel1的静态HTML标签转换为动态交互页面元素。

Spry.Widget.CollapsiblePanel()方法是框架中创建可折叠面板对象的构造函数，初始化对象的代码已经包含在SpryCollapsiblePanel.js文件中。

（6）保存页面及有关的CSS样式及JavaScript文件
4、修改可折叠面板标题、内容及默认状态
（1）修改可折叠面板标题和内容文字
（2）设置可折叠面板的默认状态
当系统在浏览器中加载网页时，可以设置可折叠面板的默认状态为打开或处于关闭状态。

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

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

如果希望禁用动画，则可折叠面板会迅速打开和关闭。

只需要在“文档”窗口中选择一个可折叠面板，然后在属性检查器（“窗口”>“属性”）中，选择或取消选择“启用动画”。

5、激活键盘导航组件的功能
使通过键盘也可以控制折叠组件，这对于不能使用鼠标的情况是很有用的。

键盘导航可以通过箭头键或其他自定义的键控制折叠组件。

而在折叠组件上实现键盘导航是很简单的，只需要为<div>标签添加tabindex 属性，这个属性告诉浏览器如何在文档中使用TAB键。

如果将tabindex属性值设为“0”，浏览器将不记入切换顺序中。

如果是一个正值，其顺序值则是有效的。

6、测试现在的效果
而用鼠标点击该标题时，内容将自动地收缩，如下图所示。

1.1.2自定义可折叠面板
1、实现的基本原理
（1）首先熟悉SpryCollapsiblePanel.css样式文件
可以通过直接修改可折叠面板的CSS样式文件（SpryCollapsiblePanel.css）中的默认规则和定义，并创建根据自己的喜好设置的可折叠面板。

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

因为系统在创建Spry折叠组组件时，Dreamweaver 都会将SpryCollapsiblePanel.css文件保存到站点内的SpryAssets文件夹中。

（2）修改SpryCollapsiblePanel.css样式文件中相关的CSS样式项目
2、设置可折叠面板文本的样式
（1）修改整个（包括标签页中的文字和内容区中的文字）可折叠面板中的文本字体主要是由“.CollapsiblePanel”属性项目控制，该属性的默认值为“font: Arial; font-size:medium;”。

（2）也可以分别修改折叠面板选项卡中的标签文本字体
主要是由“.CollapsiblePanelTab”属性项目控制，该属性的默认值为“font: bold 0.7em sans-serif;”。

（3）当然，也可以修改内容面板中的内容区中的文本字体
主要是由“.CollapsiblePanelContent”属性项目控制，该属性的默认值为“font: Arial; font-size:medium;”。

3、更改可折叠面板的背景颜色
（1）修改折叠面板选项卡标签页的背景颜色
主要是由“.CollapsiblePanelTab”属性项目控制，该属性的默认值为“background-color: #DDD;”。

（2）修改内容面板的背景颜色
主要是由“.CollapsiblePanelContent”属性项目控制，该属性的默认值为“background-color: #DDD;”。

（3）修改在面板处于打开状态时的选项卡标签页的背景颜色
主要是由“.CollapsiblePanelOpen.CollapsiblePanelTab”属性项目控制
该属性的默认值为“background-color: #EEE;”。

（4）修改当鼠标指针移过（或者指向）已打开面板选项卡上方时的选项卡的背景颜色主要是由“.CollapsiblePanelTabHover，.CollapsiblePanelOpen .CollapsiblePanelTabHover”属性项目控制，该属性的默认值为“background-color: #CCC;”。

比如，修改为下面的值
再测试现在的效果。

4、限制可折叠面板的宽度和内容面板的高度
（1）默认情况下可折叠面板会展开以填充可用空间
可以通过为可折叠面板容器设置width 属性来限制可折叠面板本身的宽度，只需要打开SpryCollapsiblePanel.css文件，并查找“.CollapsiblePanel”属性项目的CSS规则定义。

此规则为可折叠面板的主容器元素定义属性。

（2）向该规则中添加一个width 属性和值
（3）限制折叠组组件的“内容区域”的高度
默认情况，当开启动画效果的时候，面板的高度取决于面板内容的高度。

在SpryCollapsiblePanel.css文件中查找“.CollapsiblePanelContent”属性项目的CSS 规则定义，此规则可用来定义折叠组组件的内容面板元素的属性。

修改其中的“height”属性项目的值就可以控制折叠组组件内容面板的高度。

如果将“height”属性项目的值设置为“height: auto;”，则可以使得浏览器自适应内容面板内的文字实际的高度。

但如果将height:50px; 不起作用，不知道是什么原因？
5、改变折叠组件面板的切换方式从鼠标点击转变为鼠标指示
（1）修改SpryCollapsiblePanel.js文件中的onTabMouseOver事件定义的代码
在SpryCollapsiblePanel.js文件中查找Spry.Widget.Accordion.prototype.onTabMouseOver的函数定义，将原来的代码（如下所示）：
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(){
this.addClassName(this.getTab(), this.hoverClass);
};
改变为下面的代码：
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(){
if (this.isOpen())
this.close();
else
this.open();
this.focus();
};
（2）测试修改后的效果
6、设置鼠标离开标签页时内容区自动折叠
（1）当内容区的内容为“只读”时，可以设置鼠标离开标签页时内容区自动折叠内容区域（2）实现的方法
在onTabMouseOut的事件响应函数中增加一条下面的语句：
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(){
this.removeClassName(this.getTab(), this.hoverClass);
this.close();
};。