easyui学习笔记12—tab标签页的添加和删除

这一篇我们来看看标签页的添加和删除动作。我在想看这些例子还不如看文档，文档的内容更加全面，但是文档全部是理论没有实际的操作，看起来很枯燥，文档只能是遇到问题的时候查。easyui的文档写的还是很详细的，这点对开发者很重要。

1.html代码

    <div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="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关闭这个标签，这个关闭可能就是删除的功能。