web-dev-qa-db-fra.com

Comment basculer par programmation vers un nouvel onglet jQuery UI?

Je crée une interaction de type "check-out" avec les onglets jQuery UI. Cela signifie que le clic d'un bouton sur le premier onglet désactivera le premier onglet et passera au suivant. J'ai parcouru les messages sur Stack Overflow mais rien que j'essaie ne semble fonctionner. J'utilise jQuery UI 1.8, voici le code:

$(document).ready(function() {
    var $tabs = $('#tabs').tabs({ selected: 0 }); 
    $tabs.tabs('option', 'selected', 0);
    $("#tabs").tabs({disabled: [1,2]});
    $("#addstudent").click(function(){
        $tabs.tabs('option', 'selected', 1);
        $("#tabs").tabs({disabled: [0,2]});
    }); 
    $("#confirm").click(function(){
        $tabs.tabs('option', 'selected', 2);
        $("#tabs").tabs({disabled: [0,1]});
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1">Student Information</a></li>
        <li><a href="#fragment-2">Confirmation</a></li>
        <li><a href="#fragment-3">Invoice</a></li>
    </ul>
    <div id="fragment-1">
        <button id="addstudent" >Add Student</button>
    </div>
    <div id="fragment-2">
        <button id="confirm" >Confirm</button>
    </div>
    <div id="fragment-3">
        tab 3, index 2
    </div>
</div>

Lorsque je clique sur les boutons, l'onglet suivant est déverrouillé (en ce sens qu'il est sélectionnable) mais il ne désactive pas l'onglet à l'index 0 et ne passe pas à l'onglet à l'index 1. En outre, le panneau correspondant ne s'affiche pas.

jqueryjquery-uijquery-ui-tabs
37
Faiyet

Essayez de changer votre code en ceci:

var $tabs = $('#tabs').tabs({ selected: 0, disabled: [1,2] }); 
$("#addstudent").click(function(){
   $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);        
}); 
$("#confirm").click(function(){
    $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);    
});

Exemple JSBin

17
Richard Dalton

Pour jQuery UI 1.9+, la la méthode select a été déconseillée dans l'API. Dans 1.9+, vous devez utiliser option et active à la place.

De la documentation:

Ancienne API: 

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "select", 2 );

Nouvelle API: 

// Activate the third tab (in a zero-based index)
$( "#tabs" ).tabs( "option", "active", 2 );
94
Aaron Sherman

@Aaron Sherman a déjà répondu à votre question. Voici l'étape détaillée.

Voici la partie JS du code:

$(document) .ready(function() {
    $("#tabs").tabs(); 
    $(".btnNext").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
        });
        $(".btnPrev").click(function () {
            $( "#tabs" ).tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
        });
});

Voici les balises "a href" à ajouter dans vos onglets div

Exemple:

<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>
3
Mahesh Vemuri

J'ai modifié la solution de @ Mahesh Vemuri en ajoutant la possibilité de désactiver les étapes suivant la première puis de les activer après avoir cliqué sur le bouton "SUIVANT":

JScode:

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

    $("#tabs").tabs( "option", "disabled", [ 1, 2 ] );

    $(".btnNext").click(function () {
        $("#tabs").tabs( "enable", $("#tabs").tabs('option', 'active')+1 );
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')+1 );
    });

    $(".btnPrev").click(function () {
        $("#tabs").tabs( "option", "active", $("#tabs").tabs('option', 'active')-1 );
    });
});

Le HTML est le même.

PS: Notez qu'avec ce code, cliquer sur le bouton SUIVANT activera l'onglet suivant (précédemment désactivé) mais cliquer sur le bouton PRÉCÉDENT ne désactivera pas l'onglet actuel, afin de permettre à l'utilisateur de reculer et d'avancer dans un flux séquentiel jusqu'au prochain onglet désactivé.

Si tout va bien, si les onglets contiennent 3 étapes d'un formulaire, l'action du bouton NEXT ne pourra être déclenchée que si Validation du formulaire JS réussit.

2
Luca Detomi
$(function() {
    $( "#tabs" ).tabs({ activate: function(event ,ui){
        //console.log(event);
        //alert(  ui.newTab.index());
        //alert( ui.newTab.attr('li',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);

        alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
        //alert( this.text);
    } });
});
1
Milind Morey