使用thickbox問題集合及解決方案

第一次接觸thickbox的時候感覺就被標籤參數弄糊塗了,不過看了源代碼後,自己在使用的過程中也還是學到了一點東西,在這這裏

給初‘用’thickbox的朋友們一個小幫忙。還請高手多多指點。

一、首先說下參數

     a類型: <a href="#TB_inline?width=344&inlineId=mydiv&modal=true" class="thickbox">顯示</a>
 input類型: <input class="thickbox" alt="#TB_inline?width=285&height=392&inlineId=MyDiv&modal=true"

                               οnclick=" GetData('<%# Eval("STID") %>')" type="button" value="修改"/>

 

1、在使用thick的時候,參數中的TB_iframe說明灰色中間彈出的thickbox是通過加載另外一個文件來導入的

2、參數中的#TB_inline和inlineId=divname說明灰色中間彈出的thickbox是通過加載當前文件的一個div或則其他元素來的

3、#TB_inline和inlineId=divname這兩個標籤的要同時存在的,因爲在thickbox.js庫中是首先判斷參數中是否存在TB_inline後接着

來獲取標籤inlineId的值的,若參數中沒有標籤TB_inline就不會判斷inlineId的值的了

4、而參數中的標籤"TB_iframe”和“#TB_inline與inlineId=divname”這兩種情況是對立的,只能出現一種情況,因爲thickbox要嘛是

通過加載外部文件,要嘛就是加載當前頁面的某個元素,如div元素,而參數中的width和height是用來判斷thickbox的大小的

二、使用中碰到的一些問題

1、在說說在使用iframe子頁面中使用thickbox,然後父頁面調用iframe子頁面的一個錯誤問題。

 

一開始在網上找到了一些解決辦法來讓thickbox在父頁面中也是全屏顯示的問題,順便再這裏也在說明下,方法如下:

tb_show(t,a,g);  改成

window.parent.tb_show(t,a,g);  

然後在父頁面和iframe子頁面中都要寫上幾個js文件的引用,切忌:

他們是thickbox.css、jquery.js、thickbox.js
這三個文件一定要在兩個頁面中都要以後用

 

2、然後在這裏可能還會遇到一個問題。在使用加載當前頁面的時候,即在參數中有標籤:、#TB_inline和inlineId=divname。thickbox雖然是在父頁面中全屏顯示了,但是在父頁面查看的時候thickbox的加載頁面中看不到數據,調試後發現$('#' + params['inlineId'])爲空對象,但是在iframe子頁面查看的時候是看得到數據的,一個解決辦法是:把thickbox.js中的

$('#' + params['inlineId'])改成

window.frames["myiframe"].$('#' + params['inlineId'])。

 

3、在ie6、ie7、ie8中都要正常顯示的代碼是:

  把一開始的function tb_position()函數全部替換成如下:

 function isIE6()
{  
   return navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")=="-1"?false:true;  
}  

function tb_position() {
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
    if(isIE6())
    {
     if ( !(jQuery.browser.msie && jQuery.browser.version < 7))
     { // take away IE6
      $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
     }
    }
    else
    {
        if (jQuery.browser.msie)
     { // take away IE6
      $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
     }
    }
}

這樣在ie6、7、8中都顯示正常了。

4、但是在ie6中會有個小問題就是隱藏了滾動條。

解決方法如下:

找到下面這兩行代碼,把它們屏蔽了

$("body","html").css({height: "100%", width: "100%"});
$("html").css("overflow","hidden");

ok,接下來貌似所有關於thickbox的所有的問題都解決了,哈

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章