CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI樣式版本:1.8.13;其功能為創建jQuery UI風格的Tab用於顯示iframe。 本示例中符加了jQuery.contextMenu插件,我修改了其樣式,使用了jQuery UI的皮膚 運行一下 ...
CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI樣式版本:1.8.13;其功能為創建jQuery UI風格的Tab用於顯示iframe。
本示例中符加了jQuery.contextMenu插件,我修改了其樣式,使用了jQuery UI的皮膚
效果如下圖:
初級應用示例:
HTML代碼:
- <div id="tabs"><ul></ul></div>
Javascript代碼:
- <script type="text/javascript">
- $(function(){
- tabs = $('#tabs').cleverTabs();
- tabs.add({
- url:'http://think8848.cnblogs.com',
- label:'think8848'
- });
- });
- </script>
CleverTabs詳細說明:
CleverTabs為所有Tab的容器
- var tabs;
- <script type="text/javascript">
- $(function(){
- tabs = $('#tabs').cleverTabs({
- //是否安裝右鍵菜單(預設: true)
- setupContextMenu:true,
- //右鍵菜單定義, 右鍵菜單功能由jquery.contextMenu插件提供
- //詳見: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
- //本插件中對原contextMenu插件中的樣式做了修改,使用了jQuery UI皮膚
- contextMenu:{
- element: $('#contextMenuElementId'),
- handler:function(action, el, pos){/*do something...*/}
- },
- //開啟Tab後是否鎖定(不允許關閉,預設: false)
- lock:false,
- //開啟Tab後是否禁用(不允許激活和操作iframe內容,預設: false)
- disable:false,
- //當tabs中只有一個Tab時,是否鎖定該Tab(預設: true)
- lockOnlyOne:true,
- //顯示iframe的容器(預設創建在tabs元素中)
- panelContainer: $('#panelContainerElementId')/*,
- 其中
- tabHeaderTemplate: '', //(Tab用於控制的頭模板)
- tabPanelTemplate: '', //(Tab用於顯示的Panel模板)
- uidGenerator: function() {} //(Tab唯一id生成器)
- 功能現在不啟用,等有時間完善後再啟用*/
- });
- tabs.add({
- url:'http://think8848.cnblogs.com',
- label:'think8848'
- });
- });
- </script>
CleverTabs.add方法
添加一個新的Tab並使之成為激活狀態,如果將要添加的url已經存在,則會激活該Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- tabs.add({
- //必須是在tabs內唯一的id
- id:'uniqueId',
- //將要在iframe的src屬性設置的值
- url:'iframe.src',
- //顯示在Tab頭上的文字
- label:'tab header',
- //關閉本Tab時需要刷新的Tab的url(預設: null)
- closeREfresh:'tab url',
- //關閉本Tab時需要激活的Tab的url(預設: null)
- closeActivate:'tab url',
- //關閉本Tab時需要執行的回調函數
- callback:function(){/*do something*/}
- });
- </script>
CleverTabs.getCurrentTab方法
獲取當前處於激活狀態的Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getCurrentTab();
- </script>
CleverTabs.getTabByUrl方法
獲取指定url的Tab實例
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- </script>
CleverTabs.clear方法
關閉tabs內所有未鎖定的Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.clear();
- </script>
CleverTab.deactivate方法
使Tab頁面處於未激活狀態,但不建議在代碼中使用
CleverTab.prevTab方法:
獲取該Tab之前的Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- var prevTab = tab.prevTab();
- </script>
CleverTab.nextTab方法
獲取該Tab之後的Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- var prevTab = tab.nextTab();
- </script>
CleverTab.kill方法
從tabs中移移該Tab
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- tab.kill();
- </script>
CleverTab.refresh方法
刷新該Tab的iframe中的內容
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- tab.refresh();
- </script>
CleverTab.setDisable方法
設置該Tab的disabled屬性,設置disabled為true後,自動設置該Tab的locked屬性為true
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- //參數true為禁用,false或不提供值為啟用
- tab.setDisable(true);
- </script>
CleverTab.setLock方法
設置該Tab的locked屬性,設置locked為true後,該Tab的不允許關閉
- <script type="text/javascript">
- var tabs =('#tabs').cleverTabs();
- var tab = tabs.getTabByUrl('http://think8848.cnblogs.com');
- //參數true為鎖定,false或不提供值為解鎖
- tab.setLock(true);
- </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。
- <script type="text/javascript">
- var tabs;
- $(function(){
- tabs = $('#tabs').cleverTabs();
- $(window).bind('resize',function(){
- //當發生window.resize事件時,重新預設的tabs的PanelContainer的大小
- tabs.resizePanelContainer();
- });
- </script>
下載