Jquery弹出层插件ThickBox的使用方法


Posted in Javascript onDecember 09, 2014

thickbox是jQuery的一个插件,其作用是弹出对话框、网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法。
声明一下:这只是个人的总结记载而已。
准备工作:你需要三个文件:thickbox.js、thickbox.css、jquery.js,网上到处可下

具体使用:

第一步:将这三个文件引入到你要使用thickbox的页面

<script type="text/javascript" src="jquery.js"></script> 

    <script type="text/javascript" src="thickbox.js"></script>

    <link rel="stylesheet" href="thickbox.css" type="text/css" />

第二步:一般简单使用就是给<a>标签和Button添加样式:class=thickbox
还有就是通过thickbox函数调用:如tb_init()、tb_show();见下文。

几种不同用法:

1.点击显示图片:

 <a href="001.jpg" class="thickbox"><img src="001.jpg"/></a>
ok,就这样搞定
2.点击按钮或链接:

<input alt="#TB_inline?height=300&width=400&inlineId=div1" title="shawnliu" class="thickbox" type="button" value="Show" />   

   <a href="#TB_inline?height=155&width=300&inlineId=div2&modal=true" class="thickbox">Show hidden modal content.</a>

   

   <div id="div1" style="display:none">

   <P>

     这是一个非模式对话框。

   </P>

   </div>
   <div id="div2" style="display:none">

   <P>

     这是一个模式对话框。

     <p style="TEXT-ALIGN: center"><INPUT id="Login" onclick="tb_remove()" type="submit" value="  Ok  " /></p>

   </P>

   </div>

说明:给你要使用thickbox的<a>或button添加"#TB_inline?height=300&width=400&",#TB_inline是thickbox固定用法,height和width是显示弹出对话框的大小参数,inlineId是你要显示的标签或组件,modal是模式与非模式的选择,当然你还可以接很多你自定义的参数
3.一般在项目中用得比较多的就是加载form的页面,如添加,编辑在同一个list列表页面,这时我们就可以将添加和编辑都做成thickbox形式,如下图:

Jquery弹出层插件ThickBox的使用方法

怎样做呢一样的,给添加链接加thickbox样式:

<a href="add.shtml?width=300&height=250" class="thickbox">新增</a>
前提是你得将要显示的页面(add.shtml)做好,然后指定你要显示的大小
编辑同样是一样:先将原信息提取出来,再让用户修改:

Jquery弹出层插件ThickBox的使用方法

代码也一样:

<a href="edit.shtml?width=300&height=250&nid=item.nid" class="thickbox">编辑</a>

4.能自己定位到需要用thickbox的元素,不使用样式,可以用函数,如:

<div id="PicList">

<a href="Pic01.jpg"><img src="Pic01s.jpg" border="0"/></a>

<a href="Pic02.jpg"><img src="Pic01s.jpg" border="0"/></a>

</div>
$(function() {

tb_init("#PicList a[img]");});

5.通过ajax加载的页面,thickbox样式会失效,解决办法:
只要在AJAX载入HTML并更新到页面后执行下以下代码:

tb_init('.thickbox');
6.自定义函数调用:
如点击缩图,要显示大图,缩略图URL只不过在大图URL的后缀前加了s:

<div id="PicList">

<img src="Pic01s.jpg" border="0"/>

<img src="Pic01s.jpg" border="0"/>

</div>
$(function() {

$("#PicList img").click(function() {

tb_show("",this.src.substring(0,this.src.length-5)+'.jpg',false);

});});

另外,如果想用其它事件,还可以将click改成你想触发thickbox的事件。

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还是有点问题的!

Javascript 相关文章推荐
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
switchery按钮的使用方法
Dec 18 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
JavaScript Math对象和调试程序的方法分析
May 13 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
浅谈JavaScript函数节流
Dec 09 #Javascript
node.js中的console.log方法使用说明
Dec 09 #Javascript
node.js中的console.warn方法使用说明
Dec 09 #Javascript
node.js中的console.info方法使用说明
Dec 09 #Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 #Javascript
node.js中的console.trace方法使用说明
Dec 09 #Javascript
node.js中的console.time方法使用说明
Dec 09 #Javascript
You might like
第六章 php目录与文件操作
2011/12/30 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
新浪的图片新闻效果
2007/01/13 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
python小技巧之批量抓取美女图片
2014/06/06 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Linux中如何用命令创建目录
2015/01/12 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
客户代表自我评价范例
2013/09/24 职场文书
校园门卫岗位职责
2013/12/09 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
运动会通讯稿200字
2014/02/16 职场文书
计划生育标语
2014/06/23 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
学校运动会开幕词
2016/03/03 职场文书
利用python进行数据加载
2021/06/20 Python
Java并发编程之Executor接口的使用
2021/06/21 Java/Android