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 相关文章推荐
javascript offsetX与layerX区别
Mar 12 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
js验证框架实现代码分享
May 18 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP中常用数组处理方法实例分析
2008/08/30 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
行政工作个人的自我评价
2014/02/13 职场文书
给市场的环保建议书
2014/05/14 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js