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获取URL参数与参数值的示例代码
Dec 20 Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
js实现简单音乐播放器
Jun 30 Javascript
小程序实现列表展开收起效果
Jul 29 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python3并发写文件与Python对比
2019/11/20 Python
详解Scrapy Redis入门实战
2020/11/18 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
幼儿教育感言
2014/02/05 职场文书
户外婚礼策划方案
2014/02/08 职场文书
岗位说明书范文
2014/05/07 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
律师授权委托书范本
2014/10/07 职场文书
小学生思想品德评语
2014/12/31 职场文书
网络营销计划书
2015/01/17 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
小学教师求职信范文
2015/03/20 职场文书
户外拓展训练感想
2015/08/07 职场文书