Dynamically add/remove Tab control with iframe

Question

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 23-Dec-13 20:20pm

sunilgurav241

Updated 13-Mar-16 1:18am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Owais Raza · Answer 1 · 2016-03-13T01:18:00

<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

Tab 1

Tab 2

Sample content for Tab 1.>

Sample content for Tab 2.>

This could work