【easyui学习笔记】4.动态添加标签页

参考：EasyUI 动态添加标签页（Tabs）

1、静态添加标签页（tabs）

静态添加标签页十分简单，使用class属性为easyui-tabs的div即可，可以参考easyui中文网的上一篇教程（EasyUI 创建标签页（Tabs））。
值得一提的属性：

• closable属性，布尔值（属性意义：标签页是否可关闭）。
• iconCls属性，easyui中挺通用的一个属性（属性意义：设置图标）。

2、动态添加标签页（tabs）

所谓动态添加，就是通过函数调用来在需要的时候添加标签页。为了举例，我们先从简单的开始一步步完善：
1.新建个空的easyui-tabs组件，作为后来动态添加的tab的立足之地。

    <div id="tt" class="easyui-tabs" style="width: 400px;height: 200px">
    </div>

2.实现函数addTab，这是至关重要的一步，实际的工作都是这个函数来做的。

function addTab(title){
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select',title)
    } else {
        $('#tt').tabs('add',{
            title:title,
            closable:true
        });
    }
}

我们使用 ‘exists’ 方法来判断 tab 是否已经存在，如果已存在则激活 tab。如果不存在则调用 ‘add’ 方法来添加一个新的 tab 面板。

3.新建几个元素，设置其触发某事件时的动作函数是addTab，并传递参数title

<div>
    <a href="#" class="easyui-linkbutton" onclick="addTab('百度')">百度</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('EasyUI中文网')">EasyUI中文网</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery')">jquery</a>
</div>

easyui-linkbutton在触发onClick事件时执行函数addTab，这种算是比较常见的。当然不用linkbutton，直接用< a>也没差了，只要能触发事件就行，这里用linkbutton主要是为了复习一下easyui的组件而已。

到这里动态添加标签页功能就算简单实现了，你可以打开相应的html文件试试。下面我们稍微修改一下，让它不仅能新建添加标签页，还能展现相应的标签页内容。

---

4.修改函数addTab，新增参数url；动态添加标签页时，新增tabs的content属性设置。

function addTab(title, url){
    if ($('#tt').tabs('exists', title)) {
        $('#tt').tabs('select',title)
    } else {
        var content = '';
        $('#tt').tabs('add',{
            title:title,
            closable:true,
            content:content
        });
    }
}

1) 注意到函数代码还未完成，content变量定义为空字符串，url参数也还没用到；我们开始扩展实现变量内容，修改var content = ''行为：
var content = '<iframe src="' +url+ '"></iframe>';
为了使用url参数，我们把元素拆成了两部分，中间加上url变量值，最后组成的字符串才赋给content变量。
2) 进一步修改，可以给iframe元素增加一些其他的属性设置，比如style之类的：
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
你可以试着一个个属性加，然后刷新页面对比前后有什么不同（这里都是html本身的知识了，就不赘述了）。

5.修改触发事件的元素，增加参数url的传递：

<div>
    <a href="#" class="easyui-linkbutton" onclick="addTab('百度','https://www.baidu.com/')">百度</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('EasyUI中文网','http://www.jeasyui.net/')">EasyUI中文网</a>
    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
</div>

到这里就算结束了，刷新下页面后随便点击添加标签页试试，效果示例图：