JQuery UI 1.11 Définir l'onglet pour activer

Question

J'ai Jquery 1.11 et j'ai essayé pendant des heures pour obtenir l'onglet nouvellement créé pour être actif et l'afficher.

Jsfiddle

Je voudrais également ajouter un « x » dans l'onglet pour fermer l'onglet.

Je suis passé par beaucoup de messages ici et ils sont principalement pour les méthodes obsolètes plus anciennes.

Javascript:

$(function() { 
    var tabs = $("#search-tabs").tabs({ 
     heightStyle: "fill" 
    }); 
    tabs.find(".ui-tabs-nav").sortable({ 
     axis: "x", 
     stop: function() { 
      tabs.tabs("refresh"); 
     } 
    }); 


    $('button#addtab').click(function(){ 
     var num_tabs = $("div#search-tabs ul li").length + 1; 

     $("div#search-tabs ul").prepend(
      "<li><a href='#s-tab" + num_tabs + "'>#" + num_tabs + "</a></li>" 
     ); 

     $("div#search-tabs").append(
      "<div id='s-tab" + num_tabs + "'>#" + num_tabs + "</div>" 
     ); 

     $("#search-tabs").tabs("refresh"); 
}); 

}); 

Vue:

<button id="addtab">Add Tab</button> 
    <div id="search-tabs" > 
    <ul> 
    </ul> 
    </div> 

Answer 1

Vous avez la première moitié de ce que vous voulez: l'appel .tabs("refresh") provoque le nouvel onglet à être ramassé et ajouté à la liste. Tout ce qui vous manque est de définir l'onglet actif après avoir actualisé les onglets. En regardant the API documentation pour les onglets de l'interface utilisateur jQuery, nous verrons qu'il y a une option dans l'API Tabs appelée "active".

actif

Type: Boolean ou entier

Par défaut: 0

Quel panneau est actuellement ouvert. Plusieurs types pris en charge:

• Boolean: actif Réglage à false réduire tous les panneaux. Cette nécessite que l'option réductible soit vraie.

• Integer: L'indice de base zéro du panneau qui est actif (ouverte). Une valeur négative sélectionne panneaux en remontant depuis le dernier panneau.

Cela va être l'option que nous devons changer.En regardant les méthodes disponibles, nous verrons que cela peut être fait en utilisant la méthode option(optionName, value), comme ceci:

$("#search-tabs").tabs("refresh"); 
$("#search-tabs").tabs("option", "active", 0); 

Étant donné que vos nouveaux onglets sont ajoutés à la première position, vous pouvez simplement définir l'option active zéro et cela va pointer vers l'onglet nouvellement ajouté!

Voici une démo sur jsFiddle: http://jsfiddle.net/pb39g4b3/.

Answer 2

Comme @sphanley a suggéré. L'utilisation de $("#search-tabs").tabs("option", "active", 0); est la bonne façon de le faire. En outre, vous pouvez implémenter la fonctionnalité de fermeture, comme illustré here.

Voici le lien de démonstration avec toutes les fonctionnalités que vous avez demandées. http://jsfiddle.net/eeLrgxxt/7/

Answer 3

vous pouvez le faire de cette façon

http://jsfiddle.net/dm96hvb9/ 

vous devez ajouter la classe = "ui-tabs-actifs ui-état-actif", puis affiche la div correspondant

$('button#addtab').click(function(){ 
    var num_tabs = $("div#search-tabs ul li").length + 1; 

    // remove any active tab 
    $('#search-tabs li').removeClass('ui-state-active'); 
    $('#search-tabs li').removeClass('ui-tabs-active'); 

    // added the active class to the li 
    $("div#search-tabs ul").prepend(
     "<li class='ui-tabs-active ui-state-active'><a href='#s-tab" + num_tabs + "'>#" + num_tabs + "</a></li>" 
    ); 

    $("div#search-tabs").append(
     "<div id='s-tab" + num_tabs + "'>#" + num_tabs + "</div>" 
    ); 

    $("#search-tabs").tabs("refresh"); 

    //show the active div 
    $("#s-tab"+num_tabs).show(); 

});