重命名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; 
     }); 
    } 
}); 

如何添加对于i创建的每一个翼片重命名功能。 我可以使用弹出框来重命名标签吗？

我想用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是t的值他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的用户，但它应该给你它是如何做