[Original] jquery tab plug-in, used to display IFRAME in tab, with source code and detailed description

Recently, I had a requirement to place IFRAME In the tab, so I made a jquery tab plug-in.

You are welcome to raise bugs or suggestions. I will try my best to improve them when I have time.

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 jquery UI skin.

The effect is as follows:

Basic Application Example:

HtmlCode:

 
<Div id = "tabs"> <ul> </div>
 

JavaScript code:

<SCRIPT type = "text/JavaScript"> $ (function () {tabs = $ ('# tabs '). clevertabs (); tabs. add ({URL: 'http: // think8848.cnblogs.com ', label: 'think8848'}) ;}); </SCRIPT>
 

Clevertabs details:
Clevertabs is the container of all tabs

VaR tabs; <SCRIPT type = "text/JavaScript"> $ (function () {tabs = $ ('# tabs '). clevertabs ({// whether to install the right-click menu (default: True) setupcontextmenu: True, // The right-click menu is defined. The right-click menu function is defined by jquery. the contextmenu plug-in provides // For details, see: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/ // The Style in the original contextmenu plug-in has been modified, using the jquery UI skin contextmenu: {element: $ ('# contextmenuelementid '), handler: function (action, El, POS) {/* do something... */}, // whether to lock the tab after it is enabled (disabled, default: false) Lock: false, // whether to disable the tab after it is enabled (disable IFRAME content activation and operation, default: false) Disable: false, // when there is only one tab in tabs, whether to lock the tab (default: True) lockonlyone: True, // display the IFRAME container (created in the tabs element by default) panelcontainer: $ ('# panelcontainerelementid ')/*, tabheadertemplate: '', // (the tab is used to control the header template) tabpaneltemplate:'', // (the tab is used to display the Panel template) uidgenerator: function () {} // (the unique ID Generator for tab) function is not enabled now, and is enabled after time is complete */}); tabs. add ({URL: 'http: // think8848.cnblogs.com ', label: 'think8848'}) ;}); </SCRIPT>

<xmp> Clevertabs. Add method: </xmp> Add a new tab and make it active. If the URL to be added already exists, the tab is activated.

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); tabs. add ({// must be a unique ID in tabs: 'uniqueid', // URL of the value to be set in the src attribute of IFRAME: 'iframe. SRC ', // text label displayed on the tab: 'tab header', // the URL of the tab to be refreshed when the 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 ', // call back: function () {/* Do something */}) to be executed when you close this tab; </SCRIPT>
 

Clevertabs. getcurrenttab method:
Obtain the current active Tab

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs'). clevertabs (); var tab = tabs. getcurrenttab (); </SCRIPT>
 

Clevertabs. gettabbyurl method:
Obtains the tab instance of a specified URL.

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); </SCRIPT>
 

Clevertabs. Clear method:
Disable all unlocked tabs in tabs

<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

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); var prevtab = tab. prevtab (); </SCRIPT>
 

Clevertab. nexttab method:
Obtain the tab after this tab

<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); var prevtab = tab. nexttab (); </SCRIPT>
 

Clevertab. Kill method:
Remove the tab from tabs

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); tab. kill (); </SCRIPT>
 

Clevertab. Refresh method:
Refresh the content in the IFRAME of the tab.

<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); 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 ".

 
<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); // If the parameter is true, it is disabled. If the parameter is false or the value is not provided, it is enabled. setdisable (true); </SCRIPT>
 

Clevertab. setlock method:
Set the locked attribute of this tab. After setting locked to true, this tab cannot be closed.

<SCRIPT type = "text/JavaScript"> var tabs = ('# tabs '). clevertabs (); var tab = tabs. gettabbyurl ('HTTP: // think8848.cnblogs.com '); // If the parameter is true, the value is locked. If the parameter is false or the value is not provided, the tab is unlocked. setlock (true); </SCRIPT>
 

Source generation download

------------------------------ 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.

<SCRIPT type = "text/JavaScript"> var tabs; $ (function () {tabs = $ ('# tabs '). clevertabs (); $ (window ). BIND ('resize', function () {// when window occurs. during the resize event, the default tabs's panelcontainer size tabs is reset. resizepanelcontainer () ;}); </SCRIPT>
 

Source code download