JQUERY THICKBOX弹出层插件


Posted in Javascript onAugust 30, 2008

.THICKBOX支持一下浏览器:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+, Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10……但是据我的使用,IE6还是有点问题的!下面我们首先来看它的调用:
1.肯定你先要下载jquery.js和thickbox.js了.还有thickbox.css也不能少!

<script type="text/javascript" src="path-to-file/jquery.js"></script> 
<script type="text/javascript" src="path-to-file/thickbox.js"></script> 
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" /> 
//path-to-file 就是你放这三个文件的路径

2.弹出单张图片的方法:
<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>

3.多张图片实现分页也很简单:
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> 
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> 
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>

4.弹出网页inLINECONTENT
<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" /> 
//重要的是 #TB_inline?

5.iFRAME形式的
<a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example</a>

所有调用的样式都得加上class=”thickbox”.这是控制弹出的效果,具体可以参照JQUERY的官方站点对THICKBOX的介绍,里面有具体效果:http://jquery.com/demo/thickbox/
Javascript 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
IE php关于强制下载文件的代码
Aug 23 #Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 #Javascript
Javascript 篱式条件判断
Aug 22 #Javascript
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 #Javascript
javascript:void(0)的真正含义实例分析
Aug 20 #Javascript
利用404错误页面实现UrlRewrite的实现代码
Aug 20 #Javascript
一些不错的js函数ajax
Aug 20 #Javascript
You might like
header中Content-Disposition的作用与使用方法
2012/06/13 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
Python2.x中文乱码问题解决方法
2015/06/02 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python在非root权限下的安装方法
2018/01/23 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python交换两个变量的值方法
2019/01/12 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
C#面试问题
2016/07/29 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
证婚人经典证婚词
2014/01/09 职场文书
跑操口号
2014/06/12 职场文书
英语系毕业生求职信
2014/07/13 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