多iframe使用tab標(biāo)簽方式添加刪除切換的處理實(shí)例

1、多 iframe 使用 tab 標(biāo)簽方式添加、刪除、切換的處理實(shí)例緊接著上一篇隨筆 iframe 的內(nèi)容增高或縮減時(shí)設(shè) 置其 iframe 的高度的處理方案如果采用 iframe 來切換顯示內(nèi)容的方式來展現(xiàn)辦公Web 。那么需要解決幾個(gè)問題1. tab 標(biāo)簽需要和顯示的 iframe 一一對(duì)應(yīng)，當(dāng)點(diǎn)擊到某 個(gè) tab 頁簽的時(shí)候需要切換到對(duì)應(yīng)的 iframe 。2. 需要有新增、刪除頁簽的 tab 功能。3. 在 tab 頁簽之間切換的時(shí)候需要有一個(gè)記錄點(diǎn)擊的頁 簽的歷史記錄的功能。何用？當(dāng)你刪除某個(gè)頁簽的時(shí)候，需 要回溯到上一個(gè)頁簽。4. 不斷添加頁簽，需要計(jì)算頁簽的寬度做適配。本實(shí)例是這樣

2、做的<div class=tabbable id=tabs><!- Tab 標(biāo)簽列表 -><ul class=nav nav-tabs id=myTab></ul><!- 顯示內(nèi)容列表，和 Tab 標(biāo)簽列表一一對(duì)應(yīng) -><div class=tab-content></div></div>如上 ,#myTab 是用來保存 Tab 標(biāo)簽頁的， .tab-content 用來保存 iframe 頁面列表。 下面舉例說明里面的內(nèi)容， 例子 中有兩個(gè) Tab 頁，效果圖如下主要 style 樣式表如下Vie

3、w Code標(biāo)簽內(nèi)容如下 <div class=tabbableid=tabs><!- 頁面標(biāo)簽列表 -><ul class=nav nav-tabs id=myTab><li id=tab-0 class=><a data-toggle=tab href=#tab-content-0 style=width: 518px; padding-left: 10px;> 首頁 </a><i class=fa fa-times onclick=deleteTab(0)></i></li><

4、;li id=tab-10301 class=active><a data-toggle=tab href=#tab-content-10301 style=width: 518px; padding-left: 10px;> 動(dòng)向匯報(bào) </a><i class=fa fa-times onclick=deleteTab(10301)></i></li></ul><!- 頁面內(nèi)容列表，和頁面標(biāo)簽列表對(duì)應(yīng)-><div class=tab-content><div class= id=tab

5、-content-0><iframe id=iframepage0 name=iframepage1 width=100% frameborder=0 scrolling=no src=/business/system/manage/welcome/list/page height=311></iframe></div><div id=tab-content-10301 class=active> <iframe id=iframepage4 name=iframepage5 width=100% frameborder=0 scro

