[教學] thickbox使用技巧
原始網站：http://0rz.tw/c13lA
thickbox是一個不錯的對話框插件，不過官方站提供的使用方法具限性很大。比如，我頁面上有個縮略圖，點擊之後用thickbox顯示大圖。使用官方的方法：
<a href="大圖的URL" title="簡介" class="thickbox"><img src="小圖的URL" border="0"/></a>
第一、你必須為每個這樣的img標簽外套一個a標簽
第二、只能用class="thickbox"讓thickbox去綁定事件
第三、不能自己定義事件 Www.Chinaz.com
第四、當使用AJAX載入頁面後，載入的頁面內的這些DOM不會被thickbox綁定
稍稍看了下thickbox的代碼，其實以上問題完全可以使用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標簽下的img使用thickbox，代碼如下：
以下為引用的內容：
$(function() {
tb_init("#PicList a[img]");});
例二、我用AJAX載入了一段HTML，但該HTML裏的class="thickbox"這樣的標簽點擊了沒有任何反應。解決此問題只要在AJAX載入HTML並更新到頁面後執行下以下代碼：
tb_init('a.thickbox, area.thickbox, input.thickbox'); //引號裏的是thickbox的默認選擇器，你可以使用例一內這樣的自定義選擇器 Chinaz
例三、我想點擊img標簽後顯示thickbox，不想在img標簽外面再套<a url="大圖" class="thickbox">這樣的標簽。縮略圖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改成你想觸發thickbox的事件。
--
得罪，就咒殺他。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.56.141.142
推
11/22 03:54, , 1F
11/22 03:54, 1F
推
11/22 13:17, , 2F
11/22 13:17, 2F
→
11/22 23:24, , 3F
11/22 23:24, 3F
Ajax 近期熱門文章
PTT數位生活區 即時熱門文章
