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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
JavaScript 字符串连接性能优化
Dec 20 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 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
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jQuery插件实现适用于移动端的地址选择器
2016/02/18 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python从Oracle读取数据生成图表
2020/10/14 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
会计电算化应届生求职信
2013/11/03 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
晚会邀请函范文
2014/01/24 职场文书
银行内勤岗位职责
2014/04/09 职场文书
法制宣传教育方案
2014/05/09 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
医院员工辞职信范文
2015/05/12 职场文书
工作简报范文
2015/07/21 职场文书
小学六年级毕业感言
2015/07/30 职场文书