spry提示信息设置html,CSS教程:12.4 借助于Spry实现折叠面板

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

图1 设置当前页的Tab样式

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

一、建立基本的折叠面板

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

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

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

图3 插人多个可折叠面扳

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

二、准备背景图片

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

 

 

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

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

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

注意：请读者先尝试一下本书光盘中的实例文件，这样对于理解这里的讲解会有所帮助。

三、整体设置

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

折叠展开XML/HTML

代码复制内容到剪贴板

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

折叠展开XML/HTML

代码复制内容到剪贴板

Tab