您好,登錄后才能下訂單哦!
這篇文章主要介紹了jQuery EasyUI中刷新Tab選項(xiàng)卡后一個頁面變形怎么辦,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
書寫jQuery EasyUI Tab 樣例時,如果刷新前面的Tab 選項(xiàng)卡,某一個Tab 選項(xiàng)卡里面的頁面布局變亂。如下面圖片所示:
剛開始打開時頁面布局正確:
此時我們在第二個選項(xiàng)卡里面,點(diǎn)擊第一個頁面的刷新按鈕,一直刷新,然后切換回來再看看頁面,如下圖:
但是首頁選項(xiàng)卡的頁面是正常的。
為了便于解釋說明,這里用第一個選項(xiàng)卡代表 “首頁”,第二個選項(xiàng)卡代表”子菜單10”
出現(xiàn)這種情況的問題根本原因在于,你在第二個選項(xiàng)卡里面,點(diǎn)擊其它第一個選項(xiàng)卡刷新按鈕時,其實(shí)刷新的時第二個選項(xiàng)頁面內(nèi)容,當(dāng)你鼠標(biāo)離開你第一個選項(xiàng)卡刷新按鈕時 ,此時才選中了第一個選項(xiàng)卡,而這時候第二個選項(xiàng)卡還沒有渲染完畢,才導(dǎo)致出現(xiàn)這樣的情況。驗(yàn)證過程,這是使用的是驗(yàn)證選項(xiàng)卡的title.
打開兩個選項(xiàng)卡,一個”首頁”,一個”子菜單10”選項(xiàng)卡,切換到”子菜單10”選項(xiàng)卡,然后點(diǎn)擊”首頁”選項(xiàng)卡的刷新按鈕,彈出的結(jié)果如下的圖,可見在鼠標(biāo)點(diǎn)擊的過程中,tab 里面選中的還是”子菜單10”選項(xiàng)卡,并不是我們看到的”首頁”選項(xiàng)卡。
出現(xiàn)上圖問題的錯誤代碼如下:
/* title表示tab選項(xiàng)卡的標(biāo)題 */ function refeshCurrentTab() { var tabPanel = $('#tabContainer');//存放tab選項(xiàng)卡的容器 var tab = tabPanel.tabs('getSelected'); //alert("tab選項(xiàng)卡選中按鈕的title:"+tab.panel('options').title); var url = $(tab.panel('options').content).attr('src'); tabPanel.tabs('update', { tab: tab, options: { content: createFrame(url) //創(chuàng)建Frame標(biāo)簽 } }); }; function createFrame(url) { return '<iframe src="' + url + '" frameborder="0" ></iframe>'; };
找到問題的根本所在,那么在上述方法中,只需要刷新時傳入刷新按鈕那個tab選項(xiàng)卡的標(biāo)題,選中這個,然后再進(jìn)行刷新操作。修改的代碼如下:
/* title表示tab選項(xiàng)卡的標(biāo)題 */ function refeshCurrentTab(title) { var tabPanel = $('#tabContainer'); var tab = tabPanel.tabs('getSelected'); //alert("傳入的參數(shù)title:"+title+",tab選項(xiàng)卡選中按鈕的title:"+tab.panel('options').title); var refeshTab = tabPanel.tabs("getTab", title); if (tab != refeshTab) { tabPanel.tabs("select", title); tab = refeshTab; } var url = $(tab.panel('options').content).attr('src'); tabPanel.tabs('update', { tab: tab, options: { content: createFrame(url) } }); }; function createFrame(url) { return '<iframe src="' + url + '" frameborder="0" ></iframe>'; };
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jQuery EasyUI中刷新Tab選項(xiàng)卡后一個頁面變形怎么辦”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。