例子

描述:

这是 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翻译成中文. 因译者的英文能力有限, 若有翻译不当之处, 请多多包涵! 不要用口水淹我! 谢谢!