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'><img src='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'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>"); $("#TB_closeWindowButton").click(TB_remove);
另外，远程文件将使用jQuery的load()函数导入。
$("#TB_ajaxContent").load(url, function(){
一位叫Klaus的朋友编写了一个小插件， 用jQuery实现可用性极佳的javascript表格。
设置好正确的(x)HTML 和CSS后，你可以像下面那样创建表格：
$.tabs(”container”); first tab on by default 如果你像在默认位置“上方”再添加一个表格： $.tabs(”container”, 2); second tab on
Klaus这里 示例，你可以看看最终效果。
我的改版
我稍微修改了Klaus的代码，添加了一个简单的表单用来生成表格的表头。
用法：
非常简单。只需要输入每个表格的表头（最多5个），然后点击表单下方的按钮。下一个页面将生成结果HTML代码，你可以复制然后粘贴到文件中。
你还需要 下载Klaus网站的CSS文件，做些你自己的修改，当然还要上传jQuery框架库到你的服务器上。
这里是表格生成器的地址。
Cody Lindley ，Thickbox的作者，日前发布了 jTip - jQuery 工具提示。
我对其中很多想法和思路拍案叫绝。我知道你已经看过很多类似的工具提示代码了。但是，Cody 的方法已经在我的工作中显露出了闪光点。
当我检查HTML代码时，我发现了一个大问题，可访问性。链接在javascript关闭的时候无法工作。我并不是倾向于一定要实现全面的可访问性，只是在这里我认为可以有其他更具亲和力的方式实现相同的功能。
尤其是，我个人不喜欢那种为了可访问性而去牺牲可用性来实现在提示框上链接另一个页面链接的方法。我喜欢这个提示框 - 不是对Cody不尊重，只是在我这里我“需要”它能够在各种情况下工作。
今天我要提供给大家的是Cody的工具提示代码的小小修改。如果你不是Cody工具提示的爱好者的话，我的改版对你来说也许不是很在意。但如果你喜欢他的作品同时希望它可以在javascript关闭的时候照常工作，这个也许是你需要的。
我的改动
让我产生修改想法的，是他的代码在Yahoo上的应用。我不喜欢他使用的代码：
<a href="yahoo.htm?width=175&;link=http://www.yahoo.com" name="Before You Click..." id="yahooCopy" class="jTip">Go To Yahoo</a>
所以我重写了他的部分代码，成了现在这个样子：
<a href="http://www.yahoo.com" rel="yahoo.htm?width=175&link=yahoo&name=Before%20 %20You%20Click..." id="yahooCopy" class="jTip"> Go To Yahoo</a>
改进：HTML标准校验
我的代码可以通过w3.org的测试
改进：命名
在我修改Cody的代码的时候我发现他使用了一个用来存储链接名称的叫做“title”的变量名，这会导致一些混淆。
我标出了这个命名问题，即使我认为这不过是个小小的失误。
改进：可用性
使用我的代码，你可以让每个提示框都含有真实链接地址到另一个文档，不管内部的还是外部的。或者你只是想要那个提示框，不想关心可用性，你同样可以让链接部分留空。
选择权在你。
感谢
Cody提供了伟大的代码，帮助我节省了大量的时间和精力。我的修改只是对原有代码的轻微“调整”，希望朋友们喜欢。