例子
描述:
這是 ThickBox 最簡(jiǎn)單的功能. 此例子放了一張圖片在 ThickBox 里. (參看演示 tab)
使用說(shuō)明:
- 創(chuàng)建一個(gè) link 元素 (<a href>)
- 給 link 一個(gè) class 屬性并附值為 thickbox (class="thickbox")
- 在 href 屬性里給圖片文件 (.jpg .jpeg .png .gif .bmp) 提供一個(gè)路徑
點(diǎn)擊圖片:
<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>描述:
這個(gè)例子就和展示單一圖片的功能一樣, 只是除了使用了 rel 屬性集合了圖片, 所以在 ThickBox 中它們能被導(dǎo)航. 最理想的使用對(duì)象就是圖片集.
使用說(shuō)明:
- 創(chuàng)建一個(gè) link 元素 (<a href>)
- 給 link 一個(gè) class 屬性并附值為 thickbox (class="thickbox")
- 在 href 屬性里給圖片文件 (.jpg .jpeg .png .gif .bmp) 提供一個(gè)路徑
- 給每個(gè) link 元素里添加一個(gè) rel 元素并附上相同的值. (例如: rel="gallery-plants")
重要提示:
當(dāng)你打開(kāi) ThickBox 圖片集時(shí), 你能用鍵盤的左右箭頭鍵向前和向前和向后導(dǎo)航 (在 ThickBox 里也提供了下一頁(yè)和上一頁(yè)的鏈接). 圖片將會(huì)在畫(huà)廊中按 HTML 文檔流程從第一張顯示到最后一張.
點(diǎn)擊圖片:
<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>描述:
不管頁(yè)面上隱藏的或顯示中的內(nèi)嵌內(nèi)容都能被放到 ThickBox 中.
使用說(shuō)明:
- 創(chuàng)建一個(gè) link 元素 (<a href>)
- 給 link 一個(gè) class 屬性并附值為 thickbox (class="thickbox")
- 在 link 里給 href 的屬性添加以下值 anchor: #TB_inline
- 在 href 的屬性里的 #TB_inline 之后添加以下 query string :
?height=300&width=300&inlineId=myOnPageContent - 根據(jù)需要更改高和寬的值 (inlineID 是你想要放到 ThickBox 中顯示的內(nèi)容的 ID 值)
重要提示:
如果在 ThickBox 中要顯示的內(nèi)嵌的內(nèi)容超出了 ThickBox 的顯示區(qū)域, 豎向滾動(dòng)條將會(huì)顯示. 你要避免出現(xiàn)滾動(dòng)條就要給 ThickBox 設(shè)置一個(gè)適當(dāng)?shù)某叨? 換句話說(shuō), 如果你不要滾動(dòng)條, 就要增加 ThickBox 的高和寬, 直道 ThickBox 不再顯示滾動(dòng)條.
在 ThickBox 中顯示以下三段內(nèi)容.
第一段: 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 中打開(kāi)被 iFramed URL. 對(duì), 這正 Greybox 功能.
使用說(shuō)明:
- 創(chuàng)建一個(gè) link 元素 (<a href>)
- 給 link 一個(gè) class 屬性并附值為 thickbox (class="thickbox")
- 在 link 的 href 屬性中提供你要在 ThickBox 中顯示的 URL.
- 在 href 的屬性中 URL 之后添加以下 query:
?TB_iframe=true&height=400&width=600 - 根據(jù)需要更改 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) 來(lái)從同一個(gè)服務(wù)器中獲取文件并在 ThickBox 中顯示出內(nèi)容.
使用說(shuō)明:
- 創(chuàng)建一個(gè) link 元素 (<a href>)
- 給 link 一個(gè) class 屬性并附值為 thickbox (class="thickbox")
- 在 href 中給服務(wù)器上的 (.html .htm .cfm .php .asp .aspx .jsp .jst .rb .txt) 文件提供一個(gè)路徑. (href="ajaxLogin.htm")
- 在 href 的屬性中, 在文件的 URL 后添加以下 query:
?height=300&width=300 - 根據(jù)需要更改 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>