jQuery EasyUI Layout - Dynamically Adding Tabs
Adding Tabs using jQuery EasyUI is quite easy. You just need to call the 'add' method.
In this tutorial, we will dynamically add Tabs displayed on a single page using iframes. When the add button is clicked, a new tab will be added. If the tab already exists, it will be activated.
Step 1: Create Tabs
<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>
This HTML code is quite simple, we created Tabs with a tab panel named 'Home'. Note that we do not need to write any JS code.
Step 2: Implement the 'addTab' Function
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
});
}
}
We use the 'exists' method to check if the tab already exists, and if it does, we activate the tab. If it does not exist, we call the 'add' method to add a new tab panel.