作者j87b0003 (10Ways-拥抱高雄)
看板Ajax
标题[教学] thickbox使用技巧
时间Thu Nov 22 01:28:55 2007
原始网站：
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
1F：推 secobarbital:推荐这篇文章^^ 11/22 03:54
2F：推 j87b0003:他说的例二，那个是要写在哪里？ 11/22 13:17
3F：→ carls:jQuery1.2.1似乎不支援，要用旧版的. 11/22 23:24