ThickBox 是基於 jQuery 用 JavaScript 編寫的網頁UI對話窗口小部件. 它可以用來展示單一圖片, 若干圖片, 內嵌的內容, iframed的內容, 或以 AJax 的混合 modal 提供的內容.
特性:
- ThickBox 是用超輕量級的 jQuery 庫 編寫的. 壓縮過 jQuery 庫只15k, 未壓縮過的有39k.
- ThickBox 的 JavaScript 代碼和 CSS 文件只占12k. 所以壓縮過的 jQuery 代碼和 ThickBox 總共只有27k.
- ThickBox 能重新調整大於浏覽器窗口的圖片.
- ThickBox 的多功能性包括(圖片,iframed 的內容,內嵌的內容,AJax 的內容).
- 展示單一圖片（single image）
- 展示圖片集（multiple images）
- 展示內嵌內容（inline content）
- 展示被iFrame的內容（iframed content）
- 展示AJAX內容（AJax content）
- 其他：教程本身還自帶了一個很酷的JS跳轉腳本
- ThickBox 能隱藏 Windows IE 6 裡的元素.
- ThickBox 能在使用者滾動頁面或改變浏覽器窗口大小的同時始終保持居中. 點擊圖片, 覆蓋層, 或關閉鏈接能移除 ThickBox.
- ThickBox 的創作者決定動畫應該因人而異, 所以 ThickBox 不再使用動畫了. 這是特性嗎? 哦, 有人說是呀.
如何實現 ThickBox :1. ThickBox 要求使用 jQuery JavaScript 庫; 正因如此, 你需要外調 jquery.js 文件在你的網頁的 head 元素內, 接著還要外調 thickbox.js 文件 (注意: jquery.JS 必須放在調用資源的第一位). 例子如下:
<script type="text/Javascript" src="path-to-file/jquery.JS"></script> <script type="text/Javascript" src="path-to-file/thickbox.JS"></script>
一旦你外調了 .js 文件, 打開 thickbox.JS 並尋找加載圖片的名字 (loadingAnimation.gif). 找到後, 根據它在你服務器上的位置確定更改它的路徑.
2. 在你的網頁中外調 ThickBox CSS 文件. 例子如下:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/CSS" media="screen" />
或
<style type="text/css" media="all">@import "path-to-file/thickbox.CSS";</style>
或, 打開 thickbox.CSS 文件並復制粘貼樣式到你現有的樣式表中.