thickbox使用技巧

1.自定义显示

thickbox是一个不错的对话框插件，不过官方站提供的使用方法具限性很大。比如，我页面上有个缩略图，点击之后用thickbox显示大图。使用官方的方法：

以下是代码片段： <a href="大图的URL" title="简介" class="thickbox"><img src="小图的URL" border="0"/></a>

这种方法虽然方便，但局限性很大。
第一、你必须为每个这样的img标签外套一个a标签
第二、只能用class="thickbox"让thickbox去绑定事件
第三、不能自己定义事件
第四、当使用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的默认选择器，你可以使用例一内这样的自定义选择器

例三。我想点击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的事件。

2. 如何让thickbox能在子ifreame中点击,在父ifreame中显示

只需要修改一下thickbox的源代码就能达到这样的效果

Java代码

1. function tb_init(domChunk){  
2.     $(domChunk).click(function(){  
3.     var t = this.title || this.name || null;  
4.     var a = this.href || this.alt;  
5.     var g = this.rel || false;  
6.      if(a.indexOf('TB_iniframe') != -1) //检测是否有TB_iniframe参数  
7.      {  
8.           window.top.tb_show(t,a,g);  
9.      }  
10.      else  
11.      {  
12.       tb_show(t,a,g);  
13.      }   
14.     this.blur();  
15.     return false;  
16.     });  
17. }  

[java] view plaincopy

1. function tb_init(domChunk){  
2.     $(domChunk).click(function(){  
3.     var t = this.title || this.name || null;  
4.     var a = this.href || this.alt;  
5.     var g = this.rel || false;  
6.      if(a.indexOf('TB_iniframe') != -1) //检测是否有TB_iniframe参数  
7.      {  
8.           window.top.tb_show(t,a,g);  
9.      }  
10.      else  
11.      {  
12.       tb_show(t,a,g);  
13.      }   
14.     this.blur();  
15.     return false;  
16.     });  
17. }  

父页面的代码

Java代码

1. <link href="thickbox.css" rel="stylesheet" type="text/css">  
2. <script src="jquery.js"></script>  
3. <script src="thickbox.js"></script>  
4. <style type="text/css">  
5. <!--  
6. #Layer1 {  
7.     position:absolute;  
8.     left:286px;  
9.     top:132px;  
10.     width:878px;  
11.     height:430px;  
12.     z-index:1;  
13. }  
14. -->  
15. </style>  
16. <div id="Layer1">  
17. <iframe src="demo.html" width="100%" height="100%"></iframe>  
18. </div>  

[java] view plaincopy

1. <link href="<span class="hilite1">thickbox</span>.css" rel="stylesheet" type="text/css">  
2. <script src="jquery.js"></script>  
3. <script src="<span class="hilite1">thickbox</span>.js"></script>  
4. <style type="text/css">  
5. <!--  
6. #Layer1 {  
7.     position:absolute;  
8.     left:286px;  
9.     top:132px;  
10.     width:878px;  
11.     height:430px;  
12.     z-index:1;  
13. }  
14. -->  
15. </style>  
16. <div id="Layer1">  
17. <iframe src="demo.html" width="100%" height="100%"></iframe>  
18. </div>  

子页面的代码

Java代码

1. <link href="thickbox.css" rel="stylesheet" type="text/css">  
2. <script src="jquery.js"></script>  
3. <script src="thickbox.js"></script>  
4. <a href="man.jpg?TB_iniframe=true" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a>

原文：

1.http://www.xland.com.cn/article/29/33/0710/24847.htm

2.http://gznofeng.javaeye.com/blog/246488