ViewBag.Title = "deletetabsDynamically";
}
<h2>deletetabsDynamically</h2>
<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" />
<input type="button" id="btn_deletetab" onclick="deleteTab();" value="Delete Tab" />
<div id="div_tab">
<ul>
<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">
var deleteIndex;
$(function () {
$('#div_tab').tabs();
$("#div_tab").bind('tabsselect', function (event, ui) {
deleteIndex = ui.index;
});
});
//to delete the clicked tab
function deleteTab() {
customConfirm('Do you want to delete this tab ?',
function () {
$('#div_tab').tabs('remove', deleteIndex);
},
function () {
},
'Confirm Delete'
);
}
function customConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">' + dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
buttons: {
OK: function () {
if (typeof (okFunc) == 'function') { setTimeout(okFunc, 50); }
$(this).dialog('destroy');
},
Cancel: function () {
if (typeof (cancelFunc) == 'function') { setTimeout(cancelFunc, 50); }
$(this).dialog('destroy');
}
}
});
}
</script>
Controller:-
public ActionResult deletetabsDynamically()
{
return View();
}
No comments:
Post a Comment