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的文章！