JQueryEasyUI 组件 布局 Tabs组件（选项卡）

1,介绍

可以使用选项卡来 组织一个站点或表单集信息
        Tabs显示一个panel的集合 每一次显示一个tab  pane 
        所有tab  panel 都有标题和一些小的工具按钮 
        
        继承  关系   panel   和 linkbutton

2，属性

属性名	属性值类型	描述
width	number	选项卡容器宽度
height	number	选项卡容器高度
fit	boolean	设置为true 选项卡的大小将铺满它所在的容器
tabWidth	number	标签条的宽度
tabHeight	number	标签条的高度
selected	number	初始化选中一个tab页
href	string	从URL中读取远程数据并显示到面板
loadingMessage	string	在加载远程数据时，在面板内显示一条信息

3，方法

方法名	参数类型	描述
add	options	添加一个新选项卡面板，选项参数是一个配置对象，查看选项卡面板属性的更多细节
getSelected	none	获取选择的选项卡面板
getTabIndex	tab	获取指定选项卡面板的索引
close	which	关闭一个选项卡面板  which 参数可以是选项卡面板的标题或索引
select	which	选择一个选项卡面板  which 参数可以是选项卡面板的标题或索引

4，实例

  $(function () {
            $("#btn").linkbutton({
                onClick: function () {
                    var contenta = "大家好";
                    $("#tt").tabs("add", {
                        title: '新增',
                        content: contenta,
                        closeable:true
                    });
                }
            });

            $("#btn3").linkbutton({
                onClick: function () {
                    $("#tt").tabs("select", 2);//启用
                }
            });

            $("#btn2").linkbutton({
                onClick: function () {
                    console.info("启用关闭");
                    var tabP = $("#tt").tabs("getSelected");
                    var index = $("#tt").tabs("getTabIndex", tabP);
                    $("#tt").tabs("close", index);
                }
            });
        });

<div id="tt" class="easyui-tabs" style="width: 500px; height: 250px">
        <div style="padding: 20px" data-options="closable:true,title:'选项卡1'">1</div>
        <div style="padding: 20px" data-options="closable:true,title:'选项卡2'">2</div>
        <div style="padding: 20px" data-options="closable:true,title:'选项卡3'">3</div>
    <%--//closabl显示一个关闭按钮--%>
    </div>
    <a id="btn" class="easyui-linkbutton">添加</a>
    <a id="btn2" class="easyui-linkbutton">删除</a>
    <a id="btn3" class="easyui-linkbutton">激活2</a>