thickbox 插件研究小结
thickbox 效果如下,并能满足一般开发需求,
效果演示:http://www.blueidea.com/articleimg/2007/12/5182/tickbox_demo.html
效果下载地址:http://www.blueidea.com/download/product/2007/5182.asp
同事还给我推荐了另两款类似插件:window.jquery和artDialog;目前还没有研究,现在先说说thickbox使用上的一些个人总结
1.使用前需先在<head>中引入3个文件
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script> /*jquery库*/
<script src="thickbox-compressed.js" type="text/java可script"></script> /*thickbox插件*/
<link rel="stylesheet" href="thickbox.css" type="text/css" /> /*弹出层样式*/
2.相关参数
在说相关参数之前 我从个人角度介绍一个thickbox插件
thickbox插件就是一个<a></a> a标签调用的,所以他的相关参数也就是a标签有关
class="thickbox" 调用特效（必须） //也就是调用插件的a标签的class中必须有thickbox
height 打开页面的高度；
width 打开页面的宽度；
title="Iframe(Auto Hide)" title的内容；
keepThis=true
TB_iframe=true 设置后iframe中的thickbox还有效果 （适用于thickbox嵌套）
#TB_inline 调用当前页面的层；
inlineId 当前页面层的ID；
modal=true 表示禁用title，去掉即可显示title及可自动关闭；
3.具体的应用可分为以下几种
1> 单个图片
<a href="big.jpg" title="点击小图看大图" class="thickbox"><img src="small.jpg" alt="Single Image" /></a> /*title控制显示的标题显示*/
2>一组图片 (设置一组相同的rel属性) //用 jquery-1.1.3.1.pack.js 时有效，更高级别的JQ库只会出现全屏黑
<a href="1.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="1_t.jpg" alt="Plant 1" /></a>
<a href="2.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="2_t.jpg" alt="Plant 2" /></a>
<a href="3.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="3_t.jpg" alt="Plant 3" /></a>
<a href="4.jpg" title="1" class="thickbox" rel="gallery-plants"><img src="4_t.jpg" alt="Plant 4" /></a>
3>内嵌内容 /*可设定弹出层的高度、宽度、inlineId 控制显示的内容、modal控制是否显示标题栏*/
点击按钮显示（属性加在alt中）
<input type="button" alt="#TB_inline?height=200&width=300&inlineId=test" title="按钮" value="显示" class="thickbox" />
点击链接显示（属性加在href中）
<a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" title="链接" class="thickbox">显示</a>
<div id="test" style="display:none">这里是隐藏的内容</div>
4>iFramed内容
<a href="boxs.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" title="显示IF" class="thickbox">显示</a>
5>Ajax内容
<a href="box.html?height=350&width=350&modal=true" title="Ajax载入，页面无法查看源代码" class="thickbox">Example</a>
4.自定义内容
把两个$("#tb_overlay").click(tb_remove);去掉就可以取消掉
5. 总结
1>thickbox共有3种关闭弹窗的方式 close按钮 、key（左键点击） 、Esc键 ,可根据自己的需要修改thickbox中对应的代码
2>设置 modal=true时会屏蔽 title栏 此时3种关闭的方式也会清除，关闭方法需自行添加 tb_remove();
本文原著http://blog.163.com/baijianwei827@126/blog/static/16879233420123109344997/ 不错的参考,感谢
6.个人使用时候遇到的问题
我是用的ajax的应用.调用插件的a标签是这样写的
<a href="newform2.html?KeepThis=true&TB_iframe=true&height=460&width=250&modal=true" class="thickbox" title="">调用表单</a>
我把相关参数都加上了,之前是只指向了html的和宽高,并没有加后边的参数,导致了没效果,google浏览器最好放在wamp服务器上去做,要不无法正常调用过来内容
当&modal=true的时候,调用出来的层中必须有个关闭层的按钮,负责无法关闭,相关参照上边4.自定义内容中的3>关闭层