首页 > 代码库 > 12.5 借助于Spry实现伸缩面板

12.5 借助于Spry实现伸缩面板

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

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

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

图1 伸缩面板的效果
图1 伸缩面板的效果

一、建立基本的伸缩面板

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

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

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

图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-leftsolid 1px gray;   
  3.     border-rightsolid 1px black;   
  4.     border-bottomsolid 1px gray;   
  5.     overflowhidden;   
  6. }

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

折叠CSS 代码复制内容到剪贴板
  1. .Accordion {   
  2.     width:300px;   
  3.     overflowhidden;   
  4.     border-bottom:2px #006 solid;   
  5. }

二、设置标题的样式

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

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

接着找到如下代码:

折叠CSS 代码复制内容到剪贴板
  1. .AccordionPanelTab {   
  2.     background-color#CCCCCC;   
  3.     border-topsolid 1px black;   
  4.     border-bottomsolid 1px gray;   
  5.     margin0px;   
  6.     padding2px;   
  7.     cursorpointer;   
  8.     -moz-user-select: none;   
  9.     -khtml-user-select: none;   
  10. }

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

折叠CSS 代码复制内容到剪贴板
  1. .AccordionPanelTab {   
  2.     backgroundurl(ac-open-back.gif) no-repeat;   
  3.     fontbold 16px Arial;   
  4.     color:#006;   
  5.     line-height:30px;   
  6.     height:30px;   
  7.     margin0px;   
  8.     padding0px 30px;   
  9.     cursorpointer;   
  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.     backgroundurl(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.     backgroundurl(ac-open-back-top.gif) no-repeat;   
  3. }   
  4.   
  5. .AccordionPanelOpen .top {   
  6.     backgroundurl(ac-open-back-top-open.gif) no-repeat;   
  7. }

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

折叠CSS 代码复制内容到剪贴板
  1. .AccordionPanelContent {   
  2.     background:#ADF;   
  3.     font:12px/18px Arial;   
  4.     overflowauto;   
  5.     margin0px;   
  6.     padding: 0 10px;   
  7.     height230px;   
  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教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/939.html