Cody Lindley 移植的第一版“ Thickbox”让我第一次感受到了jQuery的魅力。后来他又做了一些 代码升级以修复若干跨浏览器的兼容性问题。
一些需要注意的地方
$(document).ready 取代了TB_init() 函数，作用是在每个包含对象名“thickbox”的链接上附加一个onClick事件。
function TB_init(){$("a.thickbox").click(function(){var t = this.title || this.innerHTML || this.href;TB_show(t,this.href);this.blur();return false;});
当这些链接被点击时，TB_show()函数就将执行。
$("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");$("#TB_overlay").click(TB_remove);$(window).resize(TB_position);$(window).scroll(TB_position);$("#TB_overlay").show();$("body").append("<div id='TB_load'><div id='TB_loadContent'><imgsrc='images/circle_animation.gif' /></div></div>");
如你所见，在文档body元素前添加了两个div元素。换句话说，这两个div元素将被添加在页面html代码的body关闭元素前。
覆盖的div将使用一个特定的包含不透明外表的CSS文件指定表现。TB_window的代码用来通过AHAH在页面中放置一张图片或者加入另一个页面。$(window).resize 和$(window).scroll 告诉jQuery在用户重新调整窗口大小或者拖动页面翻页的时候执行TB_position函数。这是保证Thickbox始终保持在窗口中心部位的手段。
接下来，Cody查询url的后缀。
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;var urlType = url.match(urlString);if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
如果这是一个图片文件，则jQuery的append函数会添加html代码到适当位置。
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><imgid='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'alt='"+caption+"'/></a>"+ "<div id='TB_caption'>"+caption+"</div><divid='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");$("#TB_closeWindowButton").click(TB_remove);
另外，远程文件将使用jQuery的load()函数导入。
$("#TB_ajaxContent").load(url, function(){