基于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规范，其语法如下：

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加载完成后，再绑定鼠标在选项卡上的单击事件：

$（function（）{ //当DOM加载完成时执行

//选中ul中除第一和最后之外的所有li元素，即有效选项卡

$div_li=$（"ul li"）.filter（"：not（：first）：not（：last）"）；

$div_li.click（function（）{

//去掉之前选中的样式

$div_li.filter（"li[class=tabselect]"）.attr（"class"，"unsel"）；

$（this）.attr（"class"，"sel"）；//给选中选项卡加上样式

//链式操作：先显示选中选项卡容器，再把其他的容器隐藏

$（"#content div"）.eq（$div_li.index（this））.show（）.siblings（）.hide（）；

}）；

}）；

3 结束语

当前WEB技术日新月异，本文通过分析CSS Sprites的原理、结合JQuery框架设计了一个简易的网页选项卡，实现了的导般和内容切换功能，这并不算什么新技术，只是一些常用技术的综合应用和总结，通过实例开拓网页设计者的思路，起到抛砖引玉的作用。

参考文献：

[1]覃秋密，韦永军，蒋家斌.CSS Sprites提升网页加载速度的应用研究.电脑知识与技术，2011年27期.

[2]韦永军，覃秋密.基于AJAX智能题库训练系统的设计与实现.电脑知识与技术，2011年23期.

[3]单东林.锋利的JQuery.人民邮电出版社.2009.