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 相关文章推荐
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
详解JS面向对象编程
Jan 24 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
js实现图片360度旋转
Jan 22 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
在js中修改html body的样式
Nov 11 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
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
2018/09/01 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
python模拟事件触发机制详解
2018/01/19 Python
Python编程argparse入门浅析
2018/02/07 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
校友会欢迎辞
2014/01/13 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers