Ajax改造，第3部分:用jQuery、Ajax選項卡和照片carousel改進現有的網站

Ajax 技術已經改變了大型商用 Web 應用程式的面貌，但是許多小型 Web 網站不具備重新構建整個使用者介面所需的資源。新特性應該能夠解決現實的介面問題並改進使用者體驗，以此證明它們的價值。本系列講解如何用開放源碼的用戶端庫逐步改進使用者介面。在本期中，學習如何使用 DHTML 和 Ajax 把緩慢、混亂、煩人的產品細節頁面改造成快速優雅的頁面。我們將採用漸進式改進方法，從而確保所有使用者代理程式仍然能夠訪問您的網站。

關於本文

本文講解用 Ajax 技術改進一個 Web 1.0 購物網站的步驟。可以 下載 改進之前和之後的應用程式範例原始碼。還可以在作者的 Web 網站上看到這兩個版本的運行效果。除了 Ajax 技術和最佳實務之外，還要學習如何通過漸進式改進、易用性和使用者體驗設計（UxD）原理用 Ajax 改進使用者體驗。

本文假設讀者充分瞭解 HTML 和 CSS，至少基本瞭解 JavaScript 和 Ajax 編程技術。應用程式範例是只使用用戶端代碼構建的；但是，示範的技術也可以應用於任何伺服器端應用程式架構。要想運行樣本網站，至少需要在本地主機上運行一個基本的 Web 服務器。您也可以研究原始碼並在作者的 Web 網站上查看樣本網站的運行效果。

回顧第 1 部分和第 2 部分

本系列的 第 1 部分 和 第 2 部分 介紹了應用程式範例 Customize Me Now，並開始從 Web 1.0 版本到 Ajax 支援的 Web 2.0 版本的改進過程。它們討論了這種改進的業務原因和易用性原因。它們還協助您設定幾個開放源碼工具，包括 jQuery JavaScript 架構以及它的幾個外掛程式。通過使用這些庫，把彈出訊息、離站連結和導航側邊欄替換為模態對話方塊、工具提示和 lightbox，從而改進了 Customize Me Now 的使用者操作流。在這個過程中，採用了漸進式改進原理；在禁用 JavaScript 的情況下，改進的 Web 2.0 應用程式的頁面會自動退化到 Web 1.0 體驗。

第 3 部分的目標

在本期中，我們將把產品細節頁面的內容放到一個選項卡式介面中，從而提高它的可管理性。還要在一個映像 carousel 中顯示產品映像，從而提高對映像的控制能力。您將學習如何通過簡單的 Dynamic HTML（DHTML）或比較複雜的 Ajax 代碼應用這兩種技術。無論採用哪種方法，都應用漸進式改進原理，使頁面在禁用 JavaScript 時仍然是可訪問的。為了實現這些目標，將使用另外兩個 jQuery 外掛程式：用於實現映像投影片的 jCarousel 和用於實現選項卡的 jQuery UI Tabs。

為了理解本期中的概念，先請看一下 Customize Me Now 1.1，這是原樣本網站稍加改進後的版本。我們將通過修改 1.1 版建立 Customize Me Now 2.1，這個版本包含整個系列介紹的所有改進。

兩種產品細節頁面：單頁面和多頁面

在電子商務 Web 網站中，最複雜的部分之一是產品細節部分。網站會把大量關於產品的資訊集中在一起，從簡單的說明和技術規格到從使用者社區收集的內容（比如使用者評論）。當然，還有產品映像，而且每種產品常常有多個映像。從使用者體驗的角度來看，難題在於向使用者顯示決定購買產品所需的資料，同時避免過多的資訊困擾使用者。

在某種程度上，Customize Me Now 1.0 比較容易進行 Ajax 改造。它顯示的產品細節內容很容易放在單一頁面上。在 Customize Me Now 2.0 中，通過使用 jQuery 和 Thickbox，把原來的頁面替換為一個模態對話方塊。這有助於改進從搜尋到購買的使用者操作流程。

但是，現在需求改變了。Customize Me Now 1.1 顯示的產品細節資訊遠遠多於 1.0 版。這些內容包括許多很長的文字區塊和許多大照片（映像來自流行的 Web 2.0 照片分享網站 Flickr）。在 Ajax 技術出現之前，有兩種方法可以顯示如此多的內容：一個很長的滾動頁面（見 圖 1 和 圖 2），或者把頁面分割為多個小頁面，每個文字區塊或照片各有一個頁面（見 圖 3 和 圖 4）。