6、lling=no src=/business/workReport/manage/list/myPage height=311></iframe></div></div></div>看上面黑色粗體字， tab 標(biāo)簽列表中的 a 元素的 href 屬 性即是對(duì)應(yīng)的頁面內(nèi)容 DIV 標(biāo)簽的 id 。 tab 標(biāo)簽 li 和內(nèi)容標(biāo) 簽 div 默認(rèn)都是隱藏的， 通過添加 class active 來使之顯示出 來。實(shí)現(xiàn)點(diǎn)擊切換顯示 tab 顯示的代碼為/切換 tab 頁的顯示$(document).on(click,#myTab > li,

7、function(e)/清除原來顯示的 tab 頁var oldTab = $(#myTab li.active).removeClass(active).find(adata-toggle=tab)$(oldTab.attr(href).removeClass(active);/設(shè)置新的顯示 tab 頁var newTab = $(this).addClass(active).find(adata-toggle=tab);$(newTab.attr(href).addClass(active);refreshTabHistory(false/*isDelete*/,$(this).attr(

8、id).substrin g(4);)/手動(dòng)調(diào)用切換到要顯示的 tab 頁 ,當(dāng)前的 action 只支持 show /eg:$(#tab-0 adata-toggle=tab).tab(show);$.fn.tab = function(action)if(action = show) $(this).parent().click();新增和刪除 tab 頁var currentTabId = ;/ 當(dāng)前焦點(diǎn) Tab /在非左側(cè)菜單欄彈出的 tab 頁也會(huì)用到該數(shù)據(jù)，如 common.js 中的 pageForward 函數(shù) var pageCounter = 0;/*id: tab 頁簽的

9、 html 標(biāo)簽 ID 屬性格式為 tab-+id ，內(nèi) 容容器的 html 標(biāo)簽 ID 格式為 tab-content-+idtext:tab 頁簽的顯示文本url: 打開的 iframe 的 urlinnerTab: 是否是內(nèi)部彈出頁(打開的 tab 頁觸發(fā)添加新的 tab 頁)，默認(rèn)為 undefined/false*/ function addTab(id,text,url,innerTab) /如果某個(gè)頁面已經(jīng)打開，則切換到該頁顯示即可，不會(huì) 新添加 tab 頁if($(#myTab #tab-+id).length > 0) $(#myTab #tab- + id + a).

10、tab(show);else var tab_id = tab- + id, tab_content_id = tab-content-+id;/添加 tab 頁簽$(#myTab > li).removeClass(active);$(#myTab).append(<li id= + tab_id + class=active><a data-toggle=tab href=#+ tab_content_id + > + text + </a>+ (<i class=fa fa-times onclick=deleteTab( + id + )

11、></i>) + </li>);/添加新的內(nèi)容顯示$(.tab-content > div).removeClass(active);$(.tab-content).append(<div id=+ tab_content_id+ class=active>+ <iframe id=iframepage + (pageCounter+) + name=iframepage + (pageCounter+)+ width=100% frameborder=0 scrolling=nosrc= + url + ></iframe&g

12、t;</div>);/刷新切換 tab 的歷史記錄 refreshTabHistory(false/*isDelete*/,id);/重新設(shè)置 tab 頁簽的寬度refreshWidth();/參數(shù) id 為 tab 的標(biāo)志，但是并不是 tab 頁的 id 屬性，真正的 id 屬性值是 tab-+idfunction deleteTab(id)var tabJQ = $(#tab-+id),tabContentJQ = $(#tab-content- + id);if(!tabJQ.hasClass(active) tabJQ.remove(); tabContentJQ.remo

13、ve(); refreshTabHistory(true/*isDelete*/,id);else tabJQ.remove(); tabContentJQ.remove(); refreshTabHistory(true/*isDelete*/,id);$(#tab- + currentTabId + > a).tab(show).click(); refreshWidth();/關(guān)閉當(dāng)前 tab 頁的快速方法function closeCurrentTab() deleteTab(currentTabId);新增、修改、切換 tab 的歷史記錄刷新函數(shù)/*刷新頁簽切換歷史 isdel

14、ete: 是否是刪除 tab 頁簽 ,true: 是， false ：否 curTabId ：要處理的 tab 頁簽的 id,tab 頁簽 html 標(biāo)簽元素的 ID 屬性格式為 tab-+curTabId*/function refreshTabHistory(isdelete,curTabId) if(!refreshTabHistory.histoty)/用來記錄用戶點(diǎn)擊 tab 的歷史 refreshTabHistory.histoty = ;var index = 0,leng = refreshTabHistory.histoty.length;/查找傳入的 tab 頁簽在歷史記錄

15、中的位置for(; index < leng; index+) if(refreshTabHistory.histotyindex = curTabId) break;/如果是刪除頁簽，直接在歷史記錄中刪除即可，歷史記 錄的其他頁簽的順序不變if(isdelete)refreshTabHistory.histoty.splice(index,1);/如果是新增頁簽，先保證歷史記錄中沒有改頁簽(有就 刪掉)，然后將新增的頁簽放在歷史記錄的最后面(即該頁 簽為最新)elseif(index < leng) refreshTabHistory.histoty.splice(index,1

16、);refreshTabHistory.histoty.push(curTabId);currentTabId = refreshTabHistory.histotyrefreshTabHistory.histoty.length - 1;每一個(gè)頁簽的構(gòu)成如下可以看到 tab 頁簽的 margin-left 和關(guān)閉按鈕是必須要有 的，所以 tab 頁簽的最小寬度為 25px 。唯一可以設(shè)置寬度的 是 tab 頁簽的名稱顯示部分 (也就是 css 選擇器 #myTab > li > a 對(duì)應(yīng)的 DOM 元素)，我們必須保證每個(gè) tab 頁簽的 寬度相同。本實(shí)例處理為：默認(rèn) tab 頁

17、簽名稱元素 a 標(biāo)簽的最大寬度是 108px 。隨著頁簽的增多，寬度不夠用的時(shí)候先 a 標(biāo)簽 的內(nèi)容部分的寬度， 當(dāng) a 標(biāo)簽的內(nèi)容部分的寬度為 0 后開始 縮減 a 標(biāo)簽的 padding-left ，直到 padding-left 為 0 為止。 當(dāng) 頁簽過多的時(shí)候 (每個(gè)頁簽至少 25px ，那么寬度總會(huì)到不夠 用的時(shí)候)，我們沒有考慮這種情況的處理，試想誰會(huì)打開 這么多頁簽，這會(huì)讓瀏覽器都卡住了。源碼如下/刷新重置 tab 頁簽的寬度function refreshWidth()var panelWidth = $(#myTab).width() - 20/*可能存在的滾動(dòng)條寬度 */

18、,tabs = $(#myTab > li),tabContentAverageWidth = 0/*tab > a標(biāo)簽的寬度 */,minTabAverageWidth = 25/*margin-left:5,X按鈕寬度為 20*/,zeroContentTabWidth = 35/* 當(dāng) tab > a 標(biāo)簽寬度為 0 時(shí) tab 標(biāo)簽對(duì)應(yīng)的寬度是 30px ，外加上 margin-left:5*/,aPaddingLeft = 10/*tab > a 標(biāo)簽的 padding-left 默認(rèn) 是 10 ，當(dāng) averageWidth< 35 需要調(diào)整 */;averageWidth = parseInt(panelWidth/(tabs.length),10);/ if(averageWidth >= zeroContentTabWidth) tabContentAverageWidth = averageWidth - zeroContentTabWidth;/*35 > averageWidth >= 25*/else if(averageWidth >= minTabAverageWidth) tabContentAverageWidth = 0; aPaddingLeft = averageWid