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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js运动应用实例解析
Dec 28 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
Vue中引入svg图标的两种方式
Jan 14 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
php中final关键字用法分析
2016/12/07 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
MooTools 1.2介绍
2009/09/14 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
python批量替换多文件字符串问题详解
2018/04/22 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
css3学习心得分享
2013/08/19 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
关键字final的用法
2013/10/02 面试题
小学端午节活动方案
2014/03/13 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
人事任命通知
2015/04/20 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书