jQuery EasyUI使用教程：动态添加标签

---

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

<jQuery EasyUI最新版下载>

通过使用jQuery EasyUI可以非常容易的动态添加标签，你只需调用'add'方法即可。

在本教程中，我们将使用iframe动态添加标签来显示一个页面。当点击添加按钮时，一个新的标签将会被添加。如果标签已经存在了，那么它将会被激活。

Step 1：创建标签

<div style="margin-bottom:10px">
<a href="#" class="easyui-linkbutton" onclick="addTab('google','//www.google.com')">google</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('jquery','//jquery.com/')">jquery</a>
<a href="#" class="easyui-linkbutton" onclick="addTab('easyui','//jeasyui.com/')">easyui</a>
</div>
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Home">
</div>
</div>

该html代码非常简单，我们创建了带有一个被命名为'Home'标签面板的标签。请注意，我们不需要编写任何JS代码。

Step 2：实现'addTab'功能

function addTab(title, url){
if ($('#tt').tabs('exists', title)){
$('#tt').tabs('select', title);
} else {
var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
$('#tt').tabs('add',{
title:title,
content:content,
closable:true
});
}
}

我们使用 'exists'方法来确定标签是否存在，如果存在的话那么激活该标签，如果不存在则调用'add'方法来添加新的标签面板。

下载该EasyUI示例：

购买最新正版授权！""