jQuery EasyUI Layout - Dynamic Tabs

jQuery EasyUI layout - Dynamic tabs (tabs).

In the previous section, we covered how jQuery EasyUI creates tabs, and in this section, you'll learn about the dynamic addition of tabs.

The way to add tabs dynamically in jQuery EasyUI is simple, you just need to call the 'add' method.

In this tutorial, we'll use iframe to dynamically add Tabs that appear on a page. W hen the Add button is clicked, a new tab is added;

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>

Using the html code above, we created Tabs with a tab panel called 'Home'. Please note that we don't 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 determine if tab already exists and activate tab if it already exists. If it does not exist, call the 'add' method to add a new tab panel.

Download the jQuery EasyUI instance

jeasyui-layout-tabs2.zip