ThickBox 2.0

由 Cody Lindley 使用 jQuery 开发 译: croc [ 阅读原文 ]
ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容.

概要-

 

特性:

  • ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.
  • ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.
  • ThickBox 能重新调整大于浏览器窗口的图片.
  • ThickBox 的多功能性包括 (图片, iframed 的内容, 内嵌的内容, 和 AJAX 的内容).
  • ThickBox 能隐藏 Windows IE 6 里的元素.
  • ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.
  • ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀.

下载 ThickBox.js, ThickBox.css, 和装载图片 (loadingAnimation.gif) 到你的本地计算机 (或从 tabs 中复制和粘贴). 有了这三个文件, 还有一个 1.0 alpha jQuery 库 也是必要的. 对本站来说, 我使用的是 压缩版的 jQuery, 我是用 Dean Edwards' Packer 压缩的. 你可以从 http://jQuery.com/src/jquery-1.0a.js (未压缩过的) 下载一个 jQuery 1.0 alpha 的拷贝.

下载打包的所有文件及教程

Loading...
Loading...
Right Click and Download:

Loading Animation Image

 

如何实现 ThickBox :

1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置确定更改它的路径.

2. 在你的网页中外调 ThickBox CSS 文件. 例子如下:

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

或

<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>

或, 打开 thickbox.css 文件并复制粘贴样式到你现有的样式表中.

3. 观看例子, 学习使用不同的方法调用 ThickBox 的功能.

支持的和经测试过的浏览器

Windows IE 6.0, Windows FF 1.5.0.5, Windows Opera 9.0, Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5

MIT 许可

http://www.opensource.org/licenses/mit-license.php

许可特此批出, 免费, 给任何人提供此软件的拷贝和他相关文档中的("软件"), 使用此软件不受任何限制, 所不受的限制包括: 有权利使用, 拷贝, 修改, 合并, 出版, 分发, 颁发从属许可, 和/或买卖该软件的拷贝.

修改日志

到 08/03/2006 为止

  • 添加了 greybox 功能 (iframed 的内容)
  • 在 ThickBox 中为 iframed 的, 内嵌的, 和 ajax 的内容添加了标题
  • 添加了图片集功能 (能用键盘的左右键导航)
  • 为 ThickBox 准备了新的 (单独的) CSS 文件
  • 修补了当第一次加载 ThickBox 时, Firefox 的缓冲问题
  • 清理并优化了 thickbox.js 文件
  • 为 ThickBox 添加了新的文件扩展名 .bmp
  • 删除了 ThickBox 的固定高度, 因此当有两行说明的时候将会垂直地延伸窗口

到 07/06/2006 为止

  • 添加了在 ThickBox 中使用内嵌 div 元素的能力
  • 添加了使用大小写字母为扩展名的能力
  • 使加载动画居中并忽略竖向滚动条
  • 在 IE 里, 当 ThickBox 打开时, 选择盒子隐藏了
  • 修补了当 anchor 元素没有标题是发生的问题
  • 修补了当覆盖层在加载动画时覆盖屏幕的问题 (针对 FF 和 Opera)
  • 使用了新的 jQuery 1.0 – Alpha 版本
回到顶部

例子-

 
描述:

这是 ThickBox 最简单的功能. 此例子放了一张图片在 ThickBox 里. (参看演示 tab)

使用说明:
  • 创建一个 link 元素 (<a href>)
  • 给 link 一个 class 属性并附值为 thickbox (class="thickbox")
  • 在 href 属性里给图片文件 (.jpg .jpeg .png .gif .bmp) 提供一个路径
点击图片:

Image 2

<a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
描述:

这个例子就和展示单一图片的功能一样, 只是除了使用了 rel 属性集合了图片, 所以在 ThickBox 中它们能被导航. 最理想的使用对象就是图片集.

使用说明:
  • 创建一个 link 元素 (<a href>)
  • 给 link 一个 class 属性并附值为 thickbox (class="thickbox")
  • 在 href 属性里给图片文件 (.jpg .jpeg .png .gif .bmp) 提供一个路径
  • 给每个 link 元素里添加一个 rel 元素并附上相同的值. (例如: rel="gallery-plants")
重要提示:

当你打开 ThickBox 图片集时, 你能用键盘的左右箭头键向前和向前和向后导航 (在 ThickBox 里也提供了下一页和上一页的链接). 图片将会在画廊中按 HTML 文档流程从第一张显示到最后一张.

点击图片:

Plant 1   Plant 2   Plant 3   Plant 4 

<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a> 
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a> 
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
描述:

不管页面上隐藏的或显示中的内嵌内容都能被放到 ThickBox 中.

使用说明:
  • 创建一个 link 元素 (<a href>)
  • 给 link 一个 class 属性并附值为 thickbox (class="thickbox")
  • 在 link 里给 href 的属性添加以下值 anchor: #TB_inline
  • 在 href 的属性里的 #TB_inline 之后添加以下 query string : 
    ?height=300&width=300&inlineId=myOnPageContent
  • 根据需要更改高和宽的值 (inlineID 是你想要放到 ThickBox 中显示的内容的 ID 值)
重要提示:

如果在 ThickBox 中要显示的内嵌的内容超出了 ThickBox 的显示区域, 竖向滚动条将会显示. 你要避免出现滚动条就要给 ThickBox 设置一个适当的尺度. 换句话说, 如果你不要滚动条, 就要增加 ThickBox 的高和宽, 直道 ThickBox 不再显示滚动条.

在 ThickBox 中显示以下三段内容.

第一段: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

第二段: Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

第三段: Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<a href="#TB_inline?height=300&width=300&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox">Show</a>
描述:

在 ThickBox 中打开被 iFramed URL. 对, 这正 Greybox 功能.

使用说明:
  • 创建一个 link 元素 (<a href>)
  • 给 link 一个 class 属性并附值为 thickbox (class="thickbox")
  • 在 link 的 href 属性中提供你要在 ThickBox 中显示的 URL.
  • 在 href 的属性中 URL 之后添加以下 query: 
    ?TB_iframe=true&height=400&width=600
  • 根据需要更改 query 中的高度和宽度的值
<a href="http://www.yahoo.com?TB_iframe=true&height=400&width=600" title="yahoo.com" class="thickbox">yahoo</a>  
<a href="http://www.google.com?TB_iframe=true&height=400&width=600" title="google.com" class="thickbox">google</a>
描述:

使用隐藏的 HTTP request (AJAX) 来从同一个服务器中获取文件并在 ThickBox 中显示出内容.

使用说明:
  • 创建一个 link 元素 (<a href>)
  • 给 link 一个 class 属性并附值为 thickbox (class="thickbox")
  • 在 href 中给服务器上的 (.html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt) 文件提供一个路径. (href="ajaxLogin.htm")
  • 在 href 的属性中, 在文件的 URL 后添加以下 query: 
    ?height=300&width=300
  • 根据需要更改 query 中的高度和宽度的值
<a href="ajaxOverFlow.htm?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a>  
<a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a>  
<a href="ajaxLogin.htm?height=100&width=250" class="thickbox" title="Please Sign In">login</a>
回到顶部

声明:
此文版权归Cody Lindley所有, 由croc翻译成中文. 因译者的英文能力有限, 若有翻译不当之处, 请多多包涵! 不要用口水淹我! 谢谢!