JQuery Easyui Tutorial-tabs (tab)

Use $.fn.tabs.defaults to override the default value object.

tab displays a batch of panels. But only one panel will be displayed at a time. Each tab panel has a header title and some small button tool menus, including a close button and other custom buttons.

Use case:

Create a panel

Two ways to create tabs with tags and JavaScript.

1. Create Tabs from tags

The tabs make it easier to create tabs, and we don't need to write any JavaScript code. Just add a class ID of ' Easyui-tabs ' to the <div/> tag. Each tab panel is created with a sub <div/> label, using the same panel as panels.

<div id= "tt" class= "Easyui-tabs" style= "width:500px;height:250px;" >
<div title= "tab1″style=" padding:20px;display:none; >
Tab1
</div>
<div title= "tab2″data-options=" Closable:true "style=" Overflow:auto;padding:20px;display:none; " >
TaB2
</div>
<div title= "tab3″data-options=" iconcls: ' icon-reload ', closable:true ' style= ' Padding:20px;display:none; " >
Tab3
</div>
</div>

2. Create a tab from JavaScript

The following code shows how to create a tab using JavaScript, which will trigger the ' OnSelect ' event when the tab is selected.

$ (' #tt '). Tabs ({
Border:false,
Onselect:function (title) {
Alert (title+ ' is selected ');
}
});

Add a new tab panel

Add a new tab panel that contains a gadget menu, and the Gadget menu icon (8x8) is placed before the Close button.

Add a new tab panel
$ (' #tt '). Tabs (' Add ', {
Title: ' New Tab ',
Content: ' Tab Body ',
Closable:true,
tools:[{
Iconcls: ' Icon-mini-refresh ',
Handler:function () {
Alert (' Refresh ');
}
}]
});

Gets the selected tab

Get the selected tab panel and its tab object
var pp = $ (' #tt '). Tabs (' getselected ');
var tab = pp.panel (' Options '). tab; The corresponding Tab object

Property:

Property name	Property value type	Description	Default Value
Width	Number	The width of the tab container.	Auto
Height	Number	tab container height.	Auto
Plain	Boolean	When set to True, the Control Panel background is not displayed.	False
Fit	Boolean	When set to True, the tab size will be filled with the container in which it is located.	False
Border	Boolean	When set to True, the tab container border is displayed.	True
Scrollincrement	Number	The pixel value of the tab scroll bar each time it scrolls.	100
Scrollduration	Number	Duration of each scrolling animation, in milliseconds.	400
Tools	Array,selector	The toolbar is added to the left or right of the tab panel header. The available values are: 1. An array of tool menus, each with the same tool options as LinkButton. 2. A selector that points to the <div/> container Tools menu. code example: Defining a tool menu through an array. $ (' #tt '). Tabs ({tools:[{iconcls: ' Icon-add ', handler:function () {alert (' Add ')}},{iconcls: ' Icon-save ', handler: function () {alert (' Save ')}}}); The tool menu is defined by the presence of the DOM container. $ (' #tt '). Tabs ({tools: ' #tab-tools '}) <div id= "Tab-tools" ><a href= "#" class= "Easyui-linkbutton" plain= "true "Iconcls=" Icon-add "></a><a href=" # "class=" Easyui-linkbutton "plain=" true "iconcls=" Icon-save ">< /a></div>	Null
Toolposition	String	Toolbar position. Available values: ' Left ', ' right '. (this property is available from version 1.3.2)	Right
TabPosition	String	The tab location. Available values: ' Top ', ' bottom ', ' left ', ' right '. (this property is available from version 1.3.2)	Top
Headerwidth	Number	The tab caption width is only valid when the TabPosition property is set to ' left ' or ' right '. (this property is available from version 1.3.2)	150
Tabwidth	Number	The width of the label bar. (this property is available from version 1.3.4)	Auto
Tabheight	Number	The height of the label bar. (this property is available from version 1.3.4)	27
Selected	Number	Initialize selects a tab page. (this property is available from version 1.3.5)	0
Showheader	Boolean	When set to True, the tab title is displayed. (this property is available from version 1.3.5)	True

Event:

Event name	event Arguments	Description
OnLoad	Panel	Triggered when the Ajax tab panel has finished loading remote data.
OnSelect	Title,index	The user triggers when a tab panel is selected.
Onunselect	Title,index	Triggered when the user cancels the selection of a tab panel. (this property is available from version 1.3.5)
Onbeforeclose	Title,index	Triggers when the tab panel is closed and returns false to cancel the close operation. The following example shows how to display the confirmation dialog box before closing the tab panel. $ (' #tt '). Tabs ({ onbeforeclose:function (title) {return Confirm (' You confirm you want to close ' + title ');} ); /Use the Asynchronous confirmation dialog box $ (' #tt '). Tabs ({ onbeforeclose:function (title,index) { var target = this; $.messager.confirm (' Confirm ', ' you are sure you want to close ' +title,function (r) {if (R) {var opts = $ (target). Tabs (' options '); var bc = Opts.onbeforeclose;opts.onbeforeclose = function () {}; Allow now to close $ (target). Tabs (' Close ', index); opts.onbeforeclose = BC; Restore event function}); return false;//block Close }});
OnClose	Title,index	Triggered when the user closes a tab panel.
Onadd	Title,index	Triggered when a new tab panel is added.
OnUpdate	Title,index	Triggered when a tab panel is updated.
OnContextMenu	E, Title,index	triggered when right-clicking on a tab panel.

Method:

Method Name	Method Parameters	Description
Options	None	Returns the TAB properties.
Tabs	None	Returns all tab panels.
Resize	None	Adjust the tab container size and layout.
Add	Options	Add a new tab panel, the option parameter is a configuration object, and see More Details about tab panel properties. It becomes optional when a new tab panel is added. When adding a tab panel that is not checked, remember to set the ' selected ' property to False. Add an unchecked tab panel of $ (' #tt '). Tabs (' Add ', {title: ' New tab panel ', selected:false//...});
Close	which	Close a tab panel, the ' which ' parameter can be the title or index of the tab panel to specify the panel to close.
Gettab	which	Gets the specified tab panel, the ' which ' parameter can be the title or index of the tab panel.
Gettabindex	tab	Gets the index of the specified tab panel.
GetSelected	None	Gets the selected tab panel. The following example shows how to get the selected tab panel index. var tab = $ (' #tt '). Tabs (' getselected '); var index = $ (' #tt '). Tabs (' Gettabindex ', tab); alert (index);
Select	which	Select a tab panel, the ' which ' parameter can be the title or index of the tab panel.
Unselect	which	Deselect a tab panel, the ' which ' parameter can be the title or index of the tab panel. (This method is available from version 1.3.5)
Showheader	None	Displays the label header of the tab. (This method is available from version 1.3.5)
Hideheader	None	Hides the label header of the tab. (This method is available from version 1.3.5)
Exists	which	Indicates whether the specified panel exists, and the ' which ' parameter can be the title or index of the tab panel.
Update	Param	Updates the specified tab panel, the ' param ' parameter contains 2 properties: TAB: The tab panel to update. Options: Properties of the panel. code example: Updates the selected panel's new title and content var tab = $ (' #tt '). Tabs (' getselected '); Gets the selected panel $ (' #tt '). Tabs (' Update ', {tab:tab,options: {title: ' new title ', href: ' get_content.php ' //URL for new content}}); Call the ' Refresh ' method to update the contents of the tab panel var tab = $ (' #tt '). Tabs (' getselected '); Get the selected panel Tab.panel (' Refresh ', ' get_content.php ');
Enabletab	which	Enables the specified tab panel, the ' which ' parameter can be the title or index of the tab panel. (This method is available from version 1.3) code example: $ (' #tt '). Tabs (' Enabletab ', 1);     Enable the Second tab panel $ (' #tt '). Tabs (' Enabletab ', ' Tab2 '); Enable a tab panel titled TAB2
Disabletab	which	Disables the specified tab panel, the ' which ' parameter can be the title or index of the tab panel. (This method is available from version 1.3) code example: $ (' #tt '). Tabs (' Disabletab ', 1); Disable the Second tab panel
Scrollby	DeltaX	Scrolls the tab caption by the specified number of pixels, a negative value scrolls to the right, and a positive value scrolls to the left. (This method is available from version 1.3) code example: Scroll the tab title to the left of $ (' #tt '). Tabs (' scroll ', 10);

TAB panel

Tab panel properties are similar to the definition of a panel component's properties, which are some of the common properties of 2 components.

property name	property value type	description	default value
ID	string	tab Panel ID property.	null
title	string	the header text of the tab panel.
content	string	The contents of the tab panel.
href	string	loads remote data content from the URL into the tab panel.	null
Cache	Boolean	If True, the Cache tab panel when the ' href ' attribute is set to a valid value.	true
iconcls	string	the CSS class ID that defines an icon is displayed to the tab panel title.	null
width	number	tab panel width.	Auto
height	number	tab panel height.	Auto
Collapsible	boolean	If true, tab folding is allowed.	false

The following is a new and unique property of the tab panel.

Property name	Property value type	Description	Default Value
Closable	Boolean	When set to True, the tab panel displays a close button that closes the tab panel when clicked.	False
Selected	Boolean	When set to True, the tab panel is selected.	False

Reprinted from: http://www.html5wd.com/archives/1294.html

JQuery Easyui Tutorial-tabs (tab)