tabs

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

我们可以通过以下方法来创建tabs

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<　div　>标签添加一个类'easyui-tabs'。每个选项卡面板都通过子< div >标签进行创建，用法和panel(面板)相同。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
        tab3    
    </div>   
</div>

2. 通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

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

添加新的选项卡面板

以下代码是添加一个新的选项卡，并添加一个菜单图标。

$('#tt').tabs('add',{    
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{    
        iconCls:'icon-mini-refresh',    
        handler:function(){    
            alert('refresh');    
        }    
    }]    
});

获取选择的选项卡

我们可以通过以下方法获取选项卡，如下代码：

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

关于选项卡的属性与方法还有很多，我们就不多做介绍了，有兴趣的同学请看这里。