jQuery EasyUI使用教程之动态添加标签
<jQuery EasyUI最新版下载>
通过使用jQuery EasyUI可以非常容易的动态添加标签，你只需调用'add'方法即可。
在本教程中，我们将使用iframe动态添加标签来显示一个页面。当点击添加按钮时，一个新的标签将会被添加。如果标签已经存在了，那么它将会被激活。
查看演示
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的文章！