基于CSS Sprites網頁選項卡的設計與實現

摘要：本文通過分析CSS Sprites的原理、網頁選項卡的設計思路、及其兼容性等問題。先把表示選項卡狀態(tài)的多張圖片拼合成一張圖，使用CSS Sprites定位表示選中與未選的狀態(tài)，再結合JQuery綁定鼠標事件和控制選項卡狀態(tài)，實現選項卡的導航與內容切換功能。

關鍵詞：選項卡 CSS Sprites 網頁

選項卡在信息分類、界面交互、用戶體驗等方面有著良好的效果。在桌面應用程序中，由操作系統(tǒng)提供選項卡控件，開發(fā)程序只要從控件庫中引用該插件即可；但網頁應用中，沒有選項卡這類控件，需要開發(fā)人員自定義設計與實現，實現方法有兩種，第一種方法是使用ActiveX控件，其優(yōu)點在于能夠直接引用桌面程序的選項卡，簡單快捷；缺點是ActiveX控件在瀏覽器中必須得到用戶的信任許可安裝，才能正常使用。從易用性上，用戶會并不喜歡在瀏覽時得到一個提示安裝控件的提示；從安全角度，眾多用戶都會拒絕這樣的第三方控件，導致ActiveX未能加載的網頁錯誤。第二種方法是使用CSS Sprites（CSS圖像拼合技術）切換圖像的方法實現，通過多張圖片來表示操作狀態(tài)，并在狀態(tài)改變時更新顯示區(qū)域的內容即可，其優(yōu)點在于無需控件支持，不受瀏覽器的限制；缺點在于用戶需要編寫選項卡相應事件，比如鼠標經過、移動時的響應操作等功能，但在結合JQuery客戶端框架的功能下，實現這些功能已經是十分簡單快捷的事情了。

1 原理與技術要點

1.1 CSS Sprites CSS Sprites原理是通過CSS屬性background-image（背景圖片路徑）組合background-repeat（背景重復選項）、background-position（背景位置）等來實現，通過調整background-position的X和Y坐標的數值，背景圖片就能以不同的面貌呈現。其實圖片整體面貌沒有變，由于圖片位置的改變，在容器中顯示指定的部分，容器之外的圖片區(qū)域被遮擋。根據CSS規(guī)范，其語法如下：

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”的導航背景圖片為未選中狀態(tài)。②修改“導航2”的導航背景圖片為選中狀態(tài)。③隱藏“內容1”的文字。④顯示“內容2”的文字。

其中①和②是改變顯示狀態(tài)，首先兩種狀態(tài)的圖拼合成一張圖片，使用CSS Sprites的原理，再修改background-position的顯示位置，分別定義sel樣式為選中狀態(tài)， unsel樣式為未選中狀態(tài)，最后結合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分析，需要三張圖片：選中狀態(tài)圖片、未選狀態(tài)圖片、擴展線圖片，打開圖像編輯軟件，新建空白透明畫布，把準備拼合的每個圖像放到畫布中，并且圖與圖之間用合適的空白間隔，如圖2所示，保存圖像時選擇GIF或PNG格式保存圖像，這兩種格式均支持畫布背景透明，便于網頁布局。把這三張圖按CSS Sprites的方式組合到一個網格上，CSS Sprites拼合的優(yōu)點在于壓縮圖片的存儲空間，減少HTTP請求連接數。

2.2 HTML設計

第一個div容器實現導航切換，用ul列表元素水平方向填充，其中第一和最后li元素分別表示兩個過度線，用于改善選項卡的視覺效果。第二個div容器包括若干div子容器，子容器的數量與有效選項卡數量相同。可以結合動態(tài)網頁，從數據庫中讀取數據，再綁定到相應的子容器中，即可實現動態(tài)內容。

2.3 樣式設計 基于圖2的sprites.gif圖片定義未選中、選中狀態(tài)和擴展線的樣式如下：①未選中狀態(tài)的位置從左上角開始，樣式定義為：.unsel{background：url（sprites.gif） no-repeat}。②選中狀態(tài)的位置從（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智能題庫訓練系統(tǒng)的設計與實現.電腦知識與技術，2011年23期.

[3]單東林.鋒利的JQuery.人民郵電出版社.2009.