thickBox参数详解

前几天写了一篇关于ThickBox 3.1的文章：今天在使用这个东西的时候发现里面有许多参数没有详细解释，今天抽空整理出来，现和大家分享一下：

先说几个参数：
class="thickbox" 调用特效；
height 打开页面的高度；
width 打开页面的宽度；
title="Iframe(Auto Hide)" title的内容；
keepThis=true TB_iframe=true 这两个参数没搞明白什么意思，但通过框架来调用页面时不可缺少；
#TB_inline 调用当前页面的层；
inlineId 当前页面层的ID；
modal=true 表示禁用title，去掉即可显示title及可自动关闭；

1、调用框架，固定宽度和高度，超出显示滚动条 Iframe(auto hide):

<a href="http://www.cookseo.com?keepThis=true&TB_iframe=true&height=500&width=820" title="ThickBox 3.1:调用框架，固定宽度和高度，超出显示滚动条" class="thickbox">OECSPACE</a>

2、打开页面，固定宽度和高度，无滚动条，禁用title, fixed width, fixed height

<a href="boxs.html?keepThis=true&TB_iframe=true&height=100&width=220&modal=true" title="ThickBox 3.1:modal=true表示禁用title，去掉即可显示title及可自动关闭" class="thickbox">Open iFrame Modal</a>

3、Ajax载入，自动宽度和高度，禁用title，页面无法查看源代码

<a href="box.html?height=350&width=350&modal=true" title="ThickBox 3.1:Ajax载入，页面无法查看源代码" class="thickbox">Example</a>

4、链接显示隐藏的层，层存在于页面中。

<a href="#TB_inline?height=200&width=300&inlineId=hiddenModalContent&modal=true" title="ThickBox 3.1:链接显示隐藏层" class="thickbox">Show hidden modal content</a>

<div id="hiddenModalContent" style="display:none">
<p>ThickBox hidden modal content. Click to hide.</p>
<p style="text-align:center"><input type="submit" value=" O K " οnclick="tb_remove()" /></p>
</div>

5、按钮显示隐藏的层，层存在于页面中。

<div id="myOnPageContent" style="display:none">
<p>ThickBox hidden modal content.Auto Hide.</p>
</div>

6、单张图片调用

7、多张图片调用

另外，如果不想点击图片关闭的话，找到thickbox.js，到128行，把下面的代码：

$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
改成：

$("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");
即可，说白了就是把链接去掉。

thickBox参数详解相关推荐

CI流水线配置文件参数详解（一）
文章目录 4. 参数详解(一) 4.1 ``script`` 4.2 ``image`` 指定使用Docker镜像.如 ``iamge:name`` ,暂时忽略. 4.3 ``before_scrip ...
内存性能参数详解（转载）
内存性能参数详解先说说最有效提高你机器内存性能的几个参数:CL,TRP,TRCD CAS Latency "列地址选通脉冲潜伏期" BIOS中可能的其他描述为:tCL.CAS L ...
spring boot 实战 / 可执行war启动参数详解
概述上一篇文章<spring boot 实战 / mvn spring-boot:run 参数详解>主要讲解了spring boot 项目基于maven插件启动过程中借助profil ...
调包侠福音！机器学习经典算法开源教程（附参数详解及代码实现）
Datawhale 作者:赵楠.杨开漠.谢文昕.张雨寄语:本文针对5大机器学习经典算法,梳理了其模型.策略和求解等方面的内容,同时给出了其对应sklearn的参数详解和代码实现,帮助学习者入门和巩固 ...
plot参数详解python_30行Python代码实现3D数据可视化
作者:潮汐来源:Python技术欢迎来到编程教室~ 我们之前的文章中有讲解过不少 Matplotlib 的用法,比如: 完成这50个Matplotlib代码,你也能画出优秀的图表 25个常用Mat ...
Ehcache配置参数详解
ehcache配置参数详解 <?xml version="1.0" encoding="UTF-8"?><ehcache><dis ...
PHP date函数参数详解
PHP date函数参数详解作者: 字体:[增加减小] 类型:转载 time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧不过这样方便计算, 要找 ...
ping ip 端口_学生会私房菜【20200305期】——Ping命令及其常用参数详解
一命令原理 Ping是ICMP的一个典型应用.Ping是检测网络连通的常用工具,同时也能收集其他相关信息.用户可以在Ping命令中指定不同参数,如ICMP报文长度.发送的ICMP报文个数.等待回复响应 ...
python箱线图_Python 箱线图 plt.boxplot() 参数详解
Python 绘制箱线图主要用 matplotlib 库里 pyplot 模块里的 boxplot() 函数. plt.boxplot() 参数详解 plt.boxplot(x, # 指定要绘制箱线图 ...

thickBox参数详解

thickBox参数详解相关推荐

最新文章

热门文章