jQuery EasyUI Layout Plugin -Tabs


jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.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

Create Tabs

1. Creating Tabs via Markup

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

<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. Creating Tabs Programmatically

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

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

Add a new tab panel

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

// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

Get the selected tab

// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象 

Properties

Name Type Description Default
width number The width of the tabs container. auto
height number The height of the tabs container. auto
plain boolean When set to true, no background container image is used to render the tab strip. false
fit boolean When set to true, the size of the tabs container is set to fit its parent container. false
border boolean When set to true, the border of the tabs container is displayed. true
scrollIncrement number The number of pixels to scroll each time a tab scroll button is pressed. 100
scrollDuration number The number of milliseconds each scroll animation should last. 400
tools array,selector A toolbar placed on the left or right side of the header. Possible values:
1. An array, indicating a group of tools, each tool option is the same as a link button (Linkbutton).
2. A selector, indicating a <div> that contains the tools.

Code examples:
Define tools via an array.
$('#tt').tabs({
    tools:[{
        iconCls:'icon-add',
        handler:function(){
            alert('add')
        }
    },{
        iconCls:'icon-save',
        handler:function(){
            alert('save')
        }
    }]
});
Define tools via an existing DOM container.
$('#tt').tabs({
    tools:'#tab-tools'
});
<div id="tab-tools">
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
null
toolPosition string Toolbar position. Possible values: 'left', 'right'. This property is available since version 1.3.2. right
tabPosition string Tab position. Possible values: 'top', 'bottom', 'left', 'right'. This property is available since version 1.3.2. top
headerWidth number Tab header width. It is only valid when tabPosition is set to 'left' or 'right'. This property is available since version 1.3.2. 150
tabWidth number Tab strip width. This property is available since version 1.3.4. auto
tabHeight number Tab strip height. This property is available since version 1.3.4. 27
selected number The index of the initially selected tab. This property is available since version 1.3.5. 0
showHeader boolean When set to true, display the tab header. 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 the user selects a tab panel.
onUnselect title,index Triggered when the user deselects a tab panel. This event is available since version 1.3.5.
onBeforeClose title,index Triggered before a tab panel is closed. Return false to cancel the close action. The example below demonstrates how to display a confirmation dialog before closing a 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 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 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 perform layout.
add options Add a new tab panel. The options parameter is a configuration object. For more details, see the tab panel properties.
When a new tab panel is added, it will be selected.
If you want to add an unselected tab panel, remember to set the 'selected' property to false.
// add a unselected tab panel
$('#tt').tabs('add',{
    title: 'new tab',
    selected: false
    //...
});
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 example below demonstrates how to get the index of the 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 the tab panel.
unselect which Select 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 already exists. The 'which' parameter can be the title or index of the tab panel.
update param Update the specified tab panel. The param parameter contains two properties:
tab: the tab panel to be updated.
options: the options of the panel.

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 the tab panel. This method is 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 the tab panel. This method is 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 number of pixels. A negative value scrolls to the right, a positive value scrolls to the left. This method is available since version 1.3.2.

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

Tab Panel

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

Name Type Description Default
id string The id property of the tab panel. null
title string The title text of the tab panel.
content string The content of the tab panel.
href string A URL to load remote content to populate the tab panel. null
cache boolean When set to true, the tab panel is cached when a valid href attribute is set. true
iconCls string The CSS class of the icon displayed on the title of the tab panel. 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, allows the tab panel to be collapsible. false

Some additional attributes.

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

jQuery EasyUI 插件jQuery EasyUI Plugin Other extensions