12.5 借助于Spry实现伸缩面板

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

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

图1 伸缩面板的效果

一、建立基本的伸缩面板

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

图2 制作伸缩面板的工具- Spry折叠式

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

图3 使用“属性”面板可以增加或删除页面

相应的HTML结构如下所示。

折叠展开XML/HTML 代码复制内容到剪贴板

1. <div id="Accordion1" class="Accordion" tabindex="0">
2. <div class="AccordionPanel">
3. <div class="AccordionPanelTab">LABEL 1</div>
4. <div class="AccordionPanelContent">内容 1</div>
5. </div>
6. <div class="AccordionPanel">
7. <div class="AccordionPanelTab">LABEL 2</div>
8. <div class="AccordionPanelContent">内容 2</div>
9. </div>
10. </div>

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

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

折叠展开CSS 代码复制内容到剪贴板

1. .Accordion {
2. border-left: solid 1px gray;
3. border-right: solid 1px black;
4. border-bottom: solid 1px gray;
5. overflow: hidden;
6. }

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

折叠展开CSS 代码复制内容到剪贴板

1. .Accordion {
2. width:300px;
3. overflow: hidden;
4. border-bottom:2px #006 solid;
5. }

二、设置标题的样式

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

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

接着找到如下代码：

折叠展开CSS 代码复制内容到剪贴板

1. .AccordionPanelTab {
2. background-color: #CCCCCC;
3. border-top: solid 1px black;
4. border-bottom: solid 1px gray;
5. margin: 0px;
6. padding: 2px;
7. cursor: pointer;
8. -moz-user-select: none;
9. -khtml-user-select: none;
10. }

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

折叠展开CSS 代码复制内容到剪贴板

1. .AccordionPanelTab {
2. background: url(ac-open-back.gif) no-repeat;
3. font: bold 16px Arial;
4. color:#006;
5. line-height:30px;
6. height:30px;
7. margin: 0px;
8. padding: 0px 30px;
9. cursor: pointer;
10. -moz-user-select: none;
11. -khtml-user-select: none;
12. }

然后找到下面这段代码：

折叠展开CSS 代码复制内容到剪贴板

1. .AccordionPanelOpen .AccordionPanelTab {
2. background-color: #EEEEEE;
3. }

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

折叠展开CSS 代码复制内容到剪贴板

1. .AccordionPanelOpen .AccordionPanelTab {
2. background: url(ac-open-back-open.gif) no-repeat;
3. }

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

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

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

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

折叠展开XML/HTML 代码复制内容到剪贴板

1. <div class="AccordionPanelTab">Home</div>

改为：

折叠展开XML/HTML 代码复制内容到剪贴板

1. <div class="AccordionPanelTab top">Home</div>

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

折叠展开CSS 代码复制内容到剪贴板

1. .top{
2. background: url(ac-open-back-top.gif) no-repeat;
3. }
4. .AccordionPanelOpen .top {
5. background: url(ac-open-back-top-open.gif) no-repeat;
6. }

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

折叠展开CSS 代码复制内容到剪贴板

1. .AccordionPanelContent {
2. background:#ADF;
3. font:12px/18px Arial;
4. overflow: auto;
5. margin: 0px;
6. padding: 0 10px;
7. height: 230px;
8. border-left:2px #006 solid;
9. border-right:2px #006 solid;
10. }

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

折叠展开XML/HTML 代码复制内容到剪贴板

1. <div class="AccordionPanelTab">Web Design</div>

改为：

折叠展开XML/HTML 代码复制内容到剪贴板

1. <div class="AccordionPanelTab" onmouseover="Accordion1.openPanel(this.parentNode);">Web Design</div>

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

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

本章重点

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

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

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