JQuery Easyui API Tabs tab page/tab

Depend on

• Panel
• LinkButton

Usage examples

Create tabs
1. Create tabs via tag
Creating tabs from tags is easier, and we don't need to write any JavaScript code. Remember to add the ' Easyui-tabs ' class to the <div/> tag, and each tab panel is created by the child <div/> tag, which is the same usage as the panel.

The code is as follows

Copy Code

< Div id= "tt" class= "Easyui-tabs" style= "width:500px;height:250px;" >       <div title= "Tab1" style= "Padding:20px;display:none;" >            tab1          </div>        <div title= "Tab2" closable= "true" style= " Overflow:auto;padding:20px;display:none; " >            tab2         </div>        <div title= "Tab3" iconcls= "Icon-reload" closable= " True "style=" padding:20px;display:none; >            tab3         </div>   </div>

. Programming to create Tabs
Now we're programmed to create Tabs, and we capture the ' onselect ' event at the same time

characteristic

The code is as follows	Copy Code
$ (' #tt '). Tabs ({ Border:false, Onselect:function (title) { Alert (title+ ' is selected '); } });

Add a new tab panel

The code is as follows	Copy Code
Add a new tab panel $ (' #tt '). Tabs (' Add ', { Title: ' New Tab ', Content: ' Tab body ', Closable:true });

Get the selected Tab

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

Name	Type	Description	Default value
Width	Number	The width of the Tabs container.	Auto
Height	Number	The height of the Tabs container.	Auto
Plain	Boolean	True to render the tab bar without a background container picture.	False
Fit	Boolean	True sets the size of the Tabs container to fit its parent container.	False
Border	Boolean	True to display the Tabs container border.	True
Scrollincrement	Number	The number of pixels to scroll each time the tab scrolling button is pressed.	100
Scrollduration	Number	The number of milliseconds each scroll animation should last.	400
Tools	Array	On the right toolbar, each tool option is the same as Linkbutton.	Null

Event

Name	Parameters	Description
OnLoad	Panel	Triggered when an AJAX tab panel finishes loading remote data.
Onselect	Title	Triggered when the user selects a tab panel.
Onbeforeclose	Title	When a tab panel is triggered before it is closed, returns false to cancel the shutdown action.
OnClose	Title	Triggered when a user closes a tab panel.
Onadd	Title	Triggered when a new tab panel is added.
OnUpdate	Title	Triggered when a tab panel is updated.
OnContextMenu	E, title	Triggered when a tab panel is clicked by a right button.

Method

Name	Parameters	Description
Options	None	Return to Tabs options.
Tabs	None	Returns all tab panel.
Resize	None	Adjust the size of the tabs container and make the layout.
Add	Options	Adding a new tab panel,options parameter is a configuration object, and for more details see tab panel features.
Close	Title	Closing a tab panel,title parameter refers to a panel that is closed.
Gettab	Title	Gets the specified tab panel.
GetSelected	None	Gets the selected tab panel.
Select	Title	Select a tab panel.
Exists	Title	Refers to whether there is a specific panel.
Update	Param	Updating the specified tab Panel,param contains two attributes: TAB: The tab panel that is updated. Options:panel's options.

Tab Panel

The TAB Panel feature is defined in the Panel component, and the following are some common features.

Name	Type	Description	Default value
Title	String	The caption text for the TAB panel.
Content	String	The contents of the Tab panel.
Href	String	Loads the remote content to populate the tab panel's URL.	Null
Cache	Boolean	True to cache This tab panel when a valid href attribute is set.	True
Iconcls	String	The CSS class for the icon that appears on the tab panel header.	Null
Width	Number	The width of the Tab panel.	Auto
Height	Number	The height of the Tab panel.	Auto

Some of the additional features

Name	Type	Description	Default value
Closable	Boolean	When set to True, the tab panel displays a close button and clicks on it to close the tab panel.	False
Selected	Boolean	When set to True, the tab panel is selected.	False