Cody Lindley 移植的第一版“ Thickbox”讓我第一次感受到了jQuery的魅力。后來他又做了一些 代碼升級以修復(fù)若干跨瀏覽器的兼容性問題。

一些需要注意的地方

$(document).ready 取代了TB_init() 函數(shù)，作用是在每個(gè)包含對象名“thickbox”的鏈接上附加一個(gè)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? })?

當(dāng)這些鏈接被點(diǎn)擊時(shí)，TB_show()函數(shù)就將執(zhí)行。

$("body") .append("")? $("#TB_overlay").click(TB_remove)? $(window).resize(TB_position)? $(window).scroll(TB_position)? $("#TB_overlay").show()? $("body").append("")?

如你所見，在文檔body元素前添加了兩個(gè)div元素。換句話說，這兩個(gè)div元素將被添加在頁面html代碼的body關(guān)閉元素前。

覆蓋的div將使用一個(gè)特定的包含不透明外表的CSS文件指定表現(xiàn)。TB_window的代碼用來通過AHAH在頁面中放置一張圖片或者加入另一個(gè)頁面。$(window).resize 和$(window).scroll 告訴jQuery在用戶重新調(diào)整窗口大小或者拖動頁面翻頁的時(shí)候執(zhí)行TB_position函數(shù)。這是保證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

如果這是一個(gè)圖片文件，則jQuery的append函數(shù)會添加html代碼到適當(dāng)位置。

$("#TB_window").append("" + ""close"+caption+")? $("#TB_closeWindowButton").click(TB_remove)?

另外，遠(yuǎn)程文件將使用jQuery的load()函數(shù)導(dǎo)入。

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

轉(zhuǎn)載于:https://www.cnblogs.com/myssh/archive/2009/06/05/1497135.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。