Jquery ThickBox插件使用心得(不建议使用)


Posted in Javascript onSeptember 08, 2010

大家可以使用官方推荐的一下几个插件

While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives. * colorbox 
* jQueryUI Dialog 
* fancybox 
* DOM window 
* shadowbox.js

做项目中发现facebox如果快速单击两下,容易出现黑屏。而且facebox的框架是用table写的,可能因为table相对div在结构方面更稳定些。如果弹出层里是table布局的,样式就会受到facebox的样式影响,还要重新reset一下。

看了下官方的api,我研究了下,做了个整理。看下图:
Jquery ThickBox插件使用心得(不建议使用)
附件中index.html是主页,其它页面都是调用页面。点击index页面,就能看到如图的页面。图、按钮、文字都是可以点的。需要点击的标签都要加上class="thickbox"。当页面出现滚动条时,弹出层固定在窗口的正中间不会移动。当弹出层中只是图片时,图片大小会根据当前窗口的大小进行压缩。所有的弹出层都可以按"esc"退出,除了需要点确认的弹出层外,点击弹出层以外的地方都可以关闭弹出层。
1.展示图片(单张):

<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"> 
<img src="images/single.jpg" alt="Plant" width="100" height="75" /> 
</a>

2.展示图片(多张):
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> 
<img src="images/plant1.jpg" alt="Plant 1" width="100" height="75"/> 
</a> 
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> 
<img src="images/plant2.jpg" alt="Plant 2" width="100" height="75"/> 
</a> 
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> 
<img src="images/plant3.jpg" alt="Plant 3" width="100" height="75"/> 
</a> 
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="flowers"> 
<img src="images/plant4.jpg" alt="Plant 4" width="100" height="75"/> 
</a>

这里每个a都要加上rel属性,而且属性值要一样。前后展示图可以通过" > "和" < "来切换

3.弹出层内容在当前页面中时:

<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show" type="button"> 
the paragraph and input below in a ThickBox, or 
<input alt="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox" value="Show hidden modal content" type="button"> 
<div id="myOnPageContent" style="display:none;"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
<p><select name=""><option>test</option></select></p> 
</div> 
<div id="hiddenModalContent" style="display:none;"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 
<p style="text-align: center;"><input type="submit" onclick="tb_remove()" value=" Ok " id="Login"/></p> 
</div>

第一个input点开的弹出层有input框、title和操作按钮以及文字。第二个input点开的弹出层只有文字。
弹出层的大小是根据input的alt属性里的width和height值来定义的。下面讲到的几种情况也是这样来定义弹出层大小的。

4.调用外部文件,弹出层是iframe

<a href="ajaxFrame.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a> 
<a href="ajaxOverFlow2.html?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a> 
<a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>

如果弹出层是嵌套在iframe里需要添加“TB_iframe=true"。
第一个是调用ajaxFrame.PHP文件。
第二个是调用ajaxOverFlow2.html文件。
第三个是调用了iframeModal.html文件,隐藏了title和操作按钮。

5.调用外部文件,弹出层不是iframe

<a href="ajaxOverFlow.html?height=300&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a> 
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a> 
<a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a> 
<a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>

第一个调用ajaxOverFlow.html文件。
第二个调用ajax.PHP文件。
第三个调用ajaxLogin.html文件,form表单。
第四个调用ajaxTBcontent.html文件,弹出层里再调用newTBcontent.html文件。
Javascript 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
js禁止小键盘输入数字功能代码
Aug 01 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jquery的Tooltip插件 qtip使用详细说明
Sep 08 #Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 #Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 #Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 #Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
You might like
php页面缓存ob系列函数介绍
2012/10/18 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
js 文件引入实现代码
2010/04/23 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
详解python数据结构和算法
2019/04/18 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python对象的属性访问过程详解
2020/03/05 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
元旦晚会主持词
2014/03/24 职场文书
工作目标责任书
2014/07/23 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
储备店长岗位职责
2015/04/14 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书