Jquery tab插件wdScrollTab 在chrome中出現(xiàn)不兼容的問題
來源：程序員人生 發(fā)布時(shí)間：2014-12-16 08:25:14 閱讀次數(shù)：4131次
先貼上jsp里面調(diào)用的代碼
var gh ="${teacher.GH }";
var grjlurl = _webRootPath + "content/search/teacher/teacher.grjl.jsp?gh="+gh;
var jcTabs = [
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="'+grjlurl+'" id="grjlList" name="grjlList"></iframe>',
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="kyxmList" name="kyxmList"></iframe>',
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xslwList" name="xslwList"></iframe>',
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="xszzList" name="xszzList"></iframe>',
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="zscqList" name="zscqList"></iframe>',
'<iframe width="100%" scrolling="no" height="100%" frameborder="0" src="" id="hjcgList" name="hjcgList"></iframe>',
'<iframe width="100%" scrolling="yes" height="100%" frameborder="0" src="" id="xcdyList" name="xcdyList"></iframe>'
];
j$(document).ready(function(){
var tabpanel2 = new TabPanel({
renderTo:'tab',
width:'99%',
//height:'331',
//border:'none',
active : 0,
//autoResizable : true,
//maxLength : 6,
items : [
{id:'toolbarPlugin1',title:'個(gè)人簡(jiǎn)歷', html:jcTabs[0],closable: false},
{id:'toolbarPlugin2',title:'科研項(xiàng)目',html:jcTabs[1],closable: false, func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
{id:'toolbarPlugin3',title:'學(xué)術(shù)論文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
{id:'toolbarPlugin4',title:'學(xué)術(shù)著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
{id:'toolbarPlugin5',title:'知識(shí)產(chǎn)權(quán)',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
{id:'toolbarPlugin6',title:'獲獎(jiǎng)成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
]
});
});
在FF,IE等閱讀器里面都顯示正常
但是在chrome里面出現(xiàn)奇怪的問題，有時(shí)候全部tab的高度只有1行，下面的內(nèi)容不顯示
又或變成下面這樣
查看代碼發(fā)現(xiàn)，第1種毛病是由于在TabPanel.js中，alert(this.render.height())得到是0，感覺很奇怪，我單獨(dú)寫了個(gè)html測(cè)試，又沒有出現(xiàn)這樣的問題，但在這里,render的高度取出來就是0.renderTo指向的是<div id="tab"></div>, 后來沒辦法，我把它改成<div id="tab" style="height:100%"></div> 后就正常了，取出來的height就不是0了。
this.height = config.height || '100%';
this.render = typeof this.renderTo == 'string' ? $('#'+this.renderTo) : this.renderTo;
this.render.height(this.height);
this.tabpanel = $('<DIV></DIV>');
this.tabpanel.addClass('tabpanel');
this.tabpanel.width(this.render.width()-hwFix);
this.tabpanel.height(this.render.height()-hwFix);
第2個(gè)毛病，我發(fā)現(xiàn)是由于，下面的部份被履行了兩次。
j$(document).ready(function(){}
百思不得其解，后面上網(wǎng)看到有人說
jquery的appendTo可能引發(fā)這個(gè)問題，因而修改代碼
var loaded = false;
j$(document).ready(function(){
if(!loaded){
loaded = true;
var tabpanel2 = new TabPanel({
renderTo:'tab',
width:'99%',
//height:'331',
//border:'none',
active : 0,
//autoResizable : true,
//maxLength : 6,
items : [
{id:'toolbarPlugin1',title:'個(gè)人簡(jiǎn)歷', html:jcTabs[0],closable: false},
{id:'toolbarPlugin2',title:'科研項(xiàng)目',html:jcTabs[1],closable: false, func:'doSearchList(1,"kyxmList","getKyxmList.action")'},
{id:'toolbarPlugin3',title:'學(xué)術(shù)論文',html:jcTabs[2],closable: false, func:'doSearchList(1,"xslwList","getXslwList.action")'},
{id:'toolbarPlugin4',title:'學(xué)術(shù)著作',html:jcTabs[3],closable: false, func:'doSearchList(1,"xszzList","getXszzList.action")'},
{id:'toolbarPlugin5',title:'知識(shí)產(chǎn)權(quán)',html:jcTabs[4],closable: false, func:'doSearchList(1,"zscqList","getZscqList.action")'},
{id:'toolbarPlugin6',title:'獲獎(jiǎng)成果',html:jcTabs[5],closable: false, func:'doSearchList(1,"hjcgList","getHjcgList.action")'},
{id:'toolbarPlugin7',title:'薪酬待遇',html:jcTabs[6],closable: false, func:'doSearchList(1,"xcdyList","getXcdyList.action")'}
]
});
}
});
增加1個(gè)標(biāo)識(shí)loaded后，問題終究解決。
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
