How to Create dynamic tabs

(JQUERY)


Hi,
In this article, i will discuss about how to create dynamic tabs on the click of the button.

View:-

@{
    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" />&nbsp;&nbsp;
<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();
        }

Image

Ratings


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

Comments