Jquery外掛程式Thickbox的使用總結及自訂設定

ThickBox運行需要的檔案

官方下載：

Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.

首先在 HTML 檔案的 head中匯入jquery.js 和thickbox.js檔案，匯入 thickbox.css 檔案;並且jquery.js 檔案放在前面：

<script src="../Scripts/jquery-latest.pack.js" mce_src="Scripts/jquery-latest.pack.js" type="text/javascript"></script>      <script src="../Scripts/thickbox.js" mce_src="Scripts/thickbox.js" type="text/javascript"></script>  <link href="../Styles/thickbox.css" mce_href="Styles/thickbox.css" rel="stylesheet" type="text/css" />  

最後你只要給元素添加 class=”thickbox” 屬性就可以開始用 thickbox

實現了一張圖片的彈出展示功能：

<a href="”bg.jpg”" mce_href="”bg.jpg”" class=”thickbox” ><img src="”bg.jpg”" mce_src="”bg.jpg”" alt=”圖片”/></a>  //只需要指定圖片的class為thickbox

彈出框使用方法：

<a href="Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500" title="首頁" class="thickbox" </a>  <input onclick="<web.path:path/>/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent" title="彈出層" class="thickbox" type="button" value="Ban Another" />  //內嵌內容  <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="標題" class="thickbox" type="button" value="Show" />    <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">顯示隱藏內容a>  //遮罩層  URL後面加?KeepThis=true&TB_iframe=true&height=400&width=600  參數字串中加 modal=true  ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true  這樣當關閉ThickBox時會調用ThickBox iframe (self.parent.tb_remove())內部的一個tb_remove()函數  所有其他參數字元都必須在TB_iframe 參數之前。URL中所有"TB" 之後的將被移除。  <a href="index.html?keepThis=true&TB_iframe=true&height=250&width=400" title="標題" class="thickbox">開啟一個頁面</a>    <a href="index.html?keepThis=true&TB_iframe=true&height=300&width=500" title="標題" class="thickbox">開啟一個頁面</a>  <a href="index.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="標題" class="thickbox">開啟一個頁面</a>  

 

自訂設定：

1、快顯視窗(div)右上方的關閉按鈕為顯示為"close or esc key"，而不是中文的; 如果想把它變成[X]或"關閉"應該怎麼來辦呢？

將thickbox.js檔案開啟，尋找關鍵字"or esc key"，將其刪除，並將前面的close更改為[X]或"關閉"，然後把檔案另存新檔UTF-8格式，如果不儲存為UTF-8的話，將會出現亂碼。

2、thickbox 彈出層的遮住層透明度修改

開啟thickbox.css尋找.TB_overlayBG 變更

.TB_overlayBG {   background-color:#000;   filter:alpha(opacity=75);   -moz-opacity: 0.75;   opacity: 0.75;  }

3、關閉層：如果我們需要自己添加一個關閉按鈕或者圖片可以使用：

onclick="self.parent.tb_remove();"  

4、關閉層重新整理父頁面,修改關閉方法 ：

function tb_remove() { $("#TB_imageOff").unbind("click");$("#TB_closeWindowButton").unbind("click");$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});$("#TB_load").remove();if (typeof document.body.style.maxHeight == "undefined") {//if IE 6$("body","html").css({height: "auto", width: "auto"});$("html").css("overflow","");}document.onkeydown = "";document.onkeyup = "";//重新整理父頁面，未指定window.location.reload();return false;}

5、thickbox外掛程式預設情況是點擊灰色的遮罩層就會關閉取消

把兩個$("#TB_overlay").click(tb_remove);去掉就可以取消掉

6、updatepanel回傳後thickbox失效的解決方案

只需把以下代碼粘貼至頁面中就OK了。<script type="text/javascript" language="javascript">function pageLoad(){    var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();    if (isAsyncPostback)     {        tb_init('a.thickbox, area.thickbox, input.thickbox');    }}</script>