Tab Deletion

(JQUERY)


Hi,
In this article, i will discuss about how to delete tab on the click of the button

View:-

@{
    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();
        }

Image

Ratings


Average Rating: 0.00 by 0 users
Giri Prasad
7/20/2013
7/20/2013
Download PDF

Comments