In this post Asp.Net jQuery
UI Tab Add Tabs Dynamically we shall on how to
add tabs dynamically to the existing collection of tabs.
Tabs can be added dynamically using the add option as follows.
$('
Here the page mentioned in the URL property will get loaded into the newly created tab dynamically.
Example
$('#SimpleTab').tabs("add", 'TabData.aspx?TabID=4', 'Tab-4');
Full Example
Add a DIV tag SimpleTab to
the page, and add the below jQuery script. Change the
references of the jQuery library files to map to your local path. Also
create a new .aspx page (TabData.aspx) whose data will get loaded dynamically.
Click the Add Tabs button, notice that a new tab gets created and the content is loaded dynamically from the page TabData.asp.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery UI Tabs</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link
type="text/css"
href="Stylesheet.css" // Add your own .css file (Optional)
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Simple Tab
$("#SimpleTab").tabs({ collapsible: true });
//
// Tabs - Add Tab
$('#btnAddTab').click(function(event)
{
event.preventDefault();
$("#SimpleTab").tabs("option", "spinner",
"Loading ...");
$("#SimpleTab").tabs("option", "cache",
false);
$('#SimpleTab').tabs("add",
'TabData.aspx?TabID=4', 'Tab-4');
$('#SimpleTab').tabs("add",
'TabData.aspx?TabID=5', 'Tab-5');
});
});
</script>
</script>
</head>
<body>
<form id="frmAccordion" runat="server">
<table>
<tr valign="top">
<td>Simple Tab: </td>
<td>
<div id="SimpleTab">
<ul>
<li><a href="#tab1">Tab-1</a></li>
<li><a href="#tab2">Tab-2</a></li>
<li><a href="#tab3">Tab-3</a></li>
</ul>
<div id="tab1">
Tab-1 Content goes here.
</div>
<div id="tab2">
Tab-2 Content goes here.
</div>
<div id="tab3">
Tab-3 Content goes here.
</div>
</div>
</td>
</tr>
<tr valign="top">
<td>Tabs - Add New Tab </td>
<td>
<asp:Button
ID="btnAddTab"
runat="server"
Text="Add Tabs" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
1 comment:
This is my third visit to your blog..! I really happy to your article and I believe I'll become a frequent visitor to your site! I enjoy your in depth articles about blog and I enjoy the fact you are so knowledgeable about blog. Thanks for your time. From your friend.
lacie raid
Post a Comment