The jQuery Tab plug-in is used to display iframe In the Tab, with the source code and detailed descriptions.

Author: think8848 (company homepage: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com) reprinted please keep this information

CleverTabs is a jQuery plug-in. The jQuery version 1.6.1 and jQuery UI style version 1.8.13 are required. The function is to create a jQuery UI style Tab to display iframe.

In this example, the jQuery. contextMenu plug-in is added. I modified the style and used the skin of jQuery UI.

The effect is as follows:

Basic Application Example:
HTML code:
<Div id = "tabs"> <ul> </div>
Javascript code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
Tabs = $ ('# tabs'). cleverTabs ();
Tabs. add ({
Url: 'http: // www.jb51.net ',
Label: 'think8848'
});
});
</Script>

CleverTabs details:
CleverTabs is the container of all tabs
Copy codeThe Code is as follows:
Var tabs;
<Script type = "text/javascript">
$ (Function (){
Tabs = $ ('# tabs'). cleverTabs ({
// Select whether to install the right-click menu (default: true)
SetupContextMenu: true,
// Right-click menu definition. The right-click menu function is provided by the jquery. contextMenu plug-in.
// See: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
// This plug-in modifies the style in the original contextMenu plug-in and uses the jQuery UI skin.
ContextMenu :{
Element: $ ('# contextmenuelementid '),
Handler: function (action, el, pos) {/* do something ...*/}
},
// Whether to lock the Tab after enabling it (disabled, default: false)
Lock: false,
// Whether to disable the function after the Tab is enabled (the iframe content cannot be activated or operated. Default Value: false)
Disable: false,
// Whether to lock the Tab when there is only one Tab in tabs (default: true)
LockOnlyOne: true,
// Display the iframe container (created in the tabs element by default)
PanelContainer: $ ('# panelContainerElementId ')/*,
Where
TabHeaderTemplate: '', // (the Tab is used to control the header template)
TabPanelTemplate: '', // (the Panel template Tab is used to display)
UidGenerator: function () {}// (Unique id Generator for Tab)
The function is not enabled now. You can enable it after it has time to complete */
});
Tabs. add ({
Url: 'http: // www.jb51.net ',
Label: 'think8848'
});
});
</Script>

CleverTabs. add method: add a new Tab and make it active. If the url to be added already exists, the Tab is activated.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Tabs. add ({
// It must be a unique id in tabs
Id: 'uniqueid ',
// The value to be set in the src attribute of iframe
Url: 'iframe. src ',
// Text displayed on the Tab
Label: 'tab header ',
// The url of the Tab to be refreshed when the current Tab is closed (default: null)
CloseREfresh: 'tab url ',
// The url of the Tab to be activated when the current Tab is closed (default: null)
CloseActivate: 'tab url ',
// The callback function to be executed when you close this Tab
Callback: function () {/* do something */}
});
</Script>

CleverTabs. getCurrentTab method:
Obtain the current active Tab
Copy codeThe Code is as follows: <script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Var tab = tabs. getCurrentTab ();
</Script>

CleverTabs. getTabByUrl method:
Obtains the Tab instance of a specified url.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Var tab = tabs. getTabByUrl ('HTTP: // www.jb51.net ');
</Script>

CleverTabs. clear method:
Disable all unlocked tabs in tabs
Copy codeThe Code is as follows: <script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Var tab = tabs. clear ();
</Script>

CleverTab. deactivate method:
Make the Tab page inactive, but it is not recommended to use in code
CleverTab. prevTab method:
Obtain the previous Tab
Copy codeThe Code is 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:
Obtain the Tab after this Tab
Copy codeThe Code is 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:
Remove the Tab from tabs
Copy codeThe Code is 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 content in the iframe of the Tab.
Copy codeThe Code is 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 "disabled" attribute of the Tab. After setting "disabled" to "true", the "locked" attribute of the Tab is automatically set to "true ".
Copy codeThe Code is as follows: <script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Var tab = tabs. getTabByUrl ('HTTP: // www.jb51.net ');
// If the parameter is true, it is disabled. If the parameter is false or the value is not provided, it is enabled.
Tab. setDisable (true );
</Script>

CleverTab. setLock method:
Set the locked attribute of this Tab. After setting locked to true, this Tab cannot be closed.
Copy codeThe Code is as follows: <script type = "text/javascript">
Var tabs = ('# tabs'). cleverTabs ();
Var tab = tabs. getTabByUrl ('HTTP: // www.jb51.net ');
// If the parameter is true, the value is locked. If the parameter is false or the value is not provided, the parameter is unlocked.
Tab. setLock (true );
</Script>

------------------------------ 2011.06.27 update ---------------------------------
"If you cannot change others, change yourself"
In most cases, the current page may be composed of several parts, such as Banner, Navigator, and Content. To make the work area bigger, it is often called Banner, navigator or other panels will be closed (Collapse). The problem arises. At the beginning, I defined width: 80%; height: 90% for tabs; now the width and height of tabs have changed, but the internal Tab page has not received this change, it is still displayed according to the previous size, even worse, the resize event exists only in the window and body, and div does not support this event! I really don't know what they think... in the previous cleverTabs, I bound window. the resize event, but the problem is that in the example above, the size of the window does not actually change, or even the body does not, but the size of the tabs changes. In this case, if you use the default tabPenelContainer, you must handle the tabs resize event. However, tabs is a div. Where can I resize it? Last night, I suddenly came up with a solution before going to bed. Since we can "change ourselves if we can't change others", we can "Handle what we can't do. Let's let it be handled by others ". Calculate the resize "outsourcing. So I modified the original code. In the CleverTabs constructor, I added the resizePanelContainer function for the prototype of CleverTabs. tabs does not know that the resize event has occurred, but some people know that it has happened, who knows who calls it, and the so-called "more capable?
CleverTabs. resizePanelContainer method:
When the default PanelContainer of CleverTabs is used, reset the size of PanelContainer.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var tabs;
$ (Function (){
Tabs = $ ('# tabs'). cleverTabs ();
$ (Window). bind ('resize', function (){
// When the window. resize event occurs, reset the default size of the tabs PanelContainer.
Tabs. resizePanelContainer ();
});
</Script>

Demo http://demo.jb51.net/js/2011/CleverTabs/index.htm
Source code download/201106/yuanma/CleverTabs.rar