jQuery Tab plug-in is used to display iframe in Tab, with source code and detailed instructions_jquery

Author: think8848 (Company homepage: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com) Please keep this information for reprinting

CleverTabs is a jQuery plug-in that requires jQuery version: 1.6.1, jQuery UI style version: 1.8.13; its function is to create jQuery UI style Tabs for displaying iframes.

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

The effect is as follows:

Basic application example:
HTML code:

Javascript Code:

Copy code The code is as follows:

CleverTabs details:
CleverTabs for all Tab container

Copy code The code is as follows:

var tabs;

CleverTabs.add method: Add a new Tab and make it Activation state, if the url to be added already exists, the Tab will be activated

Copy code The code is as follows:

CleverTabs.getCurrentTab method:
Get the currently active Tab

Copy code The code is as follows:

CleverTabs.getTabByUrl method:
Get the Tab instance of the specified url

Copy code The code is as follows:

CleverTabs.clear method:
Close all unlocked tabs in tabs

Copy code The code is as follows:

CleverTab.deactivate method:
makes the Tab page inactive, but it is not recommended to use it in the code.
CleverTab.prevTab method:
gets the previous tab Tab

Copy code The code is as follows:

CleverTab.nextTab method:
Get the Tab after this Tab

Copy code The code is as follows:

CleverTab.kill Method:
Move the tab from tabs

Copy code The code is as follows:

CleverTab.refresh method:
Refresh the content in the iframe of the Tab

Copy code The code is as follows:

CleverTab.setDisable method:
Set the disabled attribute of the Tab. After setting disabled to true, automatically set the locked attribute of the Tab to true

Copy Code The code is as follows:

CleverTab.setLock method:
Set the locked attribute of the Tab. After setting locked to true, the Tab is not allowed to be closed

Copy code The code is as follows:

-----------------------------Updated on 2011.06.27------------- --------------------
"If you can't change others, just change yourself"
In most cases, the current page may consist of several parts Composition, such as: Banner, Navigator, Content, etc. In order to make the work area larger, many times the Banner, Navigator or other Panels will be collapsed (Collapse). At this time, the problem arises. I defined the width for the tabs. : 80%; height: 90%; 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. What's even more terrible is that the resize event only has window and It's only for body, but div doesn't support this event! I really don't know what they think... In the previous cleverTabs, I bound the window.resize event, but the problem is that in the example I gave above, the size of the window In fact, there is no change, not even the body, but the size of the tabs has changed. In this case, if you use the default tabPenelContainer, you must handle the resize event of the tabs, but the tabs are just a div, which Coming to resize? I suddenly thought of a way before going to bed last night. Since I can "change myself if I can't change others," then I can "let others handle the things I can't handle." Forget about "outsourcing" the resize. So the original code was modified. In the CleverTabs constructor, the resizePanelContainer function was added to the CleverTabs prototype. The tabs themselves did not know that the resize event occurred, but someone knew that it happened. Who knows who called it? There are many so-called capable people. Lao?
CleverTabs.resizePanelContainer method:
When using CleverTabs’ default PanelContainer, reset the size of the PanelContainer.

Copy code The code is as follows:

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