thickbox.js
郑安晏
ThickBox 3.1
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與圖檔等檔案 放置於網頁目錄下
<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" />
運用一 :標準內置框架 || Example 1 | Example 2<a href="http://www.hsiu28.net/main/?keepThis=true&
TB_iframe=true&height=500&width=820" title="OECSPACE" class="thickbox"> OECSPACE </a>
<a href="iframebox.html?keepThis=true&TB_iframe=true&height=500&width=820
&modal=true" title="ThickBox" class="thickbox">Open iFrame Modal</a>
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" οnclick="self.parent.tb_remove();" />
運用二 :AJAX Content 載入檔案 || Example 1 | Example 2<a href="box.html?height=350&width=350& modal=true " title="AJAX Content" class="thickbox"> Example </a>
若刪除藍色部分 modal=true 就可顯示標題列.
載入的網頁例如.html .php .asp .jsp .cgi .txt...等等,適合簡易的內容.
載入的網頁中若要使用 AJAX Content 連結另一頁,請用同樣的方式.
下載查看以上範例中的兩個html檔案
由以上內部連結被開啟的網頁(例如 box.html),請將網頁儲存為utf-8模式,才可正常顯示中文,較適合簡易網頁.
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" οnclick="self.parent.tb_remove();" />
運用三 :顯示同一頁隱藏的文字 || Show hidden modal content在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<a href="#TB_inline?height=200&width=300&
inlineId=hiddenModalContent& modal=true" title="Title" class="thickbox">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 " οnclick="tb_remove()" /></p>
</div>
運用四 :按鈕開啟同一頁隱藏的文字 ||
在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent " title="title" class="thickbox" 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" class="thickbox">
<img src="img/photo1_s.jpg" alt="Single Image" /></a>
運用六 :多張圖像預覽
<a href="img/photo2.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo2_s.jpg" alt="Plant 1" /></a>
<a href="img/photo3.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo3_s.jpg" alt="Plant 2" /></a>
<a href="img/photo4.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo4_s.jpg" alt="Plant 3" /></a>
預覽圖片支援的格式有 .jpg .jpeg .png .gif .bmp
多張圖片的效果再開啟後會顯示上一頁和下一頁的連結,只要在每一個圖片標籤使用 rel 元素並設定相同的值為 rel="gallery-plants"
以上連結標籤中的 height=150&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圖.
程式作者 jquery.com & Cody Lindley, Thickbox 3.1
本站只提供完整的程式,若需要經過壓縮的程式請自行前往下載.
本站所提供下載的檔案會依照官方網站發布更新程式而不定期更新.
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與圖檔等檔案 放置於網頁目錄下
<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" />
運用一 :標準內置框架 || Example 1 | Example 2<a href="http://www.hsiu28.net/main/?keepThis=true&
TB_iframe=true&height=500&width=820" title="OECSPACE" class="thickbox"> OECSPACE </a>
<a href="iframebox.html?keepThis=true&TB_iframe=true&height=500&width=820
&modal=true" title="ThickBox" class="thickbox">Open iFrame Modal</a>
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" οnclick="self.parent.tb_remove();" />
運用二 :AJAX Content 載入檔案 || Example 1 | Example 2<a href="box.html?height=350&width=350& modal=true " title="AJAX Content" class="thickbox"> Example </a>
若刪除藍色部分 modal=true 就可顯示標題列.
載入的網頁例如.html .php .asp .jsp .cgi .txt...等等,適合簡易的內容.
載入的網頁中若要使用 AJAX Content 連結另一頁,請用同樣的方式.
下載查看以上範例中的兩個html檔案
由以上內部連結被開啟的網頁(例如 box.html),請將網頁儲存為utf-8模式,才可正常顯示中文,較適合簡易網頁.
若使用沒有標題列的效果,無法按任何地方來關閉視窗,所以必須在這網頁中加入關閉透明視窗的按鈕,如下:
<input type="submit" value="close" οnclick="self.parent.tb_remove();" />
運用三 :顯示同一頁隱藏的文字 || Show hidden modal content在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<a href="#TB_inline?height=200&width=300&
inlineId=hiddenModalContent& modal=true" title="Title" class="thickbox">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 " οnclick="tb_remove()" /></p>
</div>
運用四 :按鈕開啟同一頁隱藏的文字 ||
在同一頁中利用 display:none 將此區塊隱藏,透過效果來顯示這些顯藏的內容喔!
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.
<input alt="#TB_inline?height=150&width=400&inlineId=myOnPageContent " title="title" class="thickbox" 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" class="thickbox">
<img src="img/photo1_s.jpg" alt="Single Image" /></a>
運用六 :多張圖像預覽
<a href="img/photo2.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo2_s.jpg" alt="Plant 1" /></a>
<a href="img/photo3.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo3_s.jpg" alt="Plant 2" /></a>
<a href="img/photo4.jpg" title="Picture explanation" class="thickbox" rel="gallery-plants">
<img src="img/photo4_s.jpg" alt="Plant 3" /></a>
預覽圖片支援的格式有 .jpg .jpeg .png .gif .bmp
多張圖片的效果再開啟後會顯示上一頁和下一頁的連結,只要在每一個圖片標籤使用 rel 元素並設定相同的值為 rel="gallery-plants"
以上連結標籤中的 height=150&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圖.
程式作者 jquery.com & Cody Lindley, Thickbox 3.1
本站只提供完整的程式,若需要經過壓縮的程式請自行前往下載.
本站所提供下載的檔案會依照官方網站發布更新程式而不定期更新.
类似资料：