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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript 节点遍历函数
Mar 28 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
小程序实现横向滑动日历效果
Oct 21 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
插件导致ECharts被全量引入的坑示例解析
Sep 23 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
面向对象的javascript(笔记)
2009/10/06 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
python基于phantomjs实现导入图片
2016/05/13 Python
详解Python if-elif-else知识点
2018/06/11 Python
python网络应用开发知识点浅析
2019/05/28 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
幼儿园消防演练方案
2014/02/13 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
党员创先争优承诺书
2014/03/26 职场文书
投资意向协议书
2015/01/29 职场文书
行政文员岗位职责
2015/02/04 职场文书
导游词之凤凰古城
2019/10/22 职场文书