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 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
jQuery插件之validation插件
Mar 29 jQuery
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS简易计算器实例讲解
Jun 30 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
JavaScript错误处理
2015/02/03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
JavaScript希尔排序、快速排序、归并排序算法
2016/05/08 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python中的json总结
2018/10/11 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
业务助理岗位职责
2013/11/18 职场文书
社区学习十八大感想
2014/01/22 职场文书
擅自离岗检讨书
2014/02/11 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
实习协议书
2015/01/27 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS