tab樣式的iframe

最近項(xiàng)目中要用到tab樣式的iframe，可以將iframe進(jìn)行tab一樣的添加修改，找了很久找到一款叫clever tabs的插件，簡單易懂，分享給大家。

源碼地址：http://yun.baidu.com/share/link?shareid=2713218817&uk=2836507213

直接訪問index.htm,得到效果如下：

點(diǎn)擊添加更多tab，將在tab欄中打開新的tab標(biāo)簽

下面簡單介紹下相關(guān)用法

1.CleverTabs.add方法:添加一個新的Tab并使之成為激活狀態(tài)，如果將要添加的url已經(jīng)存在，則會激活該Tab 

<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
tabs.add({ 
 id: 'uniqueId',              //必須是在tabs內(nèi)唯一的id
url: 'iframe.src',           //將要在iframe的src屬性設(shè)置的值 
label: 'tab header',         //顯示在Tab頭上的文字 
closeREfresh: 'tab url',     //關(guān)閉本Tab時需要刷新的Tab的url(默認(rèn): null) 
closeActivate: 'tab url',        //關(guān)閉本Tab時需要激活的Tab的url(默認(rèn): null) 
callback: function () { /*do something*/ }     //關(guān)閉本Tab時需要執(zhí)行的回調(diào)函數(shù) }); 
</script> 

2.CleverTabs.getCurrentTab方法: 
獲取當(dāng)前處于激活狀態(tài)的Tab 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getCurrentTab(); 
</script> 

3.CleverTabs.getTabByUrl方法: 
獲取指定url的Tab實(shí)例 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
</script> 

4.CleverTabs.clear方法: 
關(guān)閉tabs內(nèi)所有未鎖定的Tab 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.clear(); 
</script> 

5.CleverTab.deactivate方法: 
使Tab頁面處于未激活狀態(tài)，但不建議在代碼中使用 
CleverTab.prevTab方法: 
獲取該Tab之前的Tab 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
var prevTab = tab.prevTab(); 
</script> 

6.CleverTab.nextTab方法: 
獲取該Tab之后的Tab 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
var prevTab = tab.nextTab(); 
</script> 

7.CleverTab.kill方法: 
從tabs中移移該Tab 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
tab.kill(); 
</script> 

8.CleverTab.refresh方法: 
刷新該Tab的iframe中的內(nèi)容 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
tab.refresh(); 
</script> 

9.CleverTab.setDisable方法: 
設(shè)置該Tab的disabled屬性，設(shè)置disabled為true后，自動設(shè)置該Tab的locked屬性為true 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
//參數(shù)true為禁用，false或不提供值為啟用 
tab.setDisable(true); 
</script> 

10.CleverTab.setLock方法: 
設(shè)置該Tab的locked屬性，設(shè)置locked為true后，該Tab的不允許關(guān)閉 

　　復(fù)制代碼 代碼如下:

　　<script type="text/javascript"> 
var tabs = ('#tabs').cleverTabs(); 
var tab = tabs.getTabByUrl(''); 
//參數(shù)true為鎖定，false或不提供值為解鎖 
tab.setLock(true); 
</script> 

源碼很簡答，大家自己也可以嘗試著去修改