在網(wǎng)上看到有不少?zèng)]用過的技巧，抄下來，以免忘記！
到
http://jquery.com/demo/thickbox/
下載需要的js及css文件
分別保存到目錄
--js
--css
--images
中，
使用thickbox提供的方法，可以更加自由的用js控制元素動(dòng)作：
1. tb_init()初始化，等于給a標(biāo)簽加class。
Ajax加載內(nèi)容后用tb_init(’a.thickbox, area.thickbox, input.thickbox’);
2.等于a標(biāo)簽的點(diǎn)擊動(dòng)作:tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);
一、 在文件的<head></head>中插入
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
然 后修改thickbox.js指名loadingAnimation.gif 這個(gè)圖片的路徑
二、 在<head></head>中插入CSS
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
例子
單個(gè)圖片時(shí):
增加一個(gè)<a href="">然后給連接加一個(gè)class="thickbox"
<a href="images/single.jpg" title="caption" class="thickbox">圖片</a>
title加連接
title="<a href="images/aa.jpg">my link</a>"
想法來自lightbox
多張圖片時(shí):
與單個(gè)圖片的區(qū)別就是多了一個(gè)same rel element
<a href="images/a.jpg" class="thickbox" rel="test" title="測試一">測試一</a>
<a href="images/b.jpg" class="thickbox" rel="test" title="測試二">測試二</a>
顯示一個(gè)層內(nèi)的內(nèi)容時(shí)彈出任意id:
創(chuàng)建立一個(gè)link <a href="">
給 連接增加一個(gè)class屬性class="thickbox"
給連點(diǎn)增加一個(gè)錨點(diǎn):#TB_inline
在錨點(diǎn)的后邊增加字符 串：?height=300&width=300&inlineId=myOnPageContent
在字符串的后邊添 加&modal=true,測必須在彈出的層內(nèi)調(diào)用onclik=tb_remove()多用于隱藏的層
其中的inlineId就是你想 顯示的元素的id
用ifame顯示url
創(chuàng)建立一個(gè)link <a href="">
給連接增加一個(gè)class屬性class="thickbox"
在href屬性中提供想在thickbox中顯示 的url連接
在url后邊添加字符串?KeepThis=true&TB_iframe=true&height=400& amp;width=600
說明Add all other query parameters before the TB_iframe parameters.就是說其它參數(shù)一定要放在TB前
ajax內(nèi)容
用ifame顯示url
創(chuàng)建立一個(gè)link <a href="">
給連接增加一個(gè)class屬性class="thickbox"
在href屬性中提供想在 thickbox中顯示的url連接
在連接后加字符串?height=300&width=300
?
其它技巧
thickbox是一個(gè)不錯(cuò)的對話框插件，不過官方站提供的使用方法具限性很 大。比如，我頁面上有個(gè)縮略圖，點(diǎn)擊之后用thickbox顯示大圖。使用官方的方法：
<a href="大圖的URL" title="簡介" class="thickbox"><img src="小圖的URL" border="0"/></a>
這種方法雖然方便，但局限性很大。
第一、你必須為每個(gè)這樣的img標(biāo) 簽外套一個(gè)a標(biāo)簽
第二、只能用class="thickbox"讓thickbox去綁定事件
第三、不能自己定義事件
第四、當(dāng)使 用AJAX載入頁面后，載入的頁面內(nèi)的這些DOM不會(huì)被thickbox綁定
稍稍看了下thickbox的代碼，其實(shí)以上問題完全可以使用 thickbox自己的方法來解決，以下舉例說明。
例一。 我能自己定位到需要用 thickbox的元素，不想再加上class="thickbox"。HTML如下：
<div id="PicList"> ?? <a href="Pic01.jpg"><img src="Pic01s.jpg" border="0"/></a> ?? <a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a> </div>
需要對id="PicList"里面的a標(biāo)簽下的img使用 thickbox，代碼如下：
$(function() { ?? tb_init("#PicList a[img]"); });
例二。 我用AJAX載入了一段HTML， 但該HTML里的class="thickbox"這樣的標(biāo)簽點(diǎn)擊了沒有任何反應(yīng)。解決此問題只要在AJAX載入HTML并更新到頁面后執(zhí)行下以下代碼：
tb_init(’a.thickbox, area.thickbox, input.thickbox’); //引號(hào)里的是thickbox的默認(rèn)選擇器，你可以使用例一內(nèi)這樣的自定義選擇器
例三。 我想點(diǎn)擊img標(biāo)簽后顯示 thickbox，不想在img標(biāo)簽外面再套<a url="大圖" class="thickbox">這樣的標(biāo)簽。縮略圖URL只不過在大圖URL的后綴前加了s。比如大圖是pic01.jpg、小圖是 pic01s.jpg。使用以下方法可以做到。HTML如下：
<div id="PicList">
?? <img src="Pic01s.jpg" border="0"/>
?? <img src="Pic01s.jpg" border="0"/>
</div>
代碼如下：
$(function() {
?? $("#PicList img").click(function() {
???? tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);
?? });
});
另外，如果想用其它事件，請使將例3里的click改成你想觸發(fā) thickbox的事件。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
