@{
ViewBag.Title = "addtabsDynamically";
}
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<h2>addtabsDynamically</h2>
<input type="text" id="txt_newtab" />
<input type="button" id="btn_addtab" value="Add New Tab" />
<br />
<br />
<div id="div_tab">
<ul id="ul_addtabsdynmicly">
<li>
<a href="#div_tab1">Tab1</a>
</li>
<li>
<a href="#div_tab2">Tab2</a>
</li>
<li>
<a href="#div_tab3">Tab3</a>
</li>
</ul>
<div id="div_tab1">
<h1>Inside tab1</h1>
</div>
<div id="div_tab2">
<h1>Inside tab2</h1>
</div>
<div id="div_tab3">
<h1>Inside tab3</h1>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#div_tab').tabs();
$('#btn_addtab').click(function () {
var tabCntr = $('#div_tab');
var header = $('#txt_newtab').val();
var id = parseInt($('#ul_addtabsdynmicly li').length);
id++;
var dydivid = "dytab_" + id;
$("<div id='" + dydivid + "'><p>Inside the'" + header + "'</p></div>").appendTo(tabCntr);
//to set the newly added tab as selected tab
var seltab = parseInt($('#ul_addtabsdynmicly li').length);
//to add new tabs
$(tabCntr).tabs({
fx: { opacity: "toggle" },
add: function (event, tab) {
//$(tab.panel).load("dytab_" + $(this).text());
}
}).tabs("add", "#dytab_" + id, header);
sletab = seltab - 1;
$(tabCntr).tabs({
selected: seltab
});
});
});
</script>
Controller:-
public ActionResult addtabsDynamically()
{
return View();
}
No comments:
Post a Comment