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中的float运算精度实例分析
Aug 21 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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分页代码实例
2013/10/24 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
详解Python3的TFTP文件传输
2018/06/26 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
Python用Jira库来操作Jira
2020/12/28 Python
保送生自荐信范文
2013/10/06 职场文书
2014年征兵标语
2014/06/20 职场文书
旅游活动总结
2014/08/27 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
个人年终总结范文
2015/03/09 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2016年元旦致辞
2015/08/01 职场文书
无故旷工检讨书
2015/08/15 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS