wake-up-neo.com

Wie wechsle ich programmgesteuert zu einer neuen Registerkarte der jQuery-Benutzeroberfläche?

Ich baue eine "Check-out" -ähnliche Interaktion mit Registerkarten der jQuery-Benutzeroberfläche auf. Dies bedeutet, dass der Klick auf eine Schaltfläche auf der ersten Registerkarte die erste Registerkarte deaktiviert und zur nächsten wechselt. Ich habe die Posts auf Stack Overflow durchgearbeitet, aber nichts, was ich versuche, scheint zu funktionieren. Ich verwende jQuery UI 1.8, hier ist der 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>

Wenn ich auf die Schaltflächen klicke, wird der nächste Tab entsperrt (indem er auswählbar ist), aber der Tab bei Index 0 wird nicht deaktiviert, und es wird zum Tab bei Index 1 gewechselt. Außerdem wird der entsprechende Bereich nicht angezeigt.

37
Faiyet

Versuchen Sie, Ihren Code folgendermaßen zu ändern:

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

JSBin-Beispiel

17
Richard Dalton

Für jQuery UI 1.9+ wurde die Auswahlmethode wurde verworfen in der API angegeben. Ab Version 1.9 müssen Sie stattdessen option und active verwenden.

Aus der Dokumentation:

Alte API:

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

Neue API:

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

@Aaron Sherman hat Ihre Frage bereits beantwortet. Hier ist der detaillierte Schritt.

Hier ist JS Teil des Codes:

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

Hier sind die "a href" -Tags, die in Ihre Registerkarten div eingefügt werden sollen

Beispiel:

<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

Ich habe die Lösung von @ Mahesh Vemuri geändert und die Möglichkeit hinzugefügt, die folgenden Schritte zu deaktivieren und sie dann zu aktivieren, nachdem Sie auf die Schaltfläche "WEITER" geklickt haben:

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

Der HTML ist der selbe.

PS: Beachten Sie, dass mit diesem Code durch Klicken auf die Schaltfläche WEITER der nächste Tab aktiviert wird (zuvor deaktiviert), durch Klicken auf die Schaltfläche ZURÜCK jedoch der aktuelle Tab nicht deaktiviert wird, damit der Benutzer vorwärts und rückwärts zu einem Tab wechseln kann sequentieller Fluss bis zum nächsten deaktivierten Tab.

Wenn Registerkarten 3 Schritte eines Formulars enthalten, kann die Aktion der Schaltfläche WEITER hoffentlich nur ausgelöst werden, wenn ein JS-Formularüberprüfung erfolgreich ist.

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