jQuery插件ThickBox

ThickBox官方文档说明
http://jquery.com/demo/thickbox/

需要使用thickbox.css文件和动态加载提示图片loadingAnimation.gif
在使用中要注意动态加载提示图片的路径，默认路径: images/loadingAnimation.gif

<a href="images/image2.jpg?height=500&width=400" title="mtTitle" class="thickbox"><img src="data:images/thumb_image2.jpg" alt="Single Image"/></a>
这样就实现了一张图片的弹出展示功能，只需要指定图片的class为thickbox，同时注意有一个小图和一张大图，如果需要展示图片库，方法如下：
<a href="biuuu_1.jpg" title="" class="thickbox" rel="biuuu_pictures"><img src="biuuu_1_thumb.jpg" alt="图片"/></a>
<a href="biuuu_2.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_2_thumb.jpg" alt="图片"/></a>
<a href="biuuu_3.jpg" title="" class="thickbox" rel="biuuu_pictures" ><img src="biuuu_3_thumb.jpg" alt="图片"/></a>
如果需要实现图片库的效果，只需要给每个图片增加一个rel属性，如上： rel="biuuu_pictures"，这样就会有上一张和下一张的按钮。

其它HTML，IFramed或远程ajax内容弹出框使用方法与图片一样，只不过链接的元素不同，分别如下：
弹出HTML元素内容:path?height=300&width=300&inlineId=myOnPageContent
弹出IFramed内容:path?KeepThis=true&TB_iframe=true&height=400&width=600
弹出ajax内容:path?height=300&width=300
需要指定元素的高度与宽度，并指定相应的弹出元素。

显示隐藏DIV是href="#TB_inline?height=155& amp;width=300& inlineId=hiddenModalContent&modal=true"加了 modal=true时,你需要在DIV中自己手写一个关闭按钮,如<a href="#" οnclick="tb_remove()">关闭</a>这样

其中的 inlineId=hiddenModalContent这一段是隐藏DIV的ID,另两个参数一个高一个宽就不用说了

IFRAME是<a href="Upimg/ajaxOverFlow.html? keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">例子2</a>

jQuery插件ThickBox相关推荐

jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
Jquery插件Thickbox的使用
最近项目需要用到弹出层!最后找到Thickbox,它能在浏览器界面上显示非常棒的弹出框,可以显示单图片,多图片,AJAX 请求内容或链接内容.感觉挺不错的!Thickbox的官方网址:http://j ...
Jquery插件Thickbox的使用总结及自定义设置
ThickBox运行需要的文件首先在 HTML 文件的 head中导入jquery.js 和thickbox.js文件,导入 thickbox.css 文件;并且jquery.js 文件放在前面: ...
转 jquery插件--241个jquery插件—jquery插件大全
241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...
200个 jquery插件
引用:http://paranimage.com/jquery-plugin-list/ jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其te ...
241个jquery插件—jquery插件大全
jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...
jQuery弹出插件thickbox使用心得
thickbox是一个简单易用的jQuery插件. 其官网:http://jquery.com/demo/thickbox/ .上面有源码和示例.一般只要在需要添加弹出窗体的元素中加上它的类thick ...
分享一个灰常简单好用的jQuery弹出层插件:jquery.artwl.thickbox.js
最终效果: 插件原理所有弹出层的原理都差不多,就是用一个全屏半透明DIV做遮罩层,在这个遮罩层上再显示出一个层放要显示的内容,其他的就是CSS的运用了. 本插件为了使用简单,把JS跟CSS封装在了一 ...
Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...

jQuery插件ThickBox

jQuery插件ThickBox相关推荐

最新文章

热门文章