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

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

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

查看演示

Step 1：创建标签

<divstyle="margin-bottom:10px">

<ahref="#"class="easyui-linkbutton"onclick="addTab('google','http://www.google.com')">google</a>

<ahref="#"class="easyui-linkbutton"onclick="addTab('jquery','http://jquery.com/')">jquery</a>

<ahref="#"class="easyui-linkbutton"onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>

</div>

<divid="tt"class="easyui-tabs"style="width:400px;height:250px;">

<divtitle="Home">

</div>

</div>

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

Step 2：实现'addTab'功能

functionaddTab(title, url){

if($('#tt').tabs('exists', title)){

$('#tt').tabs('select', title);

} else{

varcontent = '<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示例：easyui-tabs-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！