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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 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
用PHP实现小型站点广告管理
2006/10/09 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
常用的javascript function代码
2008/05/23 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
js给selected添加options的方法
2015/05/06 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python 实现线程之间的通信示例
2020/02/14 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
电气专业应届生求职信
2013/11/01 职场文书
运动会入场词200字
2014/02/15 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
2019学校运动会开幕词
2019/05/13 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android