`
jsx112
  • 浏览: 315924 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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&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 " 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="images/plant1_t.jpg" alt="ThickBox 3.1" /></a>

7、多张图片调用

<a href="images/plant1.jpg" title="plant1" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="ThickBox 3.1 1" /></a>
<a href="images/plant2.jpg" title="plant2" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="ThickBox 3.1 2" /></a>
<a href="images/plant3.jpg" title="plant3" class="thickbox" rel="gallery-plants"><img src="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>");    

即可
分享到:
评论

相关推荐

    jQuery_thickbox3.1

    **jQuery_thickbox3.1** 是一个基于流行的JavaScript库jQuery构建的插件,用于创建弹出式的轻量级对话框。这个插件允许用户在当前网页上展示图像、HTML div元素,甚至远程页面,无需离开当前浏览环境,极大地提升了...

    ThickBox 3.1调用方法+实例演示.zip

    10. **实例演示**:压缩包中的“thickbox3.1”文件很可能包含了一系列的HTML和JavaScript文件,用于展示ThickBox的各种功能和用法。这些实例可以帮助开发者快速理解和学习如何在项目中应用ThickBox。 总的来说,...

    thickbox3.1.zip

    这个"thickbox3.1.zip"文件包含了Thickbox的3.1版本,它在网页设计和开发中被广泛使用,为用户提供了一种优雅的方式来展示多媒体内容,而不会让他们离开当前页面。 Thickbox的核心功能包括: 1. **图片预览**:...

    ThickBox3.1弹出层

    3. `tb-setup.js`: 可能是配置文件,用于设置默认参数或初始化ThickBox3.1。 4. 图像资源:如加载指示符、关闭按钮等,用于增强用户体验。 5. 示例或测试文件:演示如何在实际项目中使用ThickBox3.1。 总体来说,...

    thickbox3.1 幻灯片特效 遮照阴影 表单特效

    Thickbox3.1是一款流行的JavaScript插件,用于在网页上实现优雅的幻灯片、遮罩阴影效果以及表单的交互式展示。这个插件以其简洁的设计和强大的功能深受开发者喜爱,尤其适用于那些希望在网站上添加轻量级、响应式的...

    jQuery Thickbox3.1 弹出层插件

    jQuery Thickbox3.1是一款基于JavaScript库jQuery的弹出层插件,用于创建美观、功能丰富的弹出对话框。在网页设计中,弹出层常用于显示图片、视频、iframe内容或者任何HTML元素,而无需离开当前页面。Thickbox3.1...

    thickbox3.1实例

    在“thickbox3.1实例”中,我们将深入探讨这个插件的功能、用法以及如何在项目中实现它。 首先,Thickbox的核心功能是提供一种优雅的方式来展示多媒体内容,无需离开当前页面。它利用CSS和JavaScript技术,使得弹出...

    可以显示单图片,多图片ajax请求的ThickBox3.1类下载

    在ThickBox3.1版本中,可能包含了一些新特性或改进,例如性能优化、兼容性增强,或者新增了一些API接口供开发者使用。具体细节需要查看官方文档或下载的源代码包来了解。 总的来说,ThickBox是一个强大且灵活的工具...

    juery thickbox3例子

    在压缩包文件名称列表中,我们只看到了“thickbox3.1”。这可能表示这个压缩包包含了Thickbox3的源代码、CSS样式文件、JavaScript脚本、图片资源等组成部分。通常,你需要将这些文件部署到你的Web服务器上,并在你的...

    js弹出框弹出层

    ThickBox3.1是该插件的一个版本,可能包含了一些性能优化和新特性。 使用ThickBox,你可以通过简单的API调用来创建弹出层,例如,如果你想弹出一个包含HTML内容的窗口,你可以这样做: ```javascript tb_show('弹...

    ajax实例大全 很实用的!

    &lt;tr&gt;&lt;td&gt;&lt;a href="7.4/slider.html"&gt;7.4使用滑动栏设置参数&lt;/a&gt;&lt;/td&gt; &lt;tr&gt;&lt;td class="item"&gt;第八章 访问第三方服务&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;a href="8.1/read_rss.html"&gt;8.1RSS阅读器&lt;/a&gt;&lt;/td&gt; &lt;tr&gt;&lt;td&gt;...

    Jquery特效大全

    虽然文档中没有详细介绍,但从名称推测,这可能是一种使用 jQuery 实现的独特菜单效果。它可能具有某种特殊的动画效果或者设计风格。 **1.11 Make a Mega Drop-Down Menu with jQuery** Mega 下拉菜单是一种大型的...

Global site tag (gtag.js) - Google Analytics