首页 > 代码库 > 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 当前页面菜单项的超链接 一、建立基本的Tab面板 Dreameavaer CS3中的Spry是一套丰富的JavaScript框架,可以大幅度简化Web开发的复杂度,提高开发效率。 ① 首先安装好Dreamweaver CS3软件,创建一个新文档。先保存这个文件,然后在窗口上侧的“插入”工具栏中选择“Spry”项目。单击从右散第3个按钮,如图2所示。这时在视图窗口中就会出现一个最基本的Tab面板了。 图2 Dreamweaver CS3中提供的Spry ② 保存这个页面,在浏览器中预览,效果如图3所示。这个Tab面板就已经做好了,非常简单。 图3 Spry生成的基本Tab面板效果 ③ 现在查看一下页面的源代码,可以看到该页面使用了一个JavaScript文件和一个CSS文件。在向服务器上传这个页面的时候,同时要把这两个文件也要上传到相应的目录中,否则页面就无法正常工作了。 折叠XML/HTML 代码复制内容到剪贴板
④ 再查看一下它的HTML结构,如下: 折叠XML/HTML 代码复制内容到剪贴板
可以看到,通过一些div和列表定义了这个面板的结构,最外层div的id为“TabbedPanelsl”。里面分为两部分,上面是一个uI列表,id为“TabbcdPanelsTabGroup”,它容纳了各个Tab,每个Tab就是一个列表项;下面是一个div,里面有与Tab个数相同的div,每一个里面放置相应的Tab页内容。 ⑤ 如果需要增加Tab的个数,可以选中整个Tab面板,然后在窗口下侧的如图4所示的“属性“面板中单击“加号”按钮。如果希望调整几个Tab之间的顺序,可以通过旁边的三角形箭头按钮实现。最右边的“默认面板”下拉列表用于选择几个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 代码复制内容到剪贴板
其作用是对整体进行设置,可以不用改,也可以把宽度改为固定宽度,例如500px。然后找到第2段,代码如下: 折叠CSS 代码复制内容到剪贴板
这段的作用是设置Tab组的样式,也就是uI列表的总体样式,在本案例中不用修改。 四、设置单个Tab的CSS样式 接下来就到关键的位置了,找到如下样式代码。 折叠CSS 代码复制内容到剪贴板
这段的作用是设定各个Tab的样式,下面简要描述基本思路。 首先将postion属性设置为相对定位(relative),这样的目的是配合后面的top:1px,使Tab能够向下移动1个像素,使Tab最下面的1像素高度能够和下面内容区域的上边框有1个像素的重合。本案例中,由于边框的宽度为2像素,因此这里将“top:1px”改为“top:2px”。 然后将padding和margin都暂时设置为0,将背景设置为前面准备好的图像文件,然后删除4行关于border的样式,重新设置文字样式。 此外,为了使用滑动门技术来设定两层背景图像,这里将display属性设置为blcok,并确定高度为30像素。 修改完成后,这段代码如下所示: 折叠CSS 代码复制内容到剪贴板
这时效果可以看到基本的雏形已经产生了。
|
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/937.html |