4

ここに私のフィドルがあります - http://jsfiddle.net/TTBzk/

ここで JQuery UI の操作例に見られるように、[タブの追加] ボタンをクリックして、ダイアログ ウィンドウなしで事前に選択されたコンテンツを含むタブを自動的に追加したい - http://jqueryui.com/tabs/#manipulation

何が間違っているのかわかりません。どんな助けでも大歓迎です。

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%;}
4

1 に答える 1

3

addTab関数では、次の行を使用します。

var label = tabTitle.val() || "" + tabCounter;

ただし、名前で変数を宣言することはありませんtabTitle

更新しましたjsfiddle

変更点:

<li>
    <a href="#tabs-1" id="tab_title">Home</a>
... 

var tabTitle = $('#tab_title');

テスト用に ID を指定します。宣言された変数。

タブが動的に追加されるようになりました。もちろん、タブ見出しの名前を変更する必要があります。<a href>値を使用し、たとえばそれ.text()に追加tabCounterして、Home2 などにします。

于 2013-05-21T20:41:20.197 に答える