通过使用jQuery EasyUI可以非常容易的动态添加标签,你只需调用'add'方法即可。
在本教程中,我们将使用iframe动态添加标签来显示一个页面。当点击添加按钮时,一个新的标签将会被添加。如果标签已经存在了,那么它将会被激活。
![jQuery EasyUI使用教程:创建标签页](https://i-blog.csdnimg.cn/blog_migrate/940ec13049044280a2654959c44ba7a7.jpeg)
Step 1:创建标签
<
div
style
=
"margin-bottom:10px"
>
<
a
href
=
"#"
class
=
"easyui-linkbutton"
onclick
=
"addTab('google','http://www.google.com')"
>google</
a
>
<
a
href
=
"#"
class
=
"easyui-linkbutton"
onclick
=
"addTab('jquery','http://jquery.com/')"
>jquery</
a
>
<
a
href
=
"#"
class
=
"easyui-linkbutton"
onclick
=
"addTab('easyui','http://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示例:easyui-tabs-demo.zip
有兴趣的朋友可以 点击查看更多有关jQuery EasyUI的教程 !