JQuery динамически добавляет теги javascripts закрыть кнопку

Question

Я использую JavaScript для динамического добавления новых вкладок в JQuery.Я использую следующий код:

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

У меня вопрос, как я могу добавить кнопку закрытия (кнопка x) к этим динамически добавляемым вкладкам?

Answer 1

На самом деле есть пример для достижения этого на демонстрационных страницах jQuery ui tabs .

Используйте свойство tabTemplate:

HTML-шаблон изкоторый новая вкладка создается и добавляется.Заполнители # {href} и # {label} заменяются метками url и tab, которые передаются в качестве аргументов методу add

Вот код с сайта:

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 );
});

Answer 2

Если вы хотите сразу выбрать новую добавленную вкладку:

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

это не будет работать ..

Answer 3

Вкладки по сути не имеют кнопки x.Если вы добавляете кнопку x на свои вкладки где-то еще и хотите, чтобы эта же кнопка x добавлялась на добавляемые вами новые вкладки, вы можете попробовать использовать событие tabsadd:

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