基于CSSSprites网页选项卡的设计与实现.docx

基于CSS Sprites网页选项卡的设计与实现 摘要：本文通过分析CSS Sprites的原理、网页选项卡的设计思路、及其兼容性等问题。先把表示选项卡状态的多张图片拼合成一张图，使用CSS Sprites定位表示选中与未选的状态，再结合JQuery绑定鼠标事件和控制选项卡状态，实现选项卡的导航与内容切换功能。下载 关键词：选项卡 CSS Sprites 网页 选项卡在信息分类、界面交互、用户体验等方面有着良好的效果。在桌面应用程序中，由操作系统提供选项卡控件，开发程序只要从控件库中引用该插件即可；但网页应用中，没有选项卡这类控件，需要开发人员自定义设计与实现，实现方法有两种，第一种方法是使用ActiveX控件，其优点在于能够直接引用桌面程序的选项卡，简单快捷；缺点是ActiveX控件在浏览器中必须得到用户的信任许可安装，才能正常使用。从易用性上，用户会并不喜欢在浏览时得到一个提示安装控件的提示；从安全角度，众多用户都会拒绝这样的第三方控件，导致ActiveX未能加载的网页错误。第二种方法是使用CSS Sprites（CSS图像拼合技术）切换图像的方法实现，通过多张图片来表示操作状态，并在状态改变时更新显示区域的内容即可，其优点在于无需控件支持，不受浏览器的限制；缺点在于用户需要编写选项卡相应事件，比如鼠标经过、移动时的响应操作等功能，但在结合JQuery客户端框架的功能下，实现这些功能已经是十分简单快捷的事情了。 1 原理与技术要点 1.1 CSS Sprites CSS Sprites原理是通过CSS属性background-image（背景图片路径）组合background-repeat（背景重复选项）、background-position（背景位置）等来实现，通过调整background-position的X和Y坐标的数值，背景图片就能以不同的面貌呈现。其实图片整体面貌没有变，由于图片位置的改变，在容器中显示指定的部分，容器之外的图片区域被遮挡。根据CSS规范，其语法如下： classnamebackground：（url） background-repeat background-position background-position：X Y中，X指水平偏移，Y指垂直偏移，可用百分比或像素为单位，左上角为坐标原点，水平向右为负X轴，水平向左为正X轴，垂直向下为负Y轴，垂直向上为正Y轴，如“background-position： -20px -50px；”中，表示图像向右偏移20个像素，向下偏移50个像素开始显示。 1.2 网页选项卡实现的思路 选项卡由导航和内容两部分组成，如图所示，默认选中页框1，当鼠标单击“导航2”时，作过程如下：修改“导航1”的导航背景图片为未选中状态。修改“导航2”的导航背景图片为选中状态。隐藏“内容1”的文字。显示“内容2”的文字。 其中和是改变显示状态，首先两种状态的图拼合成一张图片，使用CSS Sprites的原理，再修改background-position的显示位置，分别定义sel样式为选中状态， unsel样式为未选中状态，最后结合JQuery实现样式修改即可完成。和是控制容器的显示和隐藏，用JQuery操作容器方法来完成。 1.3 JQuery框架JQuery是一个快速、简单的JavaScript函数库，具有轻量级、强大的选择器、出色的浏览器兼容性、链式操作方式等特点。 基本语法：$（HTML元素）.操作方法（） 使用链接操作时，语法可扩展为：$（HTML元素）.操作方法1（）.操作方法2（）.操作方法3（） 使用JQuery与CSS Sprites结合实现网页选项卡的伪代码操作如下： $（“导航1”）.attr（“class”，”unsel”）；/使导航1未选中 $（“导航2”）.attr（“class”，”sel”）；/使导航2选中 $（“内容1”）.hide（）；/隐藏内容1 $（内容2”）.show（）；/显示内容2 最后还要绑定鼠标单击事件，使其响应操作： $（“导航2”）.bind（“onclick”，function（）； 2 应用实例 2.1 图片准备 从图1分析，需要三张图片：选中状态图片、未选状态图片、扩展线图片，打开图像编辑软件，新建空白透明画布，把准备拼合的每个图像放到画布中，并且图与图之间用合适的空白间隔，如图2所示，保存图像时选择GIF或PNG格式保存图像，这两种格式均支持画布背景透明，便于网页布局。把这三张图按CSS Sprites的方式组合到一个网格上，CSS Sprites拼合的优点在于压缩图片的存储空间，减少HTTP请求连接数。 2.2 HTML设计 第一个div容器实现导航切换，用ul列表元素水平方向填充，其中第一和最后li元素分别表示两个过度线，用于改善选项卡的视觉效果。第二个div容器包括若干div子容器，子容器的数量与有效选项卡数量相同。可以结合动态网页，从数据库中读取数据，再绑定到相应的子容器中，即可实现动态内容。 2.3 样式设计 基于图2的sprites.gif图片定义未选中、选中状态和扩展线的样式如下：未选中状态的位置从左上角开始，样式定义为：.unselbackground：url（spri选中状态的位置从（100px，0）开始，在CSS Sprites中background-position水平向右为负值，样式定义为：. selbackground：url（spri扩展线的位置从（200px，0）开始，background-position也为负值，样式为：.linebackground：url（spri代码设计 在head中引用JQuery库：。等待文档的DOM加载完成后，再绑定鼠标在选项卡上的单击事件：3 结束语 当前WEB技术日新月异，本文通过分析CSS Sprites的原理、结合JQuery框架设计了一个简易的网页选项卡，实现了的导般和内容切换功能，这并不算什么新技术，只是一些常用技术的综合应用和总结，通过实例开拓网页设计者的思路，起到抛砖引玉的作用。 参考