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>