第一次接觸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的所有的問題都解決了,哈