基于CSS Sprites网页选项卡的设计与实现
摘要：本文通过分析css sprites的原理、网页选项卡的设计思路、及其兼容性等问题。先把表示选项卡状态的多张图片拼合成一张图，使用css sprites定位表示选中与未选的状态，再结合jquery绑定鼠标事件和控制选项卡状态，实现选项卡的导航与内容切换功能。
关键词：选项卡  css  sprites  网页
选项卡在信息分类、界面交互、用户体验等方面有着良好的效果。在桌面应用程序中，由操作系统提供选项卡控件，开发程序只要从控件库中引用该插件即可；但网页应用中，没有选项卡这类控件，需要开发人员自定义设计与实现，实现方法有两种，第一种方法是使用activex控件，其优点在于能够直接引用桌面程序的选项卡，简单快捷；缺点是activex控件在浏览器中必须得到用户的信任许可安装，才能正常使用。从易用性上，用户会并不喜欢在浏览时得到一个提示安装控件的提示；从安全角度，众多用户都会拒绝这样的第三方控件，导致activex用div与css实现网页布局代码未能加载的网页错误。第二种方法是使用css sprites（css图像拼合技术）切换图像的方法实现，通过多张图片来表示操作状态，并在状态改变时更新显示区域的内容即可，其优点在于无需控件支持，不受浏览器的限制；缺点在于用户需要编写选项卡相应事件，比如鼠标经过、移动时的响
应操作等功能，但在结合jquery客户端框架的功能下，实现这些功能已经是十分简单快捷的事情了。
1 原理与技术要点
1.1 css sprites css sprites原理是通过css属性background-image（背景图片路径）组合background-repeat（背景重复选项）、background-position（背景位置）等来实现，通过调整background-position的x和y坐标的数值，背景图片就能以不同的面貌呈现。其实图片整体面貌没有变，由于图片位置的改变，在容器中显示指定的部分，容器之外的图片区域被遮挡。根据css规范，其语法如下：
classname{background：（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图片定义未选中、选中状态和扩展线的样式如下：①未选中状态的位置从左上角开始，样式定义为：.unsel{background：url（sprites.gif） no-repeat}。②选中状态的位置从（100px，0）开始，在css sprites中background-position水平向右为负值，样式定义为：. sel{background：url（sprites.gif） no-repeat -100px 0；}。③扩展线的位置从（200px，0）开始，background-position也为负值，样式为：.line{background：url（sprites.gif） repeat-x -200px 0；}。
2.4 代码设计 ①在head中引用jquery库：。②等待文档的dom加载完成后，再绑定鼠标在选项卡上的单击事件：
3 结束语
当前web技术日新月异，本文通过分析css sprites的原理、结合jquery框架设计了一个简易的网页选项卡，实现了的导般和内容切换功能，这并不算什么新技术，只是一些常用技术的综合应用和总结，通过实例开拓网页设计者的思路，起到抛砖引玉的作用。
参考文献：
[1]覃秋密，韦永军，蒋家斌.css sprites提升网页加载速度的应用研究.电脑知识与技术，2011年27期.
[2]韦永军，覃秋密.基于ajax智能题库训练系统的设计与实现.电脑知识与技术，2011年23期.
[3]单东林.锋利的jquery.人民邮电出版社.2009.