使用Thickbox

Thickbox是基于 jQuery的一套成熟的交互UI，能让设计师方便的实现Lightbox特效，以及更多你想不到的功能。
既然jQuery是一个轻量级的脚本库，作为设计师出生的使用者会感到它的使用是相对容易的。运用Thickbox实现Lightbox效果是目前流行的几种实现方法中最灵活、最轻便的一种。除了轻便之外，它所支持的浏览器也相当的广泛：Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+。

安装Thickbox

登陆官方网站获得最新版本的 jQuery和 Thickbox的文件，
Thickbox需要jQuery的脚本库，那么首先应该载入jQuery，再载入Thickbox了。
在META标签内加入如下语句：

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>

这里需要注意的是jQuery的脚本文件必须先于thickbox的脚本文件，同时注意修改文件的路径。
紧接着需要加入Thickbox的CSS文件：

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

当然载入CSS的方法多种多样，这只是一个示范。

使用Thickbox

关于Thickbox的具体使用，可以参考官方网站的示例： [url]http://jquery.com/demo/thickbox/#examples[/url]也可以参考legal翻译的文档。由于原来的链接无法访问，这里只给出原文的存档：
[url]http://pagetalks.com/talks/wp-content/uploads/2008/03/thickbox/thickbox.html[/url]

定制Thickbox

对于大多数实际使用中，原来的CSS文档设置的样式都无法让人满意（看看连Microsoft的官方网站上的Lightbox都那么炫）。在这里给出Thickbox中CSS档的分析：

• #TB_overlay：覆盖原文当背景层ID
• .TB_overlayBG：背景层的背景元素，也就是背景的实体Class
• #TB_window：Thickbox内容窗口的主体ID
• #TB_caption：Thickbox内容窗口左下角的标题和导航所在DIV的ID
• #TB_closeWindow：右上角“Close”链接所在的元素（不知道是DIV还是Span）的ID
• #TB_closeAjaxWindow：Ajax载入窗口中的“Close”链接所在元素（不知道是DIV还是Span）的ID
• #TB_ajaxWindowTitle：左上角标题所在元素的ID
• #TB_title：Thickbox内容窗口顶端元素（包含标题和“Close”链接的容器）的ID
• #TB_ajaxContent：内容容器ID
• #TB_load：载入进度条的ID
• #TB_iframeContent：iFrame元素ID

最近在用Thickbox做ELFVision首页上的作品陈列室“Works”，可以到 ELFVision的首页，点击Works链接看看美化过的Thickbox。不过这个是半成品，还有一些想法要通过jQuery的编程实现，慢慢来吧。