Tabs

Override defaults with $.fn.tabs.defaults.

The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.

Dependencies

  • panel
  • linkbutton

Usage Example

Create tabs

1. Create tabs via markup

Create tabs from markup is even easier, we don't need to write any JavaScript code. Remember to add 'easyui-tabs' class to <div> markup. Each tab panel is created via sub <div> markup, the usage is same as panel.

2. Create tabs programatically

Now we create tabs programatically, we catch the 'onSelect' event also.

Add new tab panel

Add a new tab panel with mini tools, the mini tools icon(8x8) is placed before the close button.

Get the selected Tab

Properties

Name Type Description Default
width number The width of tabs container. auto
height number The height of tabs container. auto
plain boolean True to render the tab strip without a background container image. false
fit boolean True to set the size of tabs container to fit it's parent container. false
border boolean True to show tabs container border. true
scrollIncrement number The number of pixels to scroll each time a tab scroll button is pressed. 100
scrollDuration number The number of milliseconds that each scroll animation should last. 400
tools array,selector The toolbar placed on left or right side of header. Possible values:
1. An array indicate the tools, each tool options is same as linkbutton.
2. A selector point to the <div> that contains the tools.

Code example:

Define tools with an array.

$('#tt').tabs({
	tools:[{
		iconCls:'icon-add',
		handler:function(){
			alert('add')
		}
	},{
		iconCls:'icon-save',
		handler:function(){
			alert('save')
		}
	}]
});

Define tools with an existing 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 The toolbar position. Possible values: 'left','right','top','bottom'. Available since version 1.3.2. right
tabPosition string The tab position. Possible values: 'top','bottom','left','right'. Available since version 1.3.2. top
headerWidth number The tab header width, it is valid only when tabPosition is set to 'left' or 'right'. Available since version 1.3.2. 150
tabWidth number The width of tab strip. Available since version 1.3.4. auto
tabHeight number The height of tab strip. Available since version 1.3.4. 27
selected number The initialized selected tab index. Available since version 1.3.5. 0
showHeader boolean True to display tabs header. Available since version 1.3.5. true
justified boolean True to make tab strips equal widths of their parent container. Available since version 1.4.2. false
narrow boolean True to remove the space between tab strips. Available since version 1.4.2. false
pill boolean True to make tab strips look like pills. Available since version 1.4.2. false

Events

Name Parameters Description
onLoad panel Fires when an ajax tab panel finish loading remote data.
onSelect title,index Fires when user select a tab panel.
onUnselect title,index Fires when user unselect a tab panel. Available since version 1.3.5.
onBeforeClose title,index Fires before the tab panel is closed, return false to cancel this close action. The example below shows how to show confirm dialog before closing tab panel.
$('#tt').tabs({
  onBeforeClose: function(title){
	return confirm('Are you sure you want to close ' + title);
  }
});
// using the async confirm dialog
$('#tt').tabs({
  onBeforeClose: function(title,index){
	var target = this;
	$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
		if (r){
			var opts = $(target).tabs('options');
			var bc = opts.onBeforeClose;
			opts.onBeforeClose = function(){};  // allowed to close now
			$(target).tabs('close',index);
			opts.onBeforeClose = bc;  // restore the event function
		}
	});
	return false;	// prevent from closing
  }
});
onClose title,index Fires when user close a tab panel.
onAdd title,index Fires when a new tab panel is added.
onUpdate title,index Fires when a tab panel is updated.
onContextMenu e, title,index Fires when a tab panel is right clicked.

Methods

Name Parameter Description
options none Return the tabs options.
tabs none Return all tab panels.
resize none Resize the tabs container and do layout.
add options Add a new tab panel, the options parameter is a config object, see tab panel properties for more details. When adding a new tab panel, it will become selected.
To add a unselected tab panel, remember to set 'selected' property to false.
// add a unselected tab panel
$('#tt').tabs('add',{
	title: 'new tab',
	selected: false
	//...
});
// insert a tab panel to the index 2
$('#tt').tabs('add',{
	title: 'inserted tab',
	index: 2
})
close which Close a tab panel, the 'which' parameter can be the title or index of tab panel to be closed.
getTab which Get the specified tab panel, the 'which' parameter can be the title or index of tab panel.
getTabIndex tab Get the specified tab panel index
getSelected none Get the selected tab panel. The example below shows how to get the index of selected tab panel.
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 tab panel.
unselect which Select a tab panel, the 'which' parameter can be the title or index of tab panel. Available since version 1.3.5.
showHeader none Show the tabs header. Available since version 1.3.5.
hideHeader none Hide the tabs header. Available since version 1.3.5.
showTool none Show the tabs tools. Available since version 1.4.3.
hideTool none Hide the tabs tools. Available since version 1.4.3.
exists which Indicate if the special panel is exists, the 'which' parameter can be the title or index of tab panel.
update param Update the specified tab panel, the param parameter contains two properties:
tab: the tab panel to be updated.
type: the updating type, available values are: 'header','body','all'.
options: the panel options.

Code example:
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected');  // get selected panel
$('#tt').tabs('update', {
	tab: tab,
	options: {
		title: 'New Title',
		href: 'get_content.php'  // the new content URL
	}
});
// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected');  // get selected panel
tab.panel('refresh', 'get_content.php');
enableTab which Enable the specified tab panel, the 'which' parameter can be the title or index of tab panel. Available since version 1.3.

Code example:

$('#tt').tabs('enableTab', 1);	// enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');	enable the tab panel that has 'Tab2' title
disableTab which Disable the specified tab panel, the 'which' parameter can be the title or index of tab panel. Available since version 1.3.

Code example:

$('#tt').tabs('disableTab', 1);	// disable the second tab panel.
scrollBy deltaX Scroll the tab header by the specified amount of pixels, negative values scroll to the right, positive values scroll to the left. Available since version 1.3.2.

Code example:

// scroll the tab header to left
$('#tt').tabs('scroll', 10);

Tab Panel

The tab panel properties is defined in panel component, below is some common properties.

Name Type Description Default
id string The id attribute of tab panel. null
title string The tab panel title text.
content string The tab panel content.
href string A URL to load remote content to fill the tab panel. null
cache boolean True to cache the tab panel, valid when href property is setted. true
iconCls string An icon CSS class to show on tab panel title. null
width number The width of tab panel. auto
height number The height of tab panel. auto
collapsible boolean True to allow tab panel to be collapsed. false

Some added properties.

Name Type Description Default
closable boolean When set to true, the tab panel will show a closable button which can be clicked to close the tab panel. false
selected boolean When set to true, the tab panel will be selected. false
disabled boolean When set to true, the tab panel will be disabled. false