jQuery 選項卡 CleverTabs

CleverTabs是一款jQuery插件，所需jQuery版本:1.6.1，jQuery UI樣式版本:1.8.13；其功能為創建jQuery UI風格的Tab用於顯示iframe。

本示例中符加了jQuery.contextMenu插件，我修改了其樣式，使用了jQuery UI的皮膚

運行一下

效果如下圖:

初級應用示例：

HTML代碼:

1. <div id="tabs"><ul></ul></div>

Javascript代碼:

1. <script type="text/javascript">
2. $(function(){
3. tabs = $('#tabs').cleverTabs();
4. tabs.add({
5. url:'http://think8848.cnblogs.com',
6. label:'think8848'
7. });
8. });
9. </script>

CleverTabs詳細說明:

CleverTabs為所有Tab的容器            

1. var tabs;
2. <script type="text/javascript">
3. $(function(){
4. tabs = $('#tabs').cleverTabs({
5. //是否安裝右鍵菜單(預設: true)
6. setupContextMenu:true,
7. //右鍵菜單定義, 右鍵菜單功能由jquery.contextMenu插件提供
8. //詳見: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
9. //本插件中對原contextMenu插件中的樣式做了修改，使用了jQuery UI皮膚
10. contextMenu:{
11. element: $('#contextMenuElementId'),
12. handler:function(action, el, pos){/*do something...*/}
13. },
14. //開啟Tab後是否鎖定(不允許關閉，預設: false)
15. lock:false,
16. //開啟Tab後是否禁用(不允許激活和操作iframe內容，預設: false)
17. disable:false,
18. //當tabs中只有一個Tab時，是否鎖定該Tab(預設: true)
19. lockOnlyOne:true,
20. //顯示iframe的容器(預設創建在tabs元素中)
21. panelContainer: $('#panelContainerElementId')/*,
22. 其中
23. tabHeaderTemplate: '', //(Tab用於控制的頭模板)
24. tabPanelTemplate: '', //(Tab用於顯示的Panel模板)
25. uidGenerator: function() {} //(Tab唯一id生成器)
26. 功能現在不啟用，等有時間完善後再啟用*/
27. });
28. tabs.add({
29. url:'http://think8848.cnblogs.com',
30. label:'think8848'
31. });
32. });
33. </script>

CleverTabs.add方法

添加一個新的Tab並使之成為激活狀態，如果將要添加的url已經存在，則會激活該Tab           

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. tabs.add({
4. //必須是在tabs內唯一的id
5. id:'uniqueId',
6. //將要在iframe的src屬性設置的值
7. url:'iframe.src',
8. //顯示在Tab頭上的文字
9. label:'tab header',
10. //關閉本Tab時需要刷新的Tab的url(預設: null)
11. closeREfresh:'tab url',
12. //關閉本Tab時需要激活的Tab的url(預設: null)
13. closeActivate:'tab url',
14. //關閉本Tab時需要執行的回調函數
15. callback:function(){/*do something*/}
16. });
17. </script>

CleverTabs.getCurrentTab方法

獲取當前處於激活狀態的Tab            

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

CleverTabs.getTabByUrl方法

獲取指定url的Tab實例 

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. </script>

CleverTabs.clear方法

關閉tabs內所有未鎖定的Tab            

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

CleverTab.deactivate方法

使Tab頁面處於未激活狀態，但不建議在代碼中使用 
CleverTab.prevTab方法: 
獲取該Tab之前的Tab            

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. var prevTab = tab.prevTab();
5. </script>

CleverTab.nextTab方法

獲取該Tab之後的Tab

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. var prevTab = tab.nextTab();
5. </script>

CleverTab.kill方法

從tabs中移移該Tab            

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. tab.kill();
5. </script>

CleverTab.refresh方法

刷新該Tab的iframe中的內容            

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. tab.refresh();
5. </script>

CleverTab.setDisable方法

設置該Tab的disabled屬性，設置disabled為true後，自動設置該Tab的locked屬性為true            

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. //參數true為禁用，false或不提供值為啟用
5. tab.setDisable(true);
6. </script>

CleverTab.setLock方法

設置該Tab的locked屬性，設置locked為true後，該Tab的不允許關閉            

1. <script type="text/javascript">
2. var tabs =('#tabs').cleverTabs();
3. var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
4. //參數true為鎖定，false或不提供值為解鎖
5. tab.setLock(true);
6. </script>

"改變不了別人，就改變自已吧"

在現在的頁面中，多數情況下都可能由幾部分組成，比如:Banner,Navigator,Content等，而為了工作區域變的更大，很多時候諸如Banner,Navigator或者其他的Panel都會收起來(Collapse)，這個時候問題來了，當初我給tabs定義了width: 80%; height: 90%; 現在tabs的width和height發生了變化，可是內部的Tab頁面還沒有收到這個變化，它還是按照之前的size顯示呢，更要命的是resize事件居然只有window和body才有，div居然不支持此事件!真不知道他們是怎麼想的...在之前的cleverTabs中，我綁定了window.resize事件，但是問題在於我上面舉的例子中，window的size實際上沒有發生變化，甚至body也沒有，但是tabs的大小發生變化了，在這種情況下，如果您使用了預設的tabPenelContainer，那一定得處理tabs的resize事件，可是tabs就是一個div嘛，哪來的resize？昨晚在睡前突然想到個辦法，既然能"改變不了別人，就改變自已"，那麼就能"自已處理不了的事，就交給別人去處理吧"。把resize“外包”出去算了。於是對原來的代碼做了修改，在CleverTabs構造函數中，為CleverTabs的prototype添加了resizePanelContainer函數，tabs自已不知道發生了resize事件，但總歸有人知道發生了，誰知道誰調用，所謂的能者多勞?

CleverTabs.resizePanelContainer方法:

當使用CleverTabs預設的PanelContainer時，重新設置PanelContainer的size。

1. <script type="text/javascript">
2. var tabs;
3. $(function(){
4. tabs = $('#tabs').cleverTabs();
5. $(window).bind('resize',function(){
6. //當發生window.resize事件時，重新預設的tabs的PanelContainer的大小
7. tabs.resizePanelContainer();
8. });
9. </script>