第一次接触thickbox的时候感觉就被标签参数弄糊涂了,不过看了源代码后,自己在使用的过程中也还是学到了一点东西,在这这里
给初‘用’thickbox的朋友们一个小帮忙。还请高手多多指点。
一、首先说下参数
a类型: <a href="#TB_inline?width=344&inlineId=mydiv&modal=true" class="thickbox">显示</a>
input类型: <input class="thickbox" alt="#TB_inline?width=285&height=392&inlineId=MyDiv&modal=true"
onclick=" GetData('<%# Eval("STID") %>')" type="button" value="修改"/>
1、在使用thick的时候,参数中的TB_iframe说明灰色中间弹出的thickbox是通过加载另外一个文件来导入的
2、参数中的#TB_inline和inlineId=divname说明灰色中间弹出的thickbox是通过加载当前文件的一个div或则其他元素来的
3、#TB_inline和inlineId=divname这两个标签的要同时存在的,因为在thickbox.js库中是首先判断参数中是否存在TB_inline后接着
来获取标签inlineId的值的,若参数中没有标签TB_inline就不会判断inlineId的值的了
4、而参数中的标签"TB_iframe”和“#TB_inline与inlineId=divname”这两种情况是对立的,只能出现一种情况,因为thickbox要嘛是
通过加载外部文件,要嘛就是加载当前页面的某个元素,如div元素,而参数中的width和height是用来判断thickbox的大小的
二、使用中碰到的一些问题
1、在说说在使用iframe子页面中使用thickbox,然后父页面调用iframe子页面的一个错误问题。
一开始在网上找到了一些解决办法来让thickbox在父页面中也是全屏显示的问题,顺便再这里也在说明下,方法如下:
将
tb_show(t,a,g); 改成
window.parent.tb_show(t,a,g);
然后在父页面和iframe子页面中都要写上几个js文件的引用,切忌:
他们是thickbox.css、jquery.js、thickbox.js
这三个文件一定要在两个页面中都要以后用
2、然后在这里可能还会遇到一个问题。在使用加载当前页面的时候,即在参数中有标签:、#TB_inline和inlineId=divname。thickbox虽然是在父页面中全屏显示了,但是在父页面查看的时候thickbox的加载页面中看不到数据,调试后发现$('#' + params['inlineId'])为空对象,但是在iframe子页面查看的时候是看得到数据的,一个解决办法是:把thickbox.js中的
$('#' + params['inlineId'])改成
window.frames["myiframe"].$('#' + params['inlineId'])。
3、在ie6、ie7、ie8中都要正常显示的代码是:
把一开始的function tb_position()函数全部替换成如下:
function isIE6()
{
return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;
}
function tb_position() {
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if(isIE6())
{
if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
{ // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
else
{
if (jQuery.browser.msie)
{ // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
}
}
这样在ie6、7、8中都显示正常了。
4、但是在ie6中会有个小问题就是隐藏了滚动条。
解决方法如下:
找到下面这两行代码,把它们屏蔽了
$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");
ok,接下来貌似所有关于thickbox的所有的问题都解决了,哈
相关推荐
jquery插件thickbox的使用方法
thickbox的具体使用方法 有具体的实例
ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌...ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.
ThickBox 3_1 <br>最新的ThickBox JS库,使用方便。 <br>具体参考:http://jquery.com/demo/thickbox/
ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层ThickBox3.1弹出层
thickbox插件可以实现页面模态框的效果,并且兼容大部分的浏览器。
ThickBox 3.1调用方法+实例演示.zip欢迎下载!!!
thickbox3.1.zip 弹出div 显示图片
图片及产品展示javascript特效
Thickbox 3.1插件包,其中包裹Thickbox 3.1_js文件和thickbox.css样式包和所需注释及参考
thickbox用法说明以及一些例子thickbox用法说明以及一些例子thickbox用法说明以及一些例子thickbox用法说明以及一些例子thickbox用法说明以及一些例子
http://jquery.com/demo/thickbox/#examples 这里是一个例子,在网上找到了个上述例子的一个源文件
thickbox一些非常炫的实例。供学习者参考。
thickbox是由 Cody Lindley开发的一个jQuery插件。本thickbox3.1实例
使用thickbox时,经常会往回带值,比如,用thickbox显示上传一张图片,在关闭得时候,将上传后的图片路径返回到原来的页面。类似的操作很多,写了一个小实例,希望能对一些朋友有所帮助。
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
用 jquery 和 thickbox 实现图片浏览
thickbox的使用.docthickbox的使用.docthickbox的使用.docthickbox的使用.docthickbox的使用.doc
thickBox 下载 回传值 thickBox 下载 回传值 thickBox 下载 回传值
该文件中包括了thickbox 的基本样式,可配置显示方式 以及 加载图片以及其路径