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