Jquery插件Thickbox的使用总结及自定义设置

转载 2012年03月23日 11:17:16

ThickBox运行需要的文件

官方下载:

Download thickbox.js or thickbox-compressed.jsThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of thejQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.

首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件,导入 thickbox.css 文件;并且jquery.js 文件放在前面:

<script src="../Scripts/jquery-latest.pack.js" mce_src="Scripts/jquery-latest.pack.js"type="text/javascript">script> <script src="../Scripts/thickbox.js" mce_src="Scripts/thickbox.js"type="text/javascript">script> <link href="../Styles/thickbox.css" mce_href="Styles/thickbox.css"rel="stylesheet" type="text/css" />

最后你只要给元素添加 class=”thickbox” 属性就可以开始用 thickbox

实现了一张图片的弹出展示功能:

<a href="”bg.jpg”" mce_href="”bg.jpg”" class=”thickbox” ><img src="”bg.jpg”"mce_src="”bg.jpg”" alt=”图片”/>a> //只需要指定图片的class为thickbox
弹出框使用方法:
<a href="Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500" title="主页"class="thickbox" a> <input onclick="/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent" title="弹出层" class="thickbox" type="button"value="Ban Another" /> //内嵌内容 <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="标题" class="thickbox" type="button"value="Show" /> <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"class="thickbox">显示隐藏内容a> //遮罩层 URL后面加?KeepThis=true&TB_iframe=true&height=400&width=600 参数字符串中加 modal=true ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true 这样当关闭ThickBox时会调用ThickBox iframe (self.parent.tb_remove())内部的一个tb_remove()函数 所有其他参数字符都必须在TB_iframe 参数之前。URL中所有"TB" 之后的将被移除。 <a href="index.html?keepThis=true&TB_iframe=true&height=250&width=400" title="标题" class="thickbox">打开一个页面a> <ahref="index.html?keepThis=true&TB_iframe=true&height=300&width=500" title="标题"class="thickbox">打开一个页面a> <a href="index.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="标题"class="thickbox">打开一个页面a>

 

自定义设置:

1、弹出窗口(div)右上角的关闭按钮为显示为"close or esc key",而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢?

将thickbox.js文件打开,查找关键字"or esc key",将其删除,并将前面的close更改为[X]或"关闭",然后把文件另存为UTF-8格式,如果不保存为UTF-8的话,将会出现乱码。
2、thickbox 弹出层的遮住层透明度修改

打开thickbox.css查找.TB_overlayBG 进行更改

.TB_overlayBG { background-color:#000filter:alpha(opacity=75)-moz-opacity0.75opacity0.75; }

3、关闭层:如果我们需要自己添加一个关闭按钮或者图片可以使用:

onclick="self.parent.tb_remove();"

4、关闭层刷新父页面,修改关闭方法 :

function tb_remove() { $("#TB_imageOff").unbind("click"); $("#TB_closeWindowButton").unbind("click"); $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();}); $("#TB_load").remove(); if (typeof document.body.style.maxHeight == "undefined") {//if IE 6 $("body","html").css({height: "auto", width: "auto"}); $("html").css("overflow",""); } document.onkeydown = ""; document.onkeyup = ""; //刷新父页面,未指定 window.location.reload(); return false; }

5、thickbox插件默认情况是点击灰色的遮罩层就会关闭取消

把两个$("#TB_overlay").click(tb_remove);去掉就可以取消掉

6、updatepanel回发后thickbox失效的解决方法

只需把以下代码粘贴至页面中就OK了。

使用两种方式自定义jQuery插件

自定义jquery插件可以在函数级别定义也可在对象级别定义,而每种级别的插件都可以传参和不传参。 1.添加jQuery对象级的插件,是给jQuery类添加方法 写法: [javascript] vie...
  • xygg0801
  • xygg0801
  • 2016年12月06日 09:30
  • 1592

15款很有用的jquery时钟插件和教程

jQuery是现在使用最广泛的JS库。在你的网站里里可以使用着15款jQuery时钟插件。对于网站设计和开发人员来说,这是一个好消息。使用它们能使你的网站更美和更吸引人。 1.JDIGICLOCK ...
  • zf900901298
  • zf900901298
  • 2013年11月07日 09:35
  • 6701

jquery插件开发及 jquery自定义函数

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级...
  • zmx729618
  • zmx729618
  • 2016年04月27日 10:56
  • 3610

Jquery插件Thickbox的使用总结及自定义设置

ThickBox运行需要的文件 官方下载: Download thickbox.js or thickbox-compressed.js, ThickBox.css, and ...
  • lijunlinlijunlin
  • lijunlinlijunlin
  • 2014年11月03日 02:52
  • 644

Jquery插件Thickbox的使用总结及自定义设置

http://www.cnblogs.com/dupeng0811/archive/2011/03/11/1981270.html ThickBox运行需要的文件 官方下载: Downloa...
  • north_easter
  • north_easter
  • 2011年10月10日 15:55
  • 370

Jquery插件Thickbox的使用总结及自定义设置

ThickBox运行需要的文件 官方下载: Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loadin...
  • dupeng0811
  • dupeng0811
  • 2011年03月11日 13:00
  • 4600

Jquery插件Thickbox的使用总结及自定义设置

ThickBox运行需要的文件 官方下载: Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the ...
  • wang02011
  • wang02011
  • 2012年12月05日 21:42
  • 598

YII中改变自定义操作的方式并使用thickbox的JQuery插件窗出窗口

在YII中,后台管理数据的界面是这样的: 有时候想改成这样子的 并且,点击颜色,尺码,查看。。时,会窗出如下窗口: 这时,就可以按下面的代码去操作: thickbox.css"...
  • u013718071
  • u013718071
  • 2014年03月18日 10:56
  • 438

jquery插件thickbox遮罩层的的使用

ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合...
  • liuensong
  • liuensong
  • 2011年10月17日 10:51
  • 358

Jquery插件Thickbox的使用

最近项目需要用到弹出层!最后找到Thickbox,它能在浏览器界面上显示非常棒的弹出框,可以显示单图片,多图片,AJAX 请求内容或链接内容。感觉挺不错的!Thickbox的官方网址:http://j...
  • lijunlinlijunlin
  • lijunlinlijunlin
  • 2014年11月03日 00:18
  • 354
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery插件Thickbox的使用总结及自定义设置
举报原因:
原因补充:

(最多只允许输入30个字)