cAng^Er

不懂我的人 , 离不了我 , 该了解了解我 !而懂我的人 , 更离不了我 , 因为他们爱我 。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  30 随笔 :: 16 文章 :: 18 评论 :: 0 Trackbacks
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&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>");     

即可,说白了就是把链接去掉。
posted on 2011-04-26 16:15 cAng^Er 阅读(2346) 评论(2)  编辑  收藏 所属分类: |:Web View:|

评论

# re: ThickBox 3.1参数详解[未登录] 2011-06-29 16:56 jerry
请问,如果我是用iframe弹出一个窗口,窗口里面有要填写的注册的信息,点击注册按钮怎么没反应呢?  回复  更多评论
  

# re: ThickBox 3.1参数详解 2014-08-01 12:03 1231
顶一下,太详细了,  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: