12.4 借助于Spry实现折叠面板

在基于Spry的基础上实现了Tab板之后，再来制作一个折叠面板的页面，效果如图1所示。图中一共有3个折叠面板，每个折叠面板都有一个标题。单击一个标题，就可以实现面板的折叠隐藏或展开。图1的左图为折叠起来的效果，右图为展开后的效果。

图1 设置当前页的Tab样式

本实例的文件位于网页学习网CSS教程资源中“第12章\03\collapsible.htm”。

一、建立基本的折叠面板

首先新建一个HTML文档，保存后，插入Spry工具栏中的最右边的“Spry可折叠面板”，如图2所示。

图2 在Dreamwweaver CS3中找到折叠面板

连续插入多个可折叠面板，这时在浏览器中的效果如图3所示。不需要做任何设置，折叠面板的功能已经可以实现了，每一个折叠面板都可以折叠起来或者展开。lodidance.com

图3 插人多个可折叠面扳

下面的任务就是通过设置CSS来使效果更加美观了。

二、准备背景图片

首先准备4个背景图像，如图4所示，它们都是300像素宽．30像素高。

   
 

   
图4 设置折叠面板所需的4个背景图像

● 其中上面的两个浅色图像作为平常状态的标题背景，下面的两个深色图像作为鼠标指针经过时的标题背景。

● 左端向上的两个三角形用于展开的面板标题背景，左端向下的两个三角形用于关闭的面板标题背景。

三、整体设置

先来研究一下HTML文件。可以看到和前面的Tab面板相同，也需要一个JavaScript文件和一个CSS文件。

定义折叠面板结构的方法很简单，代码如下：

外面是一个div，用于定义整个折叠面板。它的内部又有两个div．分别用于放置标题和内容。

下面先打开在文件的head部分引用的CSS文件，其中有几段CSS设置，分别针对不同的元素。第1段代码如下：

这里设置了一个折叠面板的整体效果和边框。本案例中不设置边框，但是需要设置一个300像素宽的总宽度，因此代码修改为：

四、设置折叠面板的标题

第2段代码用于设置折叠面板的标题，修改前代码如下：

这里要把背景设置为前面制作好的背景图像。由于使用了浅色背景图像，因此需要将文字设置为深色，并设置标题的高度为30像素。为了使标题文字竖直居中，可以将line-height属性也设置为30像素。通过padding把文字移动到适当的位置。修改后的代码如下：

五、设置折叠面板的初始状态

图4中的背景是用于折叠状态的，这里把各个面板的初始状态设置为折叠，而不是打开。这个操作可以在“属性”面板完成，也可以通过修改HTML代码来实现。

在HTML中，找到如下代码：

修改为：

也就是在每行增加“.{contentlsOpen:false}”参数，注意大小写不要写错。这时在浏览器中的显示效果可以看到面板内容在初始状态都隐藏起来了。

六、设置展开状态的标题背景

接下来设置展开状态时的标题背景。找到如下代码：

改为：

此时在浏览器中单击某一个标题，该面板就会展开，展开的面板标题下面有一个蓝色横条，这是由于还没有清理自动生成的代码导致的，暂时不用管它。lodidance.com

七、设置鼠标指针经过时的标题背景

接下来设置鼠标指针经过时的标题背景。找到如下一段代码：

这段代码中同时设置了展开和折叠状态的面板标题在鼠标指针经过时的背景颜色，由于本案例需要设置在鼠标指针经过时，展开和折叠状态的面板标题各自的背景图像，因此需要拆分成两段CSS设置，代码如下。

其中，前面的代码设置的是处于折叠状态的面板，在鼠标指针经过标题时的背景图像，后者反之。

接下来把最后一段代码删掉，这段代码如下。

它的作用是设置处于焦点的面板的背景图像，本案例不做设置，因此删除即可。这时折叠面板就设置完成了，可以看到，鼠标指针经过时，标题的背景颜色会变化，非常醒目。

接下来设置面板内部的内容样式。如果将上面设置的面板标题和它的内容配合起来，就会取得很好的视觉效果了，如图1所示，这里就不再赘述。

至此，这个折叠面板的效果就全部完成了。

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