jQuery EasyUI Layout Plugin - `Tabs (Tabbed Pages/Option Cards)`

The default settings can be overridden by using $.fn.tabs.defaults.

Tabs display a collection of panels. Only one tab panel is shown at a time. Each tab panel has a header title and some mini button tools, including a close button and other custom buttons.

Dependencies

panel
linkbutton

Usage

Creating Tabs

Creating Tabs via Markup

Creating tabs from markup is easier, and we don't need to write any JavaScript code. Remember to add the 'easyui-tabs' class to the <div> tag. Each tab panel is created by a child <div> tag, similar to the usage of 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>

Programmatically Creating Tabs

Now we programmatically create tabs and capture the 'onSelect' event.

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

Adding a New Tab Panel

Add a new tab panel using mini tools, with the mini tool icon (8x8) 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');
        }
    }]
});

Getting the Selected Tab

// Get the selected tab panel and its tab object
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // Corresponding tab object

Properties

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	When set to true, the tab bar is rendered without a background container image.	false
fit	boolean	When set to true, the tabs container size is set to fit its parent container.	false
border	boolean	When set to true, the tabs container border is shown.	true
scrollIncrement	number	The number of pixels to scroll when the tab scroll button is pressed.	100
scrollDuration	number	The duration in milliseconds that each scroll animation should last.	400
tools	array,selector	The toolbar placed on the left or right side of the header. Possible values: <br>1. Array, indicating a group of tools, each tool option is the same as a linkbutton. <br>2. Selector, indicating a `<div>` containing tools. <br><br>Example code: <br>Define tools by array. $('#tt').tabs({<br> tools:[{<br> iconCls:'icon-add',<br> handler:function(){<br> alert('add')<br> }<br> },{<br> iconCls:'icon-save',<br> handler:function(){<br> alert('save')<br> }<br> }]<br>}); Define tools by existing DOM container. $('#tt').tabs({<br> tools:'#tab-tools'<br>});<br><div id="tab-tools"><br> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a><br> <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a><br></div>	null
toolPosition	string	The position of the toolbar. Possible values: 'left', 'right'. This property is available since version 1.3.2.	right
tabPosition	string	The position of the tabs. Possible values: 'top', 'bottom', 'left', 'right'. This property is available since version 1.3.2.	top
headerWidth	number	The width of the tab header, only valid when tabPosition is set to 'left' or 'right'. This property is available since version 1.3.2.	150
tabWidth	number	The width of the tab bar. This property is available since version 1.3.4.	auto
tabHeight	number	The height of the tab bar. This property is available since version 1.3.4.	27
selected	number	The index of the tab to be initially selected. This property is available since version 1.3.5.	0
showHeader	boolean	When set to true, the tab header is shown. This property is available since version 1.3.5.	true

Events

Name	Parameters	Description
onLoad	panel	Triggered when an ajax tab panel finishes loading remote data.
onSelect	title,index	Triggered when a user selects a tab panel.
onUnselect	title,index	Triggered when a user does not select a tab panel. This event is available since version 1.3.5.
onBeforeClose	title,index	Triggered before a tab panel is closed. Returning false cancels the close action. The following example demonstrates how to show a confirmation dialog before closing a tab panel. $('#tt').tabs({<br> onBeforeClose: function(title){<br> return confirm('Are you sure you want to close ' + title);<br> }<br>});<br>// using the async confirm dialog<br>$('#tt').tabs({<br> onBeforeClose: function(title,index){<br> var target = this;<br> $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){<br> if (r){<br> var opts = $(target).tabs('options');<br> var bc = opts.onBeforeClose;<br> opts.onBeforeClose = function(){}; // allowed to close now<br> $(target).tabs('close',index);<br> opts.onBeforeClose = bc; // restore the event function<br> }<br> });<br> return false; // prevent from closing<br> }<br>});
onClose	title,index	Triggered when a 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 a tab panel is right-clicked.

Methods

Name	Parameters	Description
options	none	Returns the tabs options.
tabs	none	Returns all tab panels.
resize	none	Resize the tabs container and do layout.
add	options	Add a new tab panel. The options parameter is a configuration object. For more details, see the tab panel properties. <br>When a new tab panel is added, it will be selected. <br>To add an unselected tab panel, remember to set the 'selected' property to false. // add an unselected tab panel<br>$('#tt').tabs('add',{<br> title: 'new tab',<br> selected: false<br> //...<br>});
close	which	Close a tab panel, the 'which' parameter can be the title or index of the tab panel to be closed.
getTab	which	Get the specified tab panel, the 'which' parameter can be the title or index of the tab panel.
getTabIndex	tab	Get the index of the specified tab panel.
getSelected	none	Get the selected tab panel. The following example demonstrates how to get the index of the selected tab panel. var tab = $('#tt').tabs('getSelected');<br>var index = $('#tt').tabs('getTabIndex',tab);<br>alert(index);
select	which	Select a tab panel, the 'which' parameter can be the title or index of the tab panel.
unselect	which	Unselect a tab panel, the 'which' parameter can be the title or index of the tab panel. This method is available since version 1.3.5.
showHeader	none	Show the tabs header. This method is available since version 1.3.5.
hideHeader	none	Hide the tabs header. This method is available since version 1.3.5.
exists	which	Indicate whether the specified panel exists, the 'which' parameter can be the title or index of the tab panel.
update	param	Update the specified tab panel, the param parameter includes two properties: <br>tab: The tab panel to be updated. <br>options: The options of the panel. <br> <br>Example code: // update the selected panel with new title and content<br>var tab = $('#tt').tabs('getSelected'); // get selected panel<br>$('#tt').tabs('update', {<br> tab: tab,<br> options: {<br> title: 'New Title',<br> href: 'get_content.php' // the new content URL<br> }<br>});<br>// call 'refresh' method for tab panel to update its content<br>var tab = $('#tt').tabs('getSelected'); // get selected panel<br>tab.panel('refresh', 'get_content.php');
enableTab	which	Enable the specified tab panel, the 'which' parameter can be the title or index of the tab panel. This method is available since version 1.3. <br> <br>Example code: $('#tt').tabs('enableTab', 1); // enable the second tab panel<br>$('#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 the tab panel. This method is available since version 1.3. <br> <br>Example code: $('#tt').tabs('disableTab', 1); // disable the second tab panel.
scrollBy	deltaX	Scroll the tab header by the specified number of pixels, negative values scroll to the right, positive values scroll to the left. This method is available since version 1.3.2. <br> <br>Example code: // scroll the tab header to left<br>$('#tt').tabs('scroll', 10);

Tab Panel

Tab panel properties are defined in the panel component. Below are some commonly used properties.

Name	Type	Description	Default Value
id	string	The id attribute of the tab panel.	null
title	string	The title text of the tab panel.
content	string	The content of the tab panel.
href	string	The URL to load remote content to fill the tab panel.	null
cache	boolean	When set to true, cache the tab panel when a valid href attribute is set.	true
iconCls	string	The CSS class for the icon displayed on the tab panel title.	null
width	number	The width of the tab panel.	auto
height	number	The height of the tab panel.	auto
collapsible	boolean	When set to true, allow the tab panel to be collapsible.	false

Additional properties.

Name	Type	Description	Default Value
closable	boolean	When set to true, the tab panel will display a close button that can close the tab panel.	false
selected	boolean	When set to true, the tab panel will be selected.	false

❮ Jeasyui Form Form1 Plugins Mb Menu ❯

jQuery EasyUI Layout Plugin - Tabs (Tabbed Pages/Option Cards)