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("")? $("#TB_overlay").click(TB_remove)? $(window).resize(TB_position)? $(window).scroll(TB_position)? $("#TB_overlay").show()? $("body").append("")?

如你所見，在文檔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("" + ""close"+caption+")? $("#TB_closeWindowButton").click(TB_remove)?

另外，遠程文件將使用jQuery的load()函數導入。

$("#TB_ajaxContent").load(url, function(){

轉載于:https://www.cnblogs.com/myssh/archive/2009/06/05/1497135.html

總結

以上是生活随笔為你收集整理的jQuery教程（十三）jQuery Lightbox （插件）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。