JQuery动态添加javascripts标签关闭按钮

我正在使用javascript来动态添加jquery中的新选项卡。我使用下面的代码：JQuery动态添加javascripts标签关闭按钮

$("#mytabs1").tabs("add","list.action","New Tab");

我的问题是我如何添加关闭按钮（x按钮）到那些动态添加的选项卡？

来源

2011-12-08 Moe

在jQuery ui tabs demo pages上实际上有一个实例。

使用tabTemplate属性：从中创建一个新的标签，并添加

HTML模板。该占位符＃{HREF}和＃{标签}将被替换被作为参数传递给add方法

这里传递的URL和标签标签是从网站的代码：

var $tabs = $("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    add: function(event, ui) { 
     var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content."; 
     $(ui.panel).append("<p>" + tab_content + "</p>"); 
    } 
}); 

// close icon: removing the tab on click 
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924 
$("#tabs span.ui-icon-close").live("click", function() { 
    var index = $("li", $tabs).index($(this).parent()); 
    $tabs.tabs("remove", index); 
});

在您的实施中，您不应使用.live()，但代表（）或on（）。例如：

$('#tabs').on('click', 'span.ui-icon-close', function() { 
    var index = $("li", $tabs).index($(this).parent()); 
    $tabs.tabs("remove", index); 
});

来源

2011-12-08 10:09:12

但如何在第一次追加的X按钮？ – Moe

你是什么意思“起初”？对于已经在标记中的标签？使用与'tabTemplate'属性相同的标记。 –

标签本身并不具有x按钮。如果要添加的X按钮，将标签别的地方，想加入到你添加新的选项卡此相同的X按钮，你可以尝试使用tabsadd事件：

$("#mytabs1").tabs({ 
    add: function(event, ui) { 
     //your code that adds the custom x button to the new tab here 
    } 
});

来源

2011-12-08 10:10:41 danwellman

什么是代码？ – Moe

你告诉我，你没有发布任何其他代码......我不知道你是如何将关闭图标添加到标签。当前标签小部件不包含关闭图标，那么您如何向其他人添加关闭图标？ – danwellman

多数民众赞成我所问的 – Moe

如果您想选择立即新增标签：

var $tabs = $('#tabsid').tabs({ 
      add: function(event, ui) { 
       $tabs.tabs('select', '#' + ui.panel.id); 
      } 
     });

这是不行的..

来源

2012-01-12 22:32:28 Stanimir

如果它不起作用，那么为什么把它写下来作为答案？ – IronMan84

JQuery动态添加javascripts标签关闭按钮

回答

相关问题