easyui_tabs组件以及菜单关闭

tabs组件

选项卡显示一批面板。但在同一个时间只会显示一个面板
tabs的属性：

tabs的事件：

tabs的方法：

使用有两种方法：

静态数据的使用方法

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给

标签添加一个类ID 'easyui-tabs’。每个选项卡面板都通过子

标签进行创建。

代码

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

效果

这种比较死板，数据全部是写死的，如果有很多条数据的话，就要加很多代码，太麻烦，而且我们要实现的是点击左边的树形菜单在tabs里显示对应的选项卡，很显然这种方式不行，然后我们看下一种。

js创建的使用方法

2. 通过Javascript创建选项卡

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

代码

js文件代码：
添加一个新的包含小工具菜单的选项卡面板，小工具菜单图标(8x8)被放置在关闭按钮之前。
记得把这些事件都要放在function函数里

$(function