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 强制类型转换函数
May 17 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
angular之ng-template模板加载
Nov 09 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
深入document.write()与HTML4.01的非成对标签的详解
2013/05/08 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
详解Vue打包优化之code spliting
2018/04/09 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
Python线程障碍对象Barrier原理详解
2019/12/02 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
django 外键创建注意事项说明
2020/05/20 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
高中历史教学反思
2014/02/08 职场文书
幼儿园招生广告
2014/03/19 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
销售代理协议书
2014/09/30 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android