Ajax改造，第2部分:使用jQuery、Ajax、工具提示和lightbox改進現有網站

Ajax 技術改變了大型商業 Web 應用程式的外觀，但是許多較小的 Web 網站都不擁有重新構建整個使用者介面（UI）的資源。Ajax 的一些新特效能夠解決實際中的介面問題並改善使用者體驗。通過本系列文章，您可以瞭解如何使用開源用戶端庫讓您的使用者介面變得更為時尚。本文將展示如何使用簡單的 lightbox 和工具提示技術消除快顯視窗和導航死角。在實現的過程中堅持漸進增強（progressive enhancement）原理，確保增強後的 UI 特性不損害網站的可訪問性，確保網站嚴格遵守 Web 標準。

關於本文

本文將逐步引導您使用 Ajax 技術改進一個 Web 1.0 購物網站。您可以下載改進 “之前” 和 “之後” 的應用程式範例原始碼，也可以在作者的 Web 服務器上看到啟動並執行兩個版本。除了 Ajax 技術和最佳實務之外，您還將瞭解到 Ajax 如何通過 漸進增強 原理改善使用者體驗。

本文假設您已經牢固掌握 HTML 和 CSS，基本瞭解 JavaScript 和 Ajax 編程技術。應用程式範例僅使用用戶端代碼構建；本文示範的技術適用於任何伺服器端應用程式架構。要運行樣本網站，至少需要一個在本地主機上啟動並執行基本 Web 服務器。此外，您也可以僅跟隨原始碼在我的 Web 服務器上查看運行中的樣本網站。

重溫“Ajax 改造，第 1 部分”

本系列的 第 1 部分 介紹了應用程式範例 Customize Me Now，並開始將它從 Web 1.0 版本改造成受 Ajax 支援的 Web 2.0 版本。該部分從業務和可用性方面討論了這樣做的必要性。此外，也定義了 漸進增強 並介紹了漸進增強原理如何改進使用者體驗。它還協助您設定了幾個開源工具：jQuery JavaScript 架構和幾個外掛程式，包括 ThickBox、jQuery Forms、jTip 和 GreyBox。使用 ThickBox 和 jQuery Forms 可以流線化使用者流，將導航彎路轉變成了強制回應對話方塊。但這僅僅是改進的一部分。現在，您可以使用 jTip 和 GreyBox 進一步最佳化網站。全部完成後，查看應用程式範例改進“之前”和“之後”的版本並回顧改進的過程。

使用 jTip 將快顯視窗轉換成工具提示

現在已經回顧了第 1 部分中的模式對象的實現，接下來將通過 jTip 把所有快顯視窗轉換成工具提示以最佳化導航。就像 ThickBox 一樣，jTip 很容易實現。對於每一個想要轉換的連結，只需添加如下屬性：

“jTip”的 class 屬性。這個神奇的詞語會警告 jTip 的 Document Object Model (DOM)-解析常式應該把此連結轉換成工具提示。即使此連結元素已經具有 class 屬性，也可以簡單地將“jTip”添加為額外的類。

針對每個連結，id 屬性具有惟一的值，以便 jTip 能夠獲得該連結的對象引用。id 的值是什麼並不重要，只要存在即可。

name 屬性，jTip 使用它在工具提示內呈現標題。同樣，只要屬性存在，它的值是什麼並不重要。如果不想讓標題出現，只需將值設定為空白字串。

將這些屬性添加到標記之後，每個彈出連結如清單 1 所示：

清單 1. jTip 連結所需的 HTML 程式碼

<a class="jTip" name="About Pizza" id="pizza" target="productPopup"
href="productPopup.html?product=A">Pizza</a>

現在只需要調整 CSS。隨 Customize Me Now 1.0 一起包含的 CSS 檔案會以加了紅色底線的文本呈現大多數連結元素，當滑鼠懸浮於其上時，這類文本會變化顏色。使用者都希望單擊加底線的連結就能進入連結，但這些 jTip 連結卻無此功能；當使用者將滑鼠懸浮其上時，就觸發了工具提示。因此，應該改變它們的樣式使之與其他連結稍微不同，但同時又要確保它們充分突出以吸引使用者與之互動。為此，可以用一個新的 CSS 聲明將某些定製樣式添加到 jTip 類。保持紅色不變，但去除底線和懸浮狀態。與此同時，添加一個新 CSS 聲明以控制工具提示內容的寬度，從而不需要再用到捲軸。這個新聲明基於這樣一個事實：jTip 把它的工具提示和 JT 的 id 屬性包裝在同一個 div 裡。最後，建立另一個聲明以在工具提示內容內隱藏主標題；這樣，就可以使用 jTip 通過連結的 name 屬性自動產生的 header 了。完成之後，新的 CSS 如清單 2 所示：

清單 2. 用於 jTip 的 CSS

/*restyle tooltip links*/
#CMN a.jTip {
text-decoration: none;
color: #930;
}
/*narrow the width of pages that will be rendered by jTip*/
#JT #main.popup {
width: 200px;
padding: 4px;
}
/*hide the headline of pages that will be rendered by jTip*/
#JT #main.popup h1 {
display: none;
}

如果在 網頁瀏覽器內查看 2.0 Search Results 頁面並將滑鼠懸浮於產品和產品選項之上，就會看到運行中的 jTip，如圖 1 所示：

圖 1. 運行中的 jTip 的截圖