在网上看到有不少没用过的技巧,抄下来,以免忘记!
到
http://jquery.com/demo/thickbox/
下载需要的js及css文件
分别保存到目录
--js
--css
--images
中,
使用thickbox提供的方法,可以更加自由的用js控制元素动作:
1. tb_init()初始化,等于给a标签加class。
Ajax加载内容后用tb_init(’a.thickbox, area.thickbox, input.thickbox’);
2.等于a标签的点击动作:tb_show("",this.src.substring(0,this.src.length-5)+’.jpg’,false);
一、 在文件的<head></head>中插入
<script
type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
src="js/thickbox.js"></script>
然 后修改thickbox.js指名loadingAnimation.gif 这个图片的路径
二、 在<head></head>中插入CSS
<link rel="stylesheet" href="css/thickbox.css" type="text/css"
media="screen" />
例子
单个图片时:
增加一个<a
href="">然后给连接加一个class="thickbox"
<a href="images/single.jpg" title="caption"
class="thickbox">图片</a>
title加连接
title="<a href="images/aa.jpg">my link</a>"
想法来自lightbox
多张图片时:
与单个图片的区别就是多了一个same rel element
<a
href="images/a.jpg" class="thickbox" rel="test"
title="测试一">测试一</a>
<a href="images/b.jpg" class="thickbox" rel="test"
title="测试二">测试二</a>
显示一个层内的内容时弹出任意id:
创建立一个link <a href="">
给 连接增加一个class属性class="thickbox"
给连点增加一个锚点:#TB_inline
在锚点的后边增加字符 串:?height=300&width=300&inlineId=myOnPageContent
在字符串的后边添 加&modal=true,测必须在弹出的层内调用onclik=tb_remove()多用于隐藏的层
其中的inlineId就是你想 显示的元素的id
用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在thickbox中显示 的url连接
在url后边添加字符串?KeepThis=true&TB_iframe=true&height=400&
amp;width=600
说明Add all other query parameters before the TB_iframe
parameters.就是说其它参数一定要放在TB前
ajax内容
用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在 thickbox中显示的url连接
在连接后加字符串?height=300&width=300
其它技巧
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的事件。
相关推荐
jquery插件thickbox的使用方法
js弹出层之JQUERY THICKBOX弹出层插件
jQuery Thickbox3.1 弹出层插件
使用thickbox时,经常会往回带值,比如,用thickbox显示上传一张图片,在关闭得时候,将上传后的图片路径返回到原来的页面。类似的操作很多,写了一个小实例,希望能对一些朋友有所帮助。
ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容. 点击这里查看演示 特性: ThickBox 是...
jQuery thickbox 弹出框 弹出后网页变暗 插件,使用thickbox 可用来显示图片弹框和文字的弹框,比如一些登录框之类的,弹出后,网页背景渐变暗下来,操作完成后网页恢复。thickbox和Lightbox插件之类的功能十分相似...
jQuery(domChunk).click(function() { var t = this.title || this.name || null; var a = this.href || this.alt; var g = this.rel || false; //alert(window.top.location); //alert(self.location); //...
基于jQuery弹出层插件thickbox 智能提示
是一个jquery为基础的,可显示图像, divs ,或者远程页面。 它的使用简单,容易。
用 jquery 和 thickbox 实现图片浏览
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。 使用介绍: http://blog.csdn.net/intcry/archive/2010/11/25/6035639.aspx
主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下
JQUERY插件THICKBOX的功能很强大,但是它的基本使用却很简单容易.但是要研究的更深,运用得更加灵活的话,还是有点难度,根据其官方站点介绍
NULL 博文链接:https://q445862108.iteye.com/blog/1013002
最近发现一个不错的基于jquery的插件thickBox ,感觉比facebox好用。但因为jquery官方不推荐使用。所以这个只是学习的朋友,不建议使用这个。
thickbox.js插件学习,很实用,很好用,很灵活,可以在iframe里任意定义。入门实例。http://blog.csdn.net/greatverve/archive/2008/12/23/3588955.aspx我的网址:www.0379zd.com
jQuery 中的简单实用的网页中div弹出效果 超酷!
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.
ThickBox打开框架页 1.显示位置修正; 2.标题栏关闭改图片; 3.点击父页面关闭修正; 4.添加关闭刷新父页面; ...等; 如需更多修改化请自行修改。