JQuery UI Tabs Dynamisch Registerkarte Hinzufügen

Hier ist mein fiddel - http://jsfiddle.net/TTBzk/

Ich möchten, klicken Sie auf die Registerkarte hinzufügen-Schaltfläche und haben es automatisch ein tab mit prechosen Inhalte ohne dialog-Fenster sehen Sie wie auf der JQuery UI - manipulation-Beispiel hier - http://jqueryui.com/tabs/#manipulation

Ich weiß nicht, was ich falsch mache. Jegliche Hilfe würde sehr geschätzt werden.

JQuery

$(function() {
    var websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    var tabs = $("#tabs").tabs();
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

    function addTab() {
        var label = tabTitle.val() || "" + tabCounter,
        id = "tabs-" + tabCounter,
        li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
        websiteframe = '<iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
        tabs.tabs("refresh");
        tabCounter++;
    }

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

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
        <li style="float:right;"><a id="add_tab">+</a></li>
    </ul>
    <div id="tabs-1">
        <iframe src="browser.html" width="100%" height="100%" allowtransparency="true" frameBorder="0">
            Your browser does not support IFRAME's
        </iframe>
    </div>
</div>

CSS

#tabs li .ui-icon-close {
    float:left;
    margin:0.4em 0.2em 0 0;
    cursor:pointer;}

#add_tab {
    cursor:pointer;}

div#tabs {
    position:absolute;
    top:0px;
    left:50%;
    width:98%;
    height:98%;
    margin-left:-49.5%;}

div#tabs div {
    display:inline-block;
    padding:0px;
    width:100%;
    height:90%;}

InformationsquelleAutor Michael Schwartz | 2013-05-21