ThickBox 是 Cody Lindley 使用超輕量級的 jQuery 所開發,
ThickBox是多功能性的,它提供有對於圖像、內置框架、內嵌內容、AJAX內容 等變化, 在點擊連結後能在網頁形成美觀的透明層展示,在改變瀏覽器大小或捲動捲軸時都能保持居中.

✦ 對於圖像能用單一或多張方式來展示,並能重新調整大於瀏覽器的圖檔
✦ 能夠在透明層中開啟內置框架預覽網頁
✦ 開啟顯示網頁中指定的區塊內容
✦ AJAX Content 載入網頁內容


瀏覽器支援:
Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera 9.0+,
Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+

下載JS、CSS與圖檔等檔案 放置於網頁目錄下

<HEAD>與</HEAD>之間

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

<BODY>與</BODY>之間

運用一 :標準內置框架 ||

<a href="http://www.hsiu28.net/main/?keepThis=true&amp;
TB_iframe=true&amp;height=500&amp;width=820" title="OECSPACE"> OECSPACE </a>

<a href="iframebox.html?keepThis=true&TB_iframe=true&height=500&width=820
&amp;modal=true" title="ThickBox">Open iFrame Modal</a>

✦若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:

<input type="submit" value="close" onclick="self.parent.tb_remove();" /> 

運用二 :AJAX Content 載入檔案 || 

<a href="box.html?height=350&amp;width=350&amp; modal=true " title="AJAX Content"> Example </a>

✦若刪除藍色部分 modal=true 就可顯示標題列.
✦載入的網頁例如.html .php .asp .jsp .cgi .txt...等等,適合簡易的內容.
✦載入的網頁中若要使用 AJAX Content 連結另一頁,請用同樣的方式.
下載查看以上範例中的兩個html檔案✦由以上內部連結被開啟的網頁(例如 box.html),請將網頁儲存為utf-8模式,才可正常顯示中文,較適合簡易網頁.
✦若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:

<input type="submit" value="close" onclick="self.parent.tb_remove();" />

運用三 :顯示同一頁隱藏的文字 || 

<a href="#TB_inline?height=200&amp;width=300&amp;
inlineId=hiddenModalContent&amp; modal=true" title="Title">Show hidden modal content</a>

<div id="hiddenModalContent" style="display:none" >
<p>ThickBox hidden modal content</p>
<p style="text-align:center"><input type="submit" value=" O k " onclick="tb_remove()" /></p>
</div>

運用四 :按鈕開啟同一頁隱藏的文字 ||

<input alt="#TB_inline?height=150&amp;width=400&amp;inlineId=myOnPageContent " title="title" type="button" value="Show" />

<div id="myOnPageContent" style="display:none" >
<p>ThickBox hidden modal content.</p>
</div>

✦若刪除藍色部分 modal=true 就可顯示標題列.
style="display:none" 將區塊內容設為隱藏,不隱藏內容可刪除.
✦若要開啟不同的隱藏內容,重複以上方式但需要更改上方粗體部分的ID名稱,也就是說不同的ID名稱才能開啟不同的內容.

運用五 :單一圖像預覽

<a href="img/photo1.jpg" title="Picture explanation">
<img src="img/photo1_s.jpg" alt="Single Image" /></a>

運用六 :多張圖像預覽

<a href="img/photo2.jpg" title="Picture explanation" rel="gallery-plants">
<img src="img/photo2_s.jpg" alt="Plant 1" /></a>
<a href="img/photo3.jpg" title="Picture explanation" rel="gallery-plants">
<img src="img/photo3_s.jpg" alt="Plant 2" /></a>
<a href="img/photo4.jpg" title="Picture explanation" rel="gallery-plants">
<img src="img/photo4_s.jpg" alt="Plant 3" /></a>


✦預覽圖片支援的格式有 .jpg .jpeg .png .gif .bmp ✦多張圖片的效果再開啟後會顯示上一頁和下一頁的連結,只要在每一個圖片標籤使用 rel 元素並設定相同的值為 rel="gallery-plants"
✦以上連結標籤中的 height=150&amp;width=400 代表開啟視窗的寬高
✦以上連結標籤中的 title="...." 代表標題列的主題與圖片的說明文字
✦2009.2.22 更新內置框架使用方法:
請打開 thickbox.js 找出第25行,將 tb_show(t,a,g); 修改為 top.tb_show(t,a,g); 感謝SR資源館提供修改方式

✦若套用此效果有出現某些問題,請先在網頁 html 首行加入DTD宣告看是可否解決你的問題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
✦如果網頁中有放置 Flash 在開啟效果時會顯示在上層擋住圖檔,解決方式:
在 flash 的 Object 標籤加入參數:
<param name="wmode" value="transparent">
在 embed 標籤加入參數:
wmode="transparent"
✦介紹 AJAX Loading 動態圖檔製造機,這個網站 ajaxload ,有圖案、顏色和背景透視等選擇,能讓你輕輕鬆鬆做出自己喜歡的Loading圖.

創作者介紹

Bonnie ✦ 美國代買、代購

Bonnie✦ 發表在 痞客邦 留言(0) 人氣()