easyui學習筆記12—tab標簽頁的添加和刪除

這一篇我們來看看標簽頁的添加和刪除動作。我在想看這些例子還不如看文檔，文檔的內容更加全面，但是文檔全部是理論沒有實際的操作，看起來很枯燥，文檔只能是遇到問題的時候查。easyui的文檔寫的還是很詳細的，這點對開發者很重要。

1.html代碼

    <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:auto;">
        <div title="About" style="padding:10px;">
            <p style="font-size:14px;">jQuery EasyUI framework helps you build your web pages easily.</p>
                <ul>
                    <li>easyui is a collection of user-interface plugin based on jQuery.</li>
                    <li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
                    <li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
                    <li>complete framework for HTML5 web page.</li>
                    <li>easyui save your time and scales while developing your products.</li>
                    <li>easyui is very easy but powerful.</li>
                </ul>
        </div>
        <div title="My Documnets" style="padding:10px;">
            <ul class="easyui-tree" data-options="url:'jquery-easyui-1.3.5/demo/tabs/tree_data1.json',method:'get',animate:true"></ul>
        </div>
        <div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px;">
            This is the help content.
        </div>
    </div>
    <div id="tab-tools">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick='addPanel()'></a>
        <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick='removePanel()'></a>
    </div>

這里給標簽頁添加了一個工具欄，data-options="tools:'#tab-tools'"注意這里是#所以下面定義工具欄的是時候id="tab-tools"而不是class=“tab-tools”，其他沒有什么關於工具欄前面已經介紹了。

2.js代碼

        var index = 0;
        function addPanel(){
            index++;
            $('#tt').tabs('add',{
                title:'Tab'+index,
                content:'<div style="padding:10px;">Content'+index+'</div>',
                closeable:true
            });
        }
        
        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if(tab){
                var index = $('#tt').tabs('getTabIndex',tab);
                $('#tt').tabs('close',index);
            }
        }

貌似和手風琴的格子的添加和刪除的方法是類似的。

            $('#tt').tabs('add',{
                title:'Tab'+index,
                content:'<div style="padding:10px;">Content'+index+'</div>',
                closeable:true
            });

這段是添加一個標簽，標簽的title是'Tab'+index，內容是'<div style="padding:10px;">Content'+index+'</div>'這樣一個標簽頁

        $("#aa").accordion("add",{
            title:"Title"+idx,
            content:'<div style="padding:10px">Content'+idx+'</div>'
        });
        idx++;

這段是手風琴中添加一個格子的方法，是很類似的，只不過關鍵字accordion不一樣。

        function removePanel(){
            var tab = $('#tt').tabs('getSelected');
            if(tab){
                var index = $('#tt').tabs('getTabIndex',tab);
                $('#tt').tabs('close',index);
            }
        }

這段是刪除一個標簽的方法，首先找到當前選中的標簽的對象，然后如果有選中的標簽，找到這個標簽的index，最后根據這個index關閉這個標簽，這個關閉可能就是刪除的功能。