Click here to Skip to main content
15,906,816 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hey friends ,
I am doing one project in that i want to create dynamic add and remove tab.My code
XML
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
        iframe {
            width: 200px;
            height: 200px;
        }
    </style>

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>

    <script type="text/javascript">

        var tabTitle = $("#tab_title"),
     tabContent = $("#tab_content"),
     tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
     tabCounter = 5;

        var tabs = $("#add_tab").tabs();
        $("#add_tab").click(function () {
            addTab();
        });

        // actual addTab function: adds new tab using the input from the form above
        function addTab() {
            var label = tabTitle.val() || "Tab " + tabCounter,
                id = "tabs-" + tabCounter,
                li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
                tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.",
                index = 1;
            tabs.find(".ui-tabs-nav li:nth-last-child(" + index + ")").after(li);
            tabs.append("<div id='" + id + "'><iframe> <p>" + tabContentHtml + "</p></iframe> </div>");
            tabs.tabs("refresh");
            tabCounter++;
        }

        // close icon: removing the tab on click
        tabs.delegate("span.ui-icon-close", "click", function () {
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).remove();
            tabs.tabs("refresh");
        });

        tabs.bind("keyup", function (event) {
            if (event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE) {
                var panelId = tabs.find(".ui-tabs-active").remove().attr("aria-controls");
                $("#" + panelId).remove();
                tabs.tabs("refresh");
            }
        });
    </script>

</head>
<body style="">
    <button id="add_tab">Add Tab</button>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Impose</a>  <span class="ui" role="presentation"></span>
            </li>
            <li><a href="#tabs-2">IMPACS</a>  <span class="ui" role="presentation"></span>
            </li>
        </ul>
        <div id="tabs-1">
            <iframe src=""></iframe>
        </div>
        <div id="tabs-2">
            <iframe src=""></iframe>
        </div>
    </div>
</body>
</html>




so please send solution...
Posted
Updated 13-Mar-16 1:18am

1 solution

<title>Adding jQuery Tabs Dynamicallyitle>
<link href="http://<br mode=" hold=" />code.jquery.com/ui/1.9.0/<br mode=" rel="Stylesheet" type="text/<br mode=" /> <script type="text/<br mode=" hold=" />javascript" src="http://<br mode="></script>
<script type="text/<br mode=" hold=" />javascript" src="http://<br mode="></script>
<script type="text/<br mode=" hold=" />javascript">
$(function () {
$("#divTabs")
.tabs();
});
var tabCounter = 2; //2 tabs appear by default in this example.
function AddNewTab
(newTabName) {
tabCounter++;
var divTabs =
$("#divTabs");
var ul = $("#
ulTabs");
var contentDivId = "divTab" + tabCounter;
var sampleContent = "<p>Sample content for the " + newTabName + " tab.>";
/
*** "Destroy" current tab widget temporarily.
(...re-initialized later)
***/
divTabs.tabs
("destroy");
/
*** Add the new LI element for the tab, and point it to the content's id. ***/
ul.html
(ul.html()
+ "<li><a href="#<br mode="hold" />" + contentDivId + "">" + newTabName + "></a></li>");
/
*** Add the content that the new tab points to. ***/
divTabs.html
(divTabs.html()
+ "<div id="" + contentDivId + "">" + sampleContent + "iv>");
/*** Re-
initialize the tab widget, and make the new tab the "active" one. ***/
divTabs.tabs
({ active: (tabCounter - 1)
});
}
</div></p></script>


Adding jQuery Tabs Dynamically1>

Enter a Tab Name and click the button to create a new tab.>
New Tab Name:abel>
>
Create Tab






Sample content for Tab 1.>



Sample content for Tab 2.>





This could work
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900