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 相关文章推荐
Javascript 类与静态类的实现
Apr 01 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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缓存类代码
2015/10/23 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python 列表理解及使用方法
2017/10/27 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
python数值基础知识浅析
2019/11/19 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
关于诚信的活动方案
2014/08/18 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
python通过函数名调用函数的几种方法总结
2021/06/07 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js