In this post Asp.Net jQuery
UI Tab Remove Tabs Dynamically we shall on how to
remove specific tabs dynamically from the existing collection of tabs.
Tabs can be removed dynamically using the remove option as follows.
$('
Here the Tab with the index value mentioned in
Example
$("#SimpleTab").tabs("remove", 2);
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.
Click the Remove Tabs button, notice that the 3rd tab in the collection is removed. Tab Index has a zero based index.
<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 -
Remove Tab
$('#btnRemoveTab').click(function(event)
{
event.preventDefault();
$("#SimpleTab").tabs("remove", 2);
});
});
</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 - Remove Tab </td>
<td>
<asp:Button
ID="btnRemoveTab"
runat="server"
Text="Remove Tabs" />
</td>
</tr>
</table>
</form>
</body>
</html>
Related Posts
Related Posts
No comments:
Post a Comment