重命名jQuery UI选项卡

Question

我想用不同的名称重命名每个标签。 它显示标签1，标签2 ......等。

$(function() {
    var total_tabs = 0;

    // initialize first tab
    total_tabs++;
    addtab(total_tabs);

    $("#addtab, #litab").click(function() {
        total_tabs++;
        $("#tabcontent p").hide();
        addtab(total_tabs);
        return false;
    });

    function addtab(count) {
        var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
        $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');
        $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");

        $("#t"+count).bind("click", function() {
            $("#tabul li").removeClass("ctab");
            $("#t"+count).addClass("ctab");
            $("#tabcontent p").hide();
            $("#c"+count).fadeIn('slow');
        });

        $("#close"+count).bind("click", function() {
            // activate the previous tab
            $("#tabul li").removeClass("ctab");
            $("#tabcontent p").hide();
            $(this).parent().prev().addClass("ctab");
            $("#c"+count).prev().fadeIn('slow');

            $(this).parent().remove();
            $("#c"+count).remove();
            return false;
        });
    }
});

如何为我创建的每个标签添加重命名功能。 我可以使用弹出框重命名标签吗？

我想用GUI系统重命名，如下面的链接。

http://demo.superdit.com/jquery/dynamic_tab.html

我想在那里重命名它。（通过使用弹出框或其他东西）

谢谢你...

Answer 1

试试这个

function addtab(count, tabName) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs">'+tabName+'&nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

这是你的功能，只有两处变化。 首先，我在函数tabName中添加了一个额外的参数，表示选项卡的名称。

function addtab(count, tabName)

这意味着您现在将调用此函数addTab(1, "Awesome tab name")

其次，我改变了这一行

 $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');

到

 $("#tabul").append('<li id="t'+count+'" class="ntabs">Tab '+count+'&nbsp;&nbsp;'+closetab+'</li>');

最初，标签名称设置为标签1 ，其中1是count参数（Tab '+count+'）的值。现在，选项卡名称将是您在调用函数时为其指定的名称。

[修改] 对于选项卡重命名，您可以尝试以下版本：

function addtab(count, tabName) {
    var closetab = '<a href="" id="close'+count+'" class="close">&times;</a>';
    $("#tabul").append('<li id="t'+count+'" class="ntabs"><span id="title' + count + '">'+tabName+'</span>&nbsp;&nbsp;'+closetab+'</li>');
    $("#tabcontent").append('<p id="c'+count+'">Tab Content '+count+'</p>');

    $("#tabul li").removeClass("ctab");
    $("#t"+count).addClass("ctab");

    $("#t"+count).bind("click", function() {
        $("#tabul li").removeClass("ctab");
        $("#t"+count).addClass("ctab");
        $("#tabcontent p").hide();
        $("#c"+count).fadeIn('slow');
    });

    $("#span"+count).bind("click", function() {
        var newTitle = prompt("Enter the new title","");
        if (newTitle && newTitle !== "") {
            $(this).innerText = newTitle;
        }
    });


    $("#close"+count).bind("click", function() {
        // activate the previous tab
        $("#tabul li").removeClass("ctab");
        $("#tabcontent p").hide();
        $(this).parent().prev().addClass("ctab");
        $("#c"+count).prev().fadeIn('slow');

        $(this).parent().remove();
        $("#c"+count).remove();
        return false;
    });
}
});

首先，我将标签标题放在一个单独的元素中，span $("#tabul").append('<li id="t'+count+'" class="ntabs"><span id="title' + count + '">'+tabName+'</span>&nbsp;&nbsp;'+closetab+'</li>');

然后我让标题显示一个javascript提示框，询问你是否有标题，并将跨度文本设置为给定值

$("#span"+count).bind("click", function() {
        var newTitle = prompt("Enter the new title","");
        if (newTitle && newTitle !== "") {
            $(this).innerText = newTitle;
        }
    });

我不确定它会100％工作，因为我不是一个jQuery用户，但它应该给你一个关于它是如何完成的基本想法