12.5 借助于Spry实现伸缩面板

本章的最后一个案例要实现一个“伸缩面板”。伸缩面板具有固定的高度，包含若干页面，其中只有一个页面处于打开状态。当用鼠标单击某一个页面的标题时，该页面就会展开，原来展开的页面同时自动隐藏起来。在展开和隐藏的过程中，会有动画效果演示。

本实例的文件位于网页学习网CSS教程资源中“第12章\04\accordion.btm”。光盘的该目录下还有一个accardion-hover.htm文件。二者的区别是，在accordion.htm中，鼠标单击标题才能实现换页；而在accordion-hover.htm中，鼠标指针经过某个标题时就会切换到该页，而无需单击鼠标。

本案例完成后的效果如图1所示。lodidance.com

一、建立基本的伸缩面板

Spry工具栏的右边第2个按钮是制作伸缩面板的工具，如图2所示。

在页面中插入一个伸缩面板之后，可以通过“属性”面板加入新的页面，并调整页面的顺序，如图3所示。

相应的HTML结构如下所示。

其中的“LABEL1”和LABEL2”处可以修改标题文字，“内容1”和“内容2”处为各页面的内容，可以放置文本、图像等各种内容。修改样式的方法与前面设置Tab面板和折叠面板的方法非常类似。这里为读者演示一下如何制作带有边框的样式。

打开页面相应的CSS文件，开始逐段修改样式。第一段代码如下：

它的作用是对整个伸缩面板进行设置。本案例中，设置面板的宽度，仅保留底端的边框（注意本案例使用2像素宽的边框）．左右边框删除，因此这段代码修改为：

二、设置标题的样式

接下来准备两个图像，每个都是300像素宽．30像素高，其中一个左端有一短横线，表示处于收缩状态，另外一个左端有一短竖线，表示处于展开状态，如图4所示。

   
图4 准备用于展开和收缩状态的背景图像

接着找到如下代码：

这段代码的作用就是设置收缩状态的面板的标题部分，因此这里设置文字的样式、高度、padding等属性，代码如下：

然后找到下面这段代码：

它的作用是设置展开的标题背景，设置如下：

三、对最上面的标题进行特殊处理

这时需要注意的是．最上面的一个标题背景应该与其他标题背景有所不同，请注意图1中最上面的位置，最上面的圆角处没有向上伸展的竖线。

因此现在需要为第一个页面的标题制作两个图像，分别在第一个页面处于收缩和展开时使用，和图4相似。

接下来对第一个标题的HTML稍作修改，为它增加一个类别“top”，代码由：

改为：

然后分别设定第一个标题收缩和伸展时的背景图像。增加如下两段代码，这两段代码原CSS文件中并没有，需要手工添加。

对每个页面里的内容进行设置。注意设置左右2像素的边框，使其和背景图像的左右竖线连接上。注意这里的高度将控制页面展开后的高度，如果内容超出这个高度，将自动出现滚动条。

最后把没有用到的代码删除，即可实现最终的效果。在一些网站上可以看到这种伸缩面板，有的是通过鼠标单击来展开某一个页面，也有的是鼠标指针经过某个标题时就展开相应的页面。如果要实现后面这个效果，也是可以的，方法是为每个标题所在的div增加一句JavaScript语句，例如将原来的如下语句：

改为：

就可以实现用鼠标指针经过而不是鼠标单击实现切换页面。请注意，4个标题都要加上这句话。lodidance.com

网页学习网CSS教程资源中“第12章\04”文件夹中有两个文件，分别宴现了鼠标单击标题实现换页和鼠标指针经过标题时换页。如果读者制作中遇到困难，请参考资源中的正确文件。

本章重点

本章一共介绍了4个案例，第1个Tab菜单是仅使用CSS设置就可以完成的效果，后面的3个案例都是用Dreamweaver CS3中内置的Spry框架实现的、功能更强大的Web页面元素。

使用Spry可以为不会JavaScript的设计师提供巨大的帮助，只要懂得CSS，就可以制作出效果复杂的网页效果和界面元素。由于篇幅所限，本教程并没有深入讲解Spry的各个方面，实际上它的功能相当强大，值得读者深入研究。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表