jquery的thickbox使用技巧汇总
在网上看到有不少没用过的技巧,抄下来,以免忘记!
到http://jquery.com/demo/thickbox/下载需要的js及css文件
分别保存到目录
--js
--css
--images
中,
一、在文件的<head></head>中插入
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
然后修改thickbox.js指名loadingAnimation.gif 这个图片的路径
二、在<head></head>中插入CSS
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
例子
单个图片时:
增加一个<a href="">然后给连接加一个class="thickbox"
<a href="images/single.jpg" title="caption" class="thickbox">图片</a>
title加连接
title="<a href="images/aa.jpg">my link</a>"
想法来自lightbox
多张图片时:
与单个图片的区别就是多了一个same rel element
<a href="images/a.jpg" class="thickbox" rel="test" title="测试一">测试一</a>
<a href="images/b.jpg" class="thickbox" rel="test" title="测试二">测试二</a>
显示一个层内的内容时弹出任意id:
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
给连点增加一个锚点:#TB_inline
在锚点的后边增加字符串:?height=300&width=300&inlineId=myOnPageContent
在字符串的后边添加&modal=true,测必须在弹出的层内调用onclik=tb_remove()多用于隐藏的层
其中的inlineId就是你想显示的元素的id
用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在thickbox中显示的url连接
在url后边添加字符串?KeepThis=true&TB_iframe=true&height=400&width=600
说明Add all other query parameters before the TB_iframe parameters.就是说其它参数一定要放在TB前
ajax内容
用ifame显示url
创建立一个link <a href="">
给连接增加一个class属性class="thickbox"
在href属性中提供想在thickbox中显示的url连接
在连接后加字符串?height=300&width=300
其它技巧
thickbox是一个不错的对话框插件,不过官方站提供的使用方法具限性很大。比如,我页面上有个缩略图,点击之后用thickbox显示大图。使用官方的方法:
<a href="大图的URL" title="简介" class="thickbox"><img src="小图的URL" border="0"/></a>
这种方法虽然方便,但局限性很大。
第一、你必须为每个这样的img标签外套一个a标签
第二、只能用class="thickbox"让thickbox去绑定事件
第三、不能自己定义事件
第四、当使用AJAX载入页面后,载入的页面内的这些DOM不会被thickbox绑定
稍稍看了下thickbox的代码,其实以上问题完全可以使用thickbox自己的方法来解决,以下举例说明。
例一。我能自己定位到需要用thickbox的元素,不想再加上class="thickbox"。HTML如下:
<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>
需要对id="PicList"里面的a标签下的img使用thickbox,代码如下:
$(function() {tb_init("#PicList a[img]");
});
例二。我用AJAX载入了一段HTML,但该HTML里的class="thickbox"这样的标签点击了没有任何反应。解决此问题只要在AJAX载入HTML并更新到页面后执行下以下代码:
tb_init('a.thickbox, area.thickbox, input.thickbox'); //引号里的是thickbox的默认选择器,你可以使用例一内这样的自定义选择器
例三。我想点击img标签后显示thickbox,不想在img标签外面再套<a url="大图" class="thickbox">这样的标签。缩略图URL只不过在大图URL的后缀前加了s。比如大图是pic01.jpg、小图是 pic01s.jpg。使用以下方法可以做到。HTML如下:
<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);});
});
另外,如果想用其它事件,请使将例3里的click改成你想触发thickbox的事件。
jquery的thickbox使用技巧汇总相关推荐
- jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
- ipadpro+打开html文件,iPadPro日常基本功能的使用技巧汇总
iPadPro日常基本功能的使用技巧汇总今天来给大家分享一下了,苹果的iPadPro这款平板还是很实用的,而且还自带的手写笔,平时大家在使用这款iPadPro中肯定遇到了不少问题,下面小编就来分享一下 ...
- vb计算机水平考试笔试,2014计算机考试二级VB笔试答题技巧汇总
2014计算机考试二级VB笔试答题技巧汇总 B.填空题解题方法: 除部分填空题考查识记知识点外,对于理解性的编程类填空题,我们有时可以用推理的方法初步得到解题思路,在此基础上进行相关的验证后最终得到正 ...
- VC小技巧汇总之对话框技巧
这篇文章主要介绍了VC小技巧汇总之对话框技巧,非常实用!对于进行VC开发有一定的参考借鉴价值,需要的朋友可以参考下 本文搜集汇总了VC中关于对话框常用的一些技巧,对于进行VC开发由于一定的参考借鉴价值 ...
- 数学猜想验证步骤_高中数学解题思路与技巧汇总,19种解题方法,实用!
解数学题,除了掌握有关的数学知识之外,最好掌握一定的解题技巧甚至知道点解题思想.要知道高考试题的解答过程中蕴含着重要的数学思想方法,如果能有意识地在解题过程中加以运用,势必会取得很好的效用.下面邦德华 ...
- JAVASCRIPT常用20种小技巧汇总
1.TEXTAREA自适应文字行数的多少 2.脚本永不出错 <script LANGUAGE="javascript"> </script> 3.ENTER ...
- 移动平台WEB前端开发技巧汇总
原名<移动平台3G手机网站前端开发布局技巧汇总>,由武方博整理的,让我们了解下移动设备上的WEB站点开发的基础知识,多些时间和精力去优化其他细节,我这里对原文的标签格式做了细微的调整,阅读 ...
- oracle 汇总上面所有,Oracle经验技巧汇总
Oracle经验技巧汇总 对于Oracle学习者来说,掌握一些经验技巧是很有必要的,下面就和小编一起来学习学习吧! 1.删除表空间 DROP TABLESPACE TableSpaceName [IN ...
- Matlab/Simulink仿真问题及技巧汇总【持续更新】
本文章会汇总Matlab/Simulink仿真问题和相关技巧汇总. 如果有问题可以查询本文.有相关问题可以私信我,给你把你们的问题同步更新.wx:shadowknight007 本文章会持续更新. 设 ...
最新文章
- GPU上创建目标检测Pipeline管道
- Nat. Commun. | 多层生物分子网络的鲁棒性研究
- Chrome控制台实用指南
- 为什么中国程序员工作不轻松,加班多?
- switch分支结构
- java实例_图例 | Java混合模式分析之火焰图实例
- python取出字符串中的偶数_从给定字符串中删除偶数个连续的重复字符
- php的array跟go的array,实现类似php的array_column方法
- matlab控制realsense,RealSense开发学习--1.初识RealSense
- 使用NUnit进行DotNet程序测试
- 利用存储过程批量生成数据
- Server Develop (四) select实现非阻塞sever
- ARTS打卡计划第二周-Algorithm
- 螺旋数组,之字形数组
- 看了B站上的这些Java视频,我飘了!
- 人民日报谈美国减税:是在挑起税务战,国际税收秩序将陷混乱(zz)
- php只取时间的下士_php取当时的年月日时分秒毫秒
- C#栈(后进先出)队列实现与解析
- 英语语法笔记——并列句(二)
- 联想微型计算机如何设置u盘启动,联想电脑如何设置U盘启动?联想电脑bios设置U盘启动教程...
热门文章
- Nginx(十三)rewrite功能
- 保护眼睛什么光的灯最好?推荐五款护眼灯
- linux 下sh命令:command not found
- 学生管理程序c语言数组,c语言学生管理系统(c语言学生信息管理系统)
- 样本方差公式是如何推导出来的?
- Ruby - Bug of RubyMine - Home path for SDK doesn't exist
- 企业网络营销常用方法与策略
- 5分钟讲解直流线性稳压降压电源基本原理
- objc - 编译Runtime源码objc4-680
- PTA 天梯赛 7-2 樱花对梧桐 C语言AC题解(15 分)