Author: think8848 (company homepage: http://www.cleversoft.com, qq:166156888, blog:http://think8848.cnblogs.com) Reprint please keep this information
Clevertabs is a jquery plug-in that requires the jquery version: 1.6.1,jquery UI style Version: 1.8.13; Its function is to create the jquery UI Style tab to display the IFRAME.
In this example, the Jquery.contextmenu plugin was added, and I modified its style to use the jquery UI skin
The effect of the following figure:
Primary application Examples:
HTML code:
<div id= "Tabs" ><ul></ul></div>
JavaScript code:
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
Tabs = $ (' #tabs '). Clevertabs ();
Tabs.add ({
URL: ' Http://www.jb51.net ',
Label: ' think8848 '
});
});
</script>
Clevertabs Detailed Description:
Clevertabs for all tab containers
Copy Code code as follows:
var tabs;
<script type= "Text/javascript" >
$ (function () {
Tabs = $ (' #tabs '). Clevertabs ({
Whether to install the right-click menu (default: TRUE)
Setupcontextmenu:true,
Right-click menu definition, right-click menu function provided by Jquery.contextmenu plugin
See: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
In this plug-in, the original ContextMenu plugin's style has been modified, using the jquery UI skin
ContextMenu: {
Element: $ (' #contextMenuElementId '),
Handler:function (Action, El, POS) {/*do something...*/}
},
Whether to lock after tab is turned on (not allowed to close, default: false)
Lock:false,
Whether to disable (not allow activation and operation of IFRAME content, default: false) When tab is turned on
Disable:false,
Whether to lock the tab when there is only one tab in tabs (default: TRUE)
Lockonlyone:true,
Displays the container for the IFRAME (created in the tabs element by default)
Panelcontainer: $ (' #panelContainerElementId ')/*,
which
Tabheadertemplate: ',//(tab used to control the header template)
Tabpaneltemplate: ",//(tab to display Panel template)
Uidgenerator:function () {}//(tab unique ID builder)
function is not enabled now, and then when the time is perfect then enable * *
});
Tabs.add ({
URL: ' Http://www.jb51.net ',
Label: ' think8848 '
});
});
</script>
Clevertabs.add method: Add a new tab and make it active, and activate the tab if the URL you want to add already exists
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
Tabs.add ({
Must be a unique ID within the tabs
ID: ' UniqueId ',
The value that will be set on the SRC attribute of the IFRAME
URL: ' Iframe.src ',
Text that appears on the tab header
Label: ' tab Header ',
The URL of the tab that needs to be refreshed when you close this tab (default: null)
Closerefresh: ' tab URL ',
The URL of the tab you want to activate when you close this tab (default: null)
Closeactivate: ' tab URL ',
callback function to be executed when this tab is closed
Callback:function () {/*do something*/}
});
</script>
Clevertabs.getcurrenttab Method:
Gets the tab that is currently in the active state
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.getcurrenttab ();
</script>
Clevertabs.gettabbyurl Method:
Gets the tab instance of the specified URL
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
</script>
Clevertabs.clear Method:
Close all unlocked tab in tabs
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.clear ();
</script>
Clevertab.deactivate Method:
Make the tab page inactive, but not recommended for use in code
Clevertab.prevtab Method:
Gets the TAB key before this tab
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
var prevtab = Tab.prevtab ();
</script>
Clevertab.nexttab Method:
Get tab after this tab
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
var prevtab = Tab.nexttab ();
</script>
Clevertab.kill Method:
Move this tab from tabs
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
Tab.kill ();
</script>
Clevertab.refresh Method:
Refresh the contents of the TAB's IFRAME
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
Tab.refresh ();
</script>
Clevertab.setdisable Method:
Set the TAB's Disabled property and set disabled to true to automatically set the TAB's Locked property to True
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
Parameter true is disabled, false or does not provide a value to enable
Tab.setdisable (TRUE);
</script>
Clevertab.setlock Method:
Set the Locked property of the tab and set locked to True, the tab is not allowed to close
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs = (' #tabs '). Clevertabs ();
var tab = Tabs.gettabbyurl (' http://www.jb51.net ');
Parameter true is locked, false or does not provide a value for unlocking
Tab.setlock (TRUE);
</script>
Updated------------------------------2011.06.27---------------------------------
"Change no one else, change yourself."
In the current page, most of the time can be composed of several parts, such as: Banner,navigator,content, and for the work area to become larger, many times such as Banner,navigator or other panel will be collected (Collapse , this time the problem came, I gave tabs defined width:80%; height:90%; Now tabs's width and height have changed, but the Internal tab page has not received this change, it is still in accordance with the size of the previous show it, even more deadly is resize incident only window and body only, Div incredibly does not support this event! I don't know what they're thinking ... In the previous clevertabs, I have bound the Window.resize event, but the problem is that in my example above, the size of the window doesn't actually change, not even the body, but the tabs is changed, and in this case, if you use the default Tabpenelcontainer, it must be handled Tabs Resize event, but tabs is a Div, where to resize? Last night before going to bed suddenly thought of a way, since can "change no one else, change self", then can "the thing that cannot handle, give someone else to deal with it". "Outsource" the resize. So the original code has been modified, in the Clevertabs constructor, for Clevertabs prototype added a Resizepanelcontainer function, tabs do not know that the Resize event, but it is always known to happen, Who knows who calls, the so-called Nonse Dorau?
Clevertabs.resizepanelcontainer Method:
When you use the Clevertabs default Panelcontainer, reset the size of Panelcontainer.
Copy Code code as follows:
<script type= "Text/javascript" >
var tabs;
$ (function () {
Tabs = $ (' #tabs '). Clevertabs ();
$ (window). Bind (' Resize ', function () {
The size of the default tabs Panelcontainer when a window.resize event occurs
Tabs.resizepanelcontainer ();
});
</script>
Demo http://demo.jb51.net/js/2011/CleverTabs/index.htm
SOURCE Download/201106/yuanma/clevertabs.rar
