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