http://www.cookseo.com/blog/web/ThickBox/
前几天写了一篇关于ThickBox 3.1的文章:[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& amp;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& amp;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 " onclick="tb_remove()" /></p>
</div>

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

<input alt="#TB_inline?height=150& width=400&inlineId=myOnPageContent " title="ThickBox 3.1:按钮显示隐藏 层" class="thickbox" type="button" value="Show" />

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

6、单张图片调用

<a href="images/plant1.jpg" title="plant" class="thickbox"><img src="data:images/plant1_t.jpg" alt="ThickBox 3.1" /></a>

7、多张图片调用

<a href="images/plant1.jpg" title="plant1" class="thickbox" rel="gallery-plants"><img src="data:images/plant1_t.jpg" alt="ThickBox 3.1 1" /></a>
<a href="images/plant2.jpg" title="plant2" class="thickbox" rel="gallery-plants"><img src="data:images/plant2_t.jpg" alt="ThickBox 3.1 2" /></a>
<a href="images/plant3.jpg" title="plant3" class="thickbox" rel="gallery-plants"><img src="data:images/plant3_t.jpg" alt="ThickBox 3.1 3" /></a>

另外,如果不想点击图片关闭的话,找到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>");    

转载于:https://www.cnblogs.com/shinehouse/articles/3858324.html

ThickBox 3.1参数详解相关推荐

  1. ThickBox 3.1参数详解(转)

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

  2. CI流水线配置文件参数详解(一)

    文章目录 4. 参数详解(一) 4.1 ``script`` 4.2 ``image`` 指定使用Docker镜像.如 ``iamge:name`` ,暂时忽略. 4.3 ``before_scrip ...

  3. 内存性能参数详解(转载)

    内存性能参数详解 先说说最有效提高你机器内存性能的几个参数:CL,TRP,TRCD CAS Latency "列地址选通脉冲潜伏期" BIOS中可能的其他描述为:tCL.CAS L ...

  4. spring boot 实战 / 可执行war启动参数详解

    概述   上一篇文章<spring boot 实战 / mvn spring-boot:run 参数详解>主要讲解了spring boot 项目基于maven插件启动过程中借助profil ...

  5. 调包侠福音!机器学习经典算法开源教程(附参数详解及代码实现)

    Datawhale 作者:赵楠.杨开漠.谢文昕.张雨 寄语:本文针对5大机器学习经典算法,梳理了其模型.策略和求解等方面的内容,同时给出了其对应sklearn的参数详解和代码实现,帮助学习者入门和巩固 ...

  6. plot参数详解python_30行Python代码实现3D数据可视化

    作者:潮汐 来源:Python技术 欢迎来到编程教室~ 我们之前的文章中有讲解过不少 Matplotlib 的用法,比如: 完成这50个Matplotlib代码,你也能画出优秀的图表 25个常用Mat ...

  7. Ehcache配置参数详解

    ehcache配置参数详解 <?xml version="1.0" encoding="UTF-8"?><ehcache><dis ...

  8. PHP date函数参数详解

    PHP date函数参数详解 作者: 字体:[增加 减小] 类型:转载 time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧  不过这样方便计算, 要找 ...

  9. ping ip 端口_学生会私房菜【20200305期】——Ping命令及其常用参数详解

    一命令原理 Ping是ICMP的一个典型应用.Ping是检测网络连通的常用工具,同时也能收集其他相关信息.用户可以在Ping命令中指定不同参数,如ICMP报文长度.发送的ICMP报文个数.等待回复响应 ...

最新文章

  1. Python.h: No such file or directory
  2. TurboMail邮件系统通过涉密信息系统产品认定
  3. 如何隐藏android的屏幕上的Title Bar
  4. GO语言实现设计模式【全】
  5. 性能进阶:使用JMeter进行websocket测试
  6. 【汇编语言】【ARM扩展资料】数据表示
  7. JavaScript数据结构与算法-列表练习
  8. JavaScript题 - 应用
  9. CC2530概述(简单了解)
  10. 最新emoji表情代码大全_NO.3 如何用Emoji迷惑人类
  11. 利用matlab命令画出以下信号的波形,大连理工大学 信号与系统实验三报告
  12. 天正服务器修改,天正修改服务器地址
  13. 全球各大主流卫星拍摄到的苏伊士运河货轮画面,看看哪个最清晰
  14. 网络编辑如何经营网络社区?
  15. 文献阅读——金属伪影减少MAR问题
  16. 【原创】快速估算和管理
  17. Spring大白话(●—●)
  18. 基于itextpdf java pdf添加水印后,部分文档无法显示水印的问题
  19. 计算机教室英语怎么读音,微机教室,micro-computer classroom,音标,读音,翻译,英文例句,英语词典...
  20. 岁月让我们学会了选择与放弃

热门文章

  1. 图神经网络(GNN)简介
  2. IE、Edge、Chrome、Firefox浏览器
  3. sensors open流程
  4. Java中计算日期间隔
  5. matlab knots,chronux_2_12.v02 chrounx是matlab的一个工具包(a toolbox for matlab) - 下载 - 搜珍网...
  6. Android:View中的performClick()触发条件
  7. Django工程中使用echarts怎么循环遍历显示数据
  8. 壬辰六月廿九酬和西子如梦
  9. php中strpos(), stripos(),strrpos(), strripos()的区别
  10. 数论小白都能看懂的数学期望讲解