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的事件。
以下是代码片段: <a href="大图的URL" title="简介" class="thickbox"><img src="小图的URL" border="0"/></a> |
以下是代码片段: <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> |
以下是代码片段: $(function() { tb_init("#PicList a[img]");}); |
以下是代码片段: tb_init('a.thickbox, area.thickbox, input.thickbox'); //引号里的是thickbox的默认选择器,你可以使用例一内这样的自定义选择器 |
以下是代码片段: <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); });}); |
2. 如何让thickbox能在子ifreame中点击,在父ifreame中显示
只需要修改一下
thickbox的源代码就能达到这样的效果
父页面的代码
子页面的代码
- function tb_init(domChunk){
- $(domChunk).click(function(){
- var t = this.title || this.name || null;
- var a = this.href || this.alt;
- var g = this.rel || false;
- if(a.indexOf('TB_iniframe') != -1) //检测是否有TB_iniframe参数
- {
- window.top.tb_show(t,a,g);
- }
- else
- {
- tb_show(t,a,g);
- }
- this.blur();
- return false;
- });
- }
function tb_init(domChunk){
$(domChunk).click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
if(a.indexOf('TB_iniframe') != -1) //检测是否有TB_iniframe参数
{
window.top.tb_show(t,a,g);
}
else
{
tb_show(t,a,g);
}
this.blur();
return false;
});
}
父页面的代码
- <link href="thickbox.css" rel="stylesheet" type="text/css">
- <script src="jquery.js"></script>
- <script src="thickbox.js"></script>
- <style type="text/css">
- <!--
- #Layer1 {
- position:absolute;
- left:286px;
- top:132px;
- width:878px;
- height:430px;
- z-index:1;
- }
- -->
- </style>
- <div id="Layer1">
- <iframe src="demo.html" width="100%" height="100%"></iframe>
- </div>
<link href="thickbox.css" rel="stylesheet" type="text/css">
<script src="jquery.js"></script>
<script src="thickbox.js"></script>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:286px;
top:132px;
width:878px;
height:430px;
z-index:1;
}
-->
</style>
<div id="Layer1">
<iframe src="demo.html" width="100%" height="100%"></iframe>
</div>
子页面的代码
- <link href="thickbox.css" rel="stylesheet" type="text/css">
- <script src="jquery.js"></script>
- <script src="thickbox.js"></script>
- <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