首页 > 代码库 > 12.3 借助于Spry实现Tab面板

12.3 借助于Spry实现Tab面板

前面说过,如果要实现一个真正的Tab菜单,需要JavaScript配合,开发起来必须有JavaScript的使用经验。没有JavaScript经验的设计师可以借助于Adobe公司2007年春天发布的Dreamweaver CS3中新增加的Spry功能来方便地实现。

在本案例中,我们最终实现的效果如图1所示。当用鼠标单击某个Tab时,就会切换到该Tab页。

本实例的文件位于网页学习网CSS教程资源“第12章\02\tab.htm”。该目录下还有一个tab-hover.htm文件。

二者的区别是,在tab.htm中需要鼠标单击才能实现换页,而在tab-hover.htm中,鼠标指针经过某个tab就可以切换到该Tab页,而无需单击鼠标。lodidance.com

图1 当前页面菜单项的超链接
图1 当前页面菜单项的超链接

一、建立基本的Tab面板

Dreameavaer CS3中的Spry是一套丰富的JavaScript框架,可以大幅度简化Web开发的复杂度,提高开发效率。

① 首先安装好Dreamweaver CS3软件,创建一个新文档。先保存这个文件,然后在窗口上侧的“插入”工具栏中选择“Spry”项目。单击从右散第3个按钮,如图2所示。这时在视图窗口中就会出现一个最基本的Tab面板了。

图2 Dreamweaver CS3中提供的Spry
图2 Dreamweaver CS3中提供的Spry

② 保存这个页面,在浏览器中预览,效果如图3所示。这个Tab面板就已经做好了,非常简单。

图3 Spry生成的基本Tab面板效果
图3 Spry生成的基本Tab面板效果

③ 现在查看一下页面的源代码,可以看到该页面使用了一个JavaScript文件和一个CSS文件。在向服务器上传这个页面的时候,同时要把这两个文件也要上传到相应的目录中,否则页面就无法正常工作了。

折叠XML/HTML 代码复制内容到剪贴板
  1. <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>  
  2. <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />  

④ 再查看一下它的HTML结构,如下:

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2. <div id="TabbedPanels1" class="TabbedPanels">  
  3.   <ul class="TabbedPanelsTabGroup">  
  4.     <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>  
  5.     <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>  
  6.   </ul>  
  7.   <div class="TabbedPanelsContentGroup">  
  8.     <div class="TabbedPanelsContent">内容 1</div>  
  9.     <div class="TabbedPanelsContent">内容 2</div>  
  10.   </div>  
  11. </div>  
  12. <blockquote> </blockquote>  
  13. <script type="text/javascript">  
  14. <!--   
  15. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");   
  16. //-->  
  17. </script>  
  18. </body>

可以看到,通过一些div和列表定义了这个面板的结构,最外层div的id为“TabbedPanelsl”。里面分为两部分,上面是一个uI列表,id为“TabbcdPanelsTabGroup”,它容纳了各个Tab,每个Tab就是一个列表项;下面是一个div,里面有与Tab个数相同的div,每一个里面放置相应的Tab页内容。

⑤ 如果需要增加Tab的个数,可以选中整个Tab面板,然后在窗口下侧的如图4所示的“属性“面板中单击“加号”按钮。如果希望调整几个Tab之间的顺序,可以通过旁边的三角形箭头按钮实现。最右边的“默认面板”下拉列表用于选择几个Tab页面中,哪一个作为默认打开的页面。

图4 在Dreamweuvcr CS3中可以增加或删除Tab
图4 在Dreamweuvcr CS3中可以增加或删除Tab

下面的任务就是以Spry生成的Tab面板为基础,通过对CSS样式的设置,实现更为美观的Tab面板。读者可以根据讲解的方法,设计出自己己希望的Tab面板效果。

二、准备背景图片

各个Tab的宽度可以自动适应Tab文字的宽度,并且当鼠标指针经过某个Tab时,会发生颜色变化,如图1所示。

显然,这个Tab的效果需要背景图片来实现,因此要在Fireworks或者Photoshop等图像处理软件中制作3个图像,分别用于当前Tab、其他的Tab和鼠标指针经过的Tab,如图5所示。

 
 
图5 本案例所用到的背景图片

图5中的边线为2像素宽,整个图像200像素宽.30像素高,为了美观,可以做出一些装饰效果,例如图中的投影效果。为了Tab的背景能够适应文字的宽度,显然这里需要使用滑动门技术。

三、设置整体的CSS样式

下面就开始为它设置CSS。前面已经提到,Dreamweaver已经自动生成了一个CSS文件SpryAssets/SpryTabbedPanels.css.我们只需要打开它,然后在它的基础上修改就可以了。

注意:只能修改样式,而不能修改已经存在的选择器名称,否则就无法实现相应的功能了。

折叠CSS 代码复制内容到剪贴板
  1. .TabbedPanels {   
  2.     margin0px;   
  3.     padding0px;   
  4.     floatleft;   
  5.     clearnone;   
  6.     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/  
  7. }

其作用是对整体进行设置,可以不用改,也可以把宽度改为固定宽度,例如500px。然后找到第2段,代码如下:

折叠CSS 代码复制内容到剪贴板
  1. .TabbedPanelsTabGroup {   
  2.     margin0px;   
  3.     padding0px;   
  4. }

这段的作用是设置Tab组的样式,也就是uI列表的总体样式,在本案例中不用修改。

四、设置单个Tab的CSS样式

接下来就到关键的位置了,找到如下样式代码。

折叠CSS 代码复制内容到剪贴板
  1. .TabbedPanelsTab {   
  2.     positionrelative;   
  3.     top1px;   
  4.     floatleft;   
  5.     padding4px 10px;   
  6.     margin0px 1px 0px 0px;   
  7.     fontbold 0.7em sans-serif;   
  8.     background-color#DDD;   
  9.     list-stylenone;   
  10.     border-leftsolid 1px #CCC;   
  11.     border-bottomsolid 1px #999;   
  12.     border-topsolid 1px #999;   
  13.     border-rightsolid 1px #999;   
  14.     -moz-user-select: none;   
  15.     -khtml-user-select: none;   
  16.     cursorpointer;   
  17. }

这段的作用是设定各个Tab的样式,下面简要描述基本思路。

首先将postion属性设置为相对定位(relative),这样的目的是配合后面的top:1px,使Tab能够向下移动1个像素,使Tab最下面的1像素高度能够和下面内容区域的上边框有1个像素的重合。本案例中,由于边框的宽度为2像素,因此这里将“top:1px”改为“top:2px”。

然后将padding和margin都暂时设置为0,将背景设置为前面准备好的图像文件,然后删除4行关于border的样式,重新设置文字样式。

此外,为了使用滑动门技术来设定两层背景图像,这里将display属性设置为blcok,并确定高度为30像素。

修改完成后,这段代码如下所示:

折叠CSS 代码复制内容到剪贴板
  1. .TabbedPanelsTab {   
  2.     display:block;   
  3.     height:30px;   
  4.     floatleft;   
  5.     positionrelative;   
  6.     top2px;   
  7.     padding0px 0px 0px 15px;   
  8.     margin0px 0px 0px 0px;   
  9.     background:url(‘tab-back.gif‘no-repeat;   
  10.     list-stylenone;   
  11.     cursorpointer;   
  12.     color:#fff;   
  13.     fontbold 14px  Arial;   
  14.     -moz-user-select: none;   
  15.     -khtml-user-select: none;   
  16. }

这时效果可以看到基本的雏形已经产生了。

 

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