Dans jquery-ui 1.9, comment voulez-vous créer de nouveaux onglets de façon dynamique?

Selon le guide de mise à jour de jquery-ui 1.9 onglets - http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method - lors de l'ajout de nouveaux onglets de façon dynamique, vous n'avez qu'à faire quelque chose comme ceci:

HTML:

<div id='tabs'>
    <ul>
        <li><a href='#tab1'>#1</a></li>
    </ul>
    <div id='tab1'></div>
</div>
<button id='add-tab'>Add tab</button>

JavaScript:

$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

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

        $("div#tabs").tabs("refresh");
    });                    
});

Cependant, lorsque j'essaie de changer entre nouvellement créés, les onglets, j'obtiens l'erreur suivante dans firebug:

jQuery UI Tabs: Désadaptation identificateur de fragment.

Si je comprends bien, cette erreur signifie que le panneau d'onglets n'est pas en cours de création (et donc il y a un décalage entre la valeur liquidative du panneau et le panneau d'onglets). Mais le guide de mise à niveau ne fait aucune mention de la création d'un panneau à onglets.

Donc je suis en supposant que ce soit je me suis fais mal ou que le guide de mise à niveau est incomplète. Veuillez préciser.

Fait intéressant à noter, lors de la suppression des onglets, le guide de mise à niveau dit que vous avez explicitement supprimer à la fois l'élément de la liste à partir de la valeur liquidative du panneau ainsi que le panneau d'onglets de manière explicite, alors je me demandais si la même chose s'applique à l'ajout d'onglets.

Copier / coller votre code dans un jsFiddle, et il fonctionne sans aucun problème. jsfiddle.net/rMGCM Êtes-vous sûr que c'est tout ce que vous faites?
Grâce Krippie. Avez-vous essayé de changer entre les onglets? Si vous le faites, vous verrez l'erreur d'incompatibilité. La seule chose qu'il fixe est d'ajouter: $("div#onglets").append("<div id= "onglet" + num_tabs + "'>Onglet " + num_tabs + "</div>"); Mais ce n'est pas mentionné dans les docs.
Guide officiel avec source sur comment ajouter et supprimer des Onglets de manière dynamique en JQuery UI disponible ici: jqueryui.com/tabs/#manipulation

OriginalL'auteur Kosta Kontos | 2013-02-05

jquery-ui tabs

32

Le guide doit être incomplète, vous devez ajouter un panneau à onglets
```
$(document).ready(function() {
    $("div#tabs").tabs();

    $("button#add-tab").click(function() {

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>#" + num_tabs + "</a></li>"
        );
$("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>"
        );
        $("div#tabs").tabs("refresh");
    });                    
});
```
exemple

Grâce axrwkr. Qui fonctionne bien. Ne peux pas dire que je suis un grand fan des étapes supplémentaires que nous devrons prendre pour ajouter des onglets maintenant. Je préfère de beaucoup la vieille façon d'utiliser $("div#onglets").les onglets("ajouter", ...); Assurer que cette nouvelle approche est plus flexible, mais l'ancienne approche a été rapide et très simple pour les cas les plus simples qui n'ont pas besoin de souplesse.
Ce n'est pas une bonne idée avec num_tabs, pourquoi? Par exemple, nous avons ouvert 3 onglets. Ainsi, la dernière ont num_tabs = 3, puis on ferme le premier onglet avec num_tabs=1, maintenant, quand nous essayons d'ajouter un nouvel onglet, le comte de onglets = 3 var num_tabs = $("div#tabs ul li").length + 1; donc, nous essayons d'ajouter un nouvel onglet avec id qui existe déjà. C'est donc un MAL. J'ai besoin de quelques temps pour régler et imprimer mon code ci-dessous.
Je comprends votre raisonnement, mais je pense que vous avez plus de génie s'il n'y a pas une obligation de supprimer des onglets. En ce sens, la solution que j'ai mis en avant est la bonne façon, parce qu'il fait ce qui doit être fait et rien de plus.
voir l'Écriture de code robuste vs overengineering

OriginalL'auteur
4

Après chaque onglet outre, vous devez créer un div pour afficher du contenu, comme pour la création de tab number 2
```
$("div#tabs").append("<div id='tab"+num_tabs+"'></div>");
```
vérifier le violon http://jsfiddle.net/AJDLt/1/

Grâce Rohan. Ouais c'est à peu près à la même conclusion je suis arrivé au. Je me demande pourquoi ce n'était pas mentionné dans la documentation. Une idée?
Vous devez utiliser la méthode add de jquery ui $('div#tabs').tabs('add', 'tab'+num_tabs, num_tabs); vérifier le violon, ici jsfiddle.net/AJDLt/3 Dans ce cas, vous n'avez pas à appliquer votre propre logique, il ajoute automatiquement un nouvel onglet, vous pouvez créer son id par votre logique.
Hey Rohan, le "complément" de la méthode a été dépréciée en jquery-ui 1,9 et disparaît en 1.10. D'où cette question.
Ok, mais je pense qu'il y a peut être une alternative pour cette.

OriginalL'auteur Rohan Kumar

Donc, la bonne façon de faire cela comme une réponse sommet, mais sans nub_tabs.

$("div#tabs").tabs();
var tab_id = 1;
$("button#add-tab").click(function() {
    tab_id++; //It can be any id;

    $("div#tabs ul").append(
    '<li id="'+tab_id+'"><a href="#tab"'+tab_id+'">#"+tab_id+"</a><i class="close-tab" target="'+tab_id+'"></i></li>');
$("div#tabs").append(
    '<div id="'+tab_id+'">#'+tab_id+'</div>');
    $("div#tabs").tabs("refresh");
});

//Now i want to show some functions from my code;
//It will not work for you, just want show the idea;

//No clone tabs

function if_tab_exist(thisI) { //thisI - contains some id, title and text for tab content.
    var tab_id = $(thisI).attr('id');
    if(!$('.ui-tabs-nav li#'+tab_id).is('*')) {
        addTab(thisI); //Add tab function
    } else {
        var TAB_index = $('.ui-tabs-nav li#'+tab_id).index();
        $("#tabs").tabs({active: TAB_index}); //Will activate already exist tab
    }
}

//Close tab
function close_tab(tab_id) {
    $('.ui-tabs-nav i[target='+tab_id+']').parent().remove();       
    $('#tabs div#'+tab_id+']').remove();
    $("#tabs").tabs("refresh");
}
//Events
//CLose
$("body").on('click','.ui-tabs-nav .ui-state-default i', function() {
    close_tab($(this).attr('target'));
});
//Add
$("body").on('click','.addTab', function() {
    if_tab_exist(this);
});

Au lieu d'utiliser un mondial tab_id vous pouvez utiliser l'id unique (api.jqueryui.com/uniqueId)

OriginalL'auteur fdrv

3

Il est dommage que les onglets "add" a été supprimé, cependant jQuery est très facile à étendre. Il suffit d'ajouter votre propre addTab méthode.

par exemple quelque Chose comme ceci:
```
//jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).append('<li><a href="#tab-' + name + '">' + name + '</a></li>');
    $(this).append("<div id='tab-" + name + "'></div>");
    $(this).tabs("refresh");
};
```
Et l'utiliser comme ceci:
```
$('#tabs').addTab("NewTab");
$('#tabs').addTab("Another NewTab");
$('#tabs').addTab("etc");
```
JSFiddle: http://jsfiddle.net/TrueBlueAussie/AJDLt/315/

Comme suggéré par @Andy, vous avez besoin de faire usage .first() si vous imbriquez des onglets dans votre interface:

par exemple quelque Chose comme ceci:
```
//jQuery extension method
$.fn.addTab = function (name) {
    $('ul', this).first().append('<li><a href="#tab-' + name + '">' + name + '</a></li>');
    $(this).append("<div id='tab-" + name + "'></div>");
    $(this).tabs("refresh");
};
```
Cette solution ne fonctionne pas si l'onglet de modification contient des sous-panneaux à onglets. Il ajoute également l'onglet pour chacun de ceux-ci.
Changer pour "$('ul', this).premier (le)..." pour le faire fonctionner comme prévu.
Ajouté. merci.

OriginalL'auteur Gone Coding
1

Un exemple est décrit en plus de détails ici en outre, il est un praticable version est sur jquery ui du site officiel avec son code source.

Une simple déclaration pourrait être quelque chose comme ce qui suit:
```
var addTab = function (tabs, tabId, tabLabel, tabContentHtml) {
     var header = "<li><a href='#" + tabId + "'>" + tabLabel + "</a> </li>"
     tabs.find(".ui-tabs-nav").append(header);
     tabs.append("<div id='" + tabId + "'><p>" + tabContentHtml + "</p></div>");
     tabs.tabs("refresh");
};
```
Ajout d'un nouvel onglet est plus facile, il suffit de taper le texte suivant:
```
$("#tabs_area").tabs();
addTab($("#tabs_area"), "tab_id1", "Tab 1", "this is just test");
```
Merci pour ça; je vois l'ancien code fonctionne toujours. C'est un peu une honte parce que votre solution est beaucoup plus élégant. Vous compter qu'il restera compatible? La mise à jour à travers le conseil d'administration serait douloureux.

OriginalL'auteur msoliman

Vous devez vous connecter pour publier un commentaire.