Basic jquery-Schritte-Assistent

Versucht, dies zu tun für eine Weile jetzt, aber es scheint alles in jquery Schritte/Assistenten plugins sind sehr begrenzt und hoffte, dass Sie Jungs sind in der Lage, mir zu helfen ein wenig.

Was ich versuche zu tun, ist ein sehr einfaches 3-Schritte-Assistenten über jQuery. Also am Anfang zeigt es nur die .Schritt-aktiv und .Inhalt-aktive auf den ersten und dann 2 und dann 3, wo ich das Formular abschicken.

Hier ist mein HTML:

<div class="steps-wizard">
<div class="step1 step-active">1</div>
<div class="step2">2</div>
<div class="step3">3</div>
</div>

<form id="steps-form">
<div class="steps-content">
<!-- STEP 1 -->
<div class="step1-content content-active">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 2 -->
<div class="step2-content">
    -- CONTENT --
    <a href="#">Next</a>
</div>

<!-- STEP 3 -->
<div class="step3-content">
    -- CONTENT --
    <input type="submit">Submit</a>
</div>

Jede Hilfe auf diesem würde sehr geschätzt werden, wie es scheint, ich bin nicht in der Lage, diese korrekt funktioniert...

Danke Jungs!

Dies ist effektiv nur mit Registerkarten Inhalt, die viele tutorials online oder viele plugins verfügbar, die aus einer schnellen google-Suche
Ja, aber ich habe keine gefunden, die Schalter Registerkarten mit einem Klick auf eine Schaltfläche und in der Lage sein, um zurück zu gehen...
zuerst sollten Sie Ihren HTML-format richtig, um mögliche Probleme zu vermeiden... wollen Sie die navigation, um die Arbeit auf den oberen Tasten (1,2,3) und auch auf "weiter" - links? Sie haben erwähnt, dass Sie wollen, 'zurück' - also, ich denke, dass Sie benötigen, "prev/next" - Funktionalität?

InformationsquelleAutor Jack Johnson | 2013-07-10

  1. 3

    Ja, es gilt für viele Assistenten-plugins, aber nicht zu jQuery Schritte. jQuery Schritte ist ein sehr leistungsfähiges und feature-rich-Assistent-plugin. Es gibt viele CSS-Klassen, die Sie verwenden können, um anzupassen, die Steuern, wie Sie wollen. Jeder Schritt besteht aus einer step-Taste, einen Schritt Titel (der standardmäßig ausgeblendet ist) und ein Schritt-panel für den Inhalt. In Ihrem Fall haben Sie überschreiben nur zwei CSS-Klassen (siehe das folgende CSS-snippet).

    /* First hide all steps from the begining on */
.wizard > .steps li
{
    display: none;
}

/* Then just re-show only the current step */
.wizard > .steps li.current
{
    display: block;
}

    Einer Laufenden demo finden Sie hier.

    Weitere Informationen und Beispiele gehen hier.

    Für eine erweiterte Formular-Assistenten die Umsetzung gehen hier. Dort lernen Sie, wie man plug jQuery Schritte und jQuery Validierung zusammen.

    InformationsquelleAutor Rafael Staib

  2. 1

    Ich benutzte den HTML-code ein. Ich fügte hinzu, die zahlen zu --CONTENT-- zu sehen, was Los ist, und zusätzlich 2 Zeilen CSS zu verstecken inaktiv <div>s, aber ich glaube nicht, dass Sie wirklich brauchen Klassen wie step3-content.

    $(document).ready(function() {
    $('a').click(function(e) {
        //this prevents page reload after clicking <a> 
        e.preventDefault();
        //parent: exact <div> with <a> you just clicked, grandpa: all content <div>s, index: next <div> index
        var parent = $(this).parent('div'), grandpa = $('.steps-content>div'), index = grandpa.index(parent)+1;
        //remove active class from current <div>
        parent.removeClass('content-active');
        //set it to next div
        grandpa.eq(index).addClass('content-active');
        //another way to do the same, but using 1 line and children() instead of '>'
        $('.steps-wizard').children('div').removeClass('step-active').eq(index).addClass('step-active');
    });
    //that's it
});

    InformationsquelleAutor vladkras

  3. 0

    Ich denke, Sie wollen so etwas wie dieses:

    http://jsbin.com/egidod/1/

    Ich hoffe das wird Ihnen helfen.

    Habe ich nur ein einfaches tab-plugin. Es nutzt Jquery UI.

    InformationsquelleAutor NETCreator Hosting - WebDesign

  4. 0

    Verwende ich JQuery-plugin, Smart Wizard und es funktioniert perfekt.
    Die Umsetzung ist sehr einfach.
    Folgen Sie dem link um ein Beispiel und Dokumentation:

    https://github.com/mstratman/jQuery-Smart-Wizard

    InformationsquelleAutor Renato Vianna

Schreibe einen Kommentar