web-dev-qa-db-ger.com

Build Step Progress Bar (CSS und JQuery)

enter image description here

Sie haben Iterationen dieser Art von Fortschrittsbalken auf Websites wie Paypal gesehen. Wie geht man vor, um dies mit CSS und jquery einzurichten? Ich habe 4 Seiten und jede Seite ist ein Schritt ... also 4 Schritte.

jquerycssprogress-barmulti-step
58
WillingLearner

Ich habe nach einer Lösung gesucht, die Prozessschritte in meiner Webanwendung visualisiert. Ich habe das folgende hervorragende Werk von Stephen A Thomas gefunden:

Verfolgung des Fortschritts in reinem CSS ( Original Link ist jetzt tot )

In seiner Herangehensweise kommt Thomas sogar mit CSS davon - kein Javascript! Im Wesentlichen macht der folgende CSS-Code aus seinem Artikel den Trick für mich:

    <style>

    <!-- Progress with steps -->

    ol.progtrckr {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    ol.progtrckr li {
        display: inline-block;
        text-align: center;
        line-height: 3em;
    }

    ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
    ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
    ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
    ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
    ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
    ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
    ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
    ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }

    ol.progtrckr li.progtrckr-done {
        color: black;
        border-bottom: 4px solid yellowgreen;
    }
    ol.progtrckr li.progtrckr-todo {
        color: silver; 
        border-bottom: 4px solid silver;
    }

    ol.progtrckr li:after {
        content: "\00a0\00a0";
    }
    ol.progtrckr li:before {
        position: relative;
        bottom: -2.5em;
        float: left;
        left: 50%;
        line-height: 1em;
    }
    ol.progtrckr li.progtrckr-done:before {
        content: "\2713";
        color: white;
        background-color: yellowgreen;
        height: 1.2em;
        width: 1.2em;
        line-height: 1.2em;
        border: none;
        border-radius: 1.2em;
    }
    ol.progtrckr li.progtrckr-todo:before {
        content: "\039F";
        color: silver;
        background-color: white;
        font-size: 1.5em;
        bottom: -1.6em;
    }

</style>

Sowie HTML-Tags aus seinem Beispiel (ich benutze Grails GSP-Seiten, um Tags und die Klasse "done/todo" dynamisch zu generieren):

<ol class="progtrckr" data-progtrckr-steps="5">
    <li class="progtrckr-done">Order Processing</li>
    <li class="progtrckr-done">Pre-Production</li>
    <li class="progtrckr-done">In Production</li>
    <li class="progtrckr-done">Shipped</li>
    <li class="progtrckr-todo">Delivered</li>
</ol>

Ich hoffe es hilft. Funktioniert ziemlich gut für mich.

[~ # ~] Update [~ # ~] : Die folgende (gekürzte) Version funktioniert ebenfalls gut.

    ol.progtrckr {
        display: table;
        list-style-type: none;
        margin: 0;
        padding: 0;
        table-layout: fixed;
        width: 100%;
    }
    ol.progtrckr li {
        display: table-cell;
        text-align: center;
        line-height: 3em;
    }
    ... and the rest of the CSS ...

    <ol class="progtrckr">
        ...
    </ol>

display: table; table-layout: fixed; width: 100% Stellt sicher, dass die Listenelemente automatisch die gleiche Größe haben, solange der Inhalt nicht überläuft. Es ist nicht erforderlich, data-progtrckr-steps Und das zugehörige CSS zu verwenden.

52
Jeltok

Hier ist, wie man eins macht:

http://24ways.org/2008/checking-out-progress-meters

Hier einige Inspirationsbeispiele:

http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/

17
ven

Es gibt viele sehr nette Antworten auf dieser Seite und ich habe nach weiteren gegoogelt, aber keine der Antworten hat alle Kontrollkästchen auf meiner Wunschliste angekreuzt:

  • Nur CSS, kein Javascript
  • Halten Sie sich an Tom Kennys Best Design Practices
  • Layout wie die anderen Antworten
  • Jeder Schritt hat einen Namen und eine Nummer
  • Responsive Layout: unabhängig von der Schriftgröße
  • Fließendes Layout: Die Liste und ihre Elemente werden mit der verfügbaren Breite skaliert
  • Die Namen und Nummern sind in ihrem Block zentriert
  • Die "Fertig" -Farbe geht bis einschließlich des aktiven Elements, aber nicht darüber hinaus.
  • Das aktive Element sollte grafisch hervorgehoben werden

Also habe ich den Code aus mehreren Beispielen gemischt, die benötigten Dinge behoben und hier ist das Ergebnis:

Progress Tracker v2

Ich habe folgendes CSS und HTML benutzt:

/* Progress Tracker v2 */
ol.progress[data-steps="2"] li { width: 49%; }
ol.progress[data-steps="3"] li { width: 33%; }
ol.progress[data-steps="4"] li { width: 24%; }
ol.progress[data-steps="5"] li { width: 19%; }
ol.progress[data-steps="6"] li { width: 16%; }
ol.progress[data-steps="7"] li { width: 14%; }
ol.progress[data-steps="8"] li { width: 12%; }
ol.progress[data-steps="9"] li { width: 11%; }

.progress {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 20px 0 20px 0;
    padding: 0;
}

.progress li {
    float: left;
    text-align: center;
    position: relative;
}

.progress .name {
    display: block;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 1em;
    color: black;
    opacity: 0.3;
}

.progress .step {
    color: black;
    border: 3px solid silver;
    background-color: silver;
    border-radius: 50%;
    line-height: 1.2;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    z-index: 0;
}

.progress .step span {
    opacity: 0.3;
}

.progress .active .name,
.progress .active .step span {
    opacity: 1;
}

.progress .step:before {
    content: "";
    display: block;
    background-color: silver;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    left: 0;
    z-index: -1;
}

.progress .step:after {
    content: "";
    display: block;
    background-color: silver;
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    right: 0;
    z-index: -1;
}

.progress li:first-of-type .step:before {
    display: none;
}

.progress li:last-of-type .step:after {
    display: none;
}

.progress .done .step,
.progress .done .step:before,
.progress .done .step:after,
.progress .active .step,
.progress .active .step:before {
    background-color: yellowgreen;
}

.progress .done .step,
.progress .active .step {
    border: 3px solid yellowgreen;
}
<!-- Progress Tracker v2 -->
<ol class="progress" data-steps="4">
    <li class="done">
        <span class="name">Foo</span>
        <span class="step"><span>1</span></span>
    </li>
    <li class="done">
        <span class="name">Bar</span>
        <span class="step"><span>2</span></span>
    </li>
    <li class="active">
        <span class="name">Baz</span>
        <span class="step"><span>3</span></span>
    </li>
    <li>
        <span class="name">Quux</span>
        <span class="step"><span>4</span></span>
    </li>
</ol>

Wie im obigen Beispiel zu sehen ist, müssen jetzt zwei Listenelementklassen zur Kenntnis genommen werden: active und done. Verwenden class="active" Verwenden Sie für den aktuellen Schritt class="done" für alle vorhergehenden Schritte.

Beachten Sie auch die data-steps="4" im Tag ol; Stellen Sie hier die Gesamtzahl der Schritte ein, um allen Listenelementen die richtige Größe zuzuweisen.

Fühlen Sie sich frei, mit der JSFiddle herumzuspielen. Genießen!

15
Patrick Atoon

So habe ich es mit reinem CSS und HTML erreicht (kein JavaScript/Bilder etc.).

http://jsfiddle.net/tuPrn/

Es verschlechtert sich in den meisten Browsern auf elegante Weise (ich muss ein Update hinzufügen, da in <IE9 kein letzter Typ vorhanden ist).

14
user171304

Ich hatte die gleichen Anforderungen, um eine Art Step-Progress-Tracker zu erstellen, also habe ich zu diesem Zweck ein JavaScript-Plugin erstellt. Hier ist die JsFiddle für die Demo für diesen Step Progress Tracker. Sie können auf den Code auch über GitHub zugreifen.

Im Grunde genommen nimmt es die json-Daten (in einem bestimmten Format, das unten beschrieben wird) als Eingabe und erstellt darauf basierend den Fortschritts-Tracker. Markierte Schritte zeigen die abgeschlossenen Schritte an.

Der HTML-Code sieht mit Standard-CSS wie unten dargestellt aus, Sie können ihn jedoch gemäß dem Thema Ihrer Anwendung anpassen. Es besteht die Möglichkeit, für jeden Schritt einen QuickInfo-Text anzuzeigen.

Hier ist ein Codeausschnitt dafür: 

//container div 
<div id="tracker1" style="width: 700px">
</div>

//sample JSON data
var sampleJson1 = {
ToolTipPosition: "bottom",
data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
    { order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
    { order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
    { order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};    

//Invoking the plugin
$(document).ready(function () {
        $("#tracker1").progressTracker(sampleJson1);
    });

Hoffentlich ist es auch für jemanden anderen nützlich!

enter image description here

2
Sanjeev Rai

Das habe ich gemacht:

  1. Erstellen Sie jQuery .progressbar (), um ein Div in eine Fortschrittsanzeige zu laden.
  2. Erstellen Sie den Schritttitel unten in der Fortschrittsleiste. Positionieren Sie sie mit CSS .
  3. Dann erstelle ich eine Funktion in jQuery, die den Wert des Fortschrittsbalkens jedes Mal ändert, wenn Benutzer zu wechseln nächster Schritt.

HTML 

<div id="divProgress"></div>
<div id="divStepTitle">
    <span class="spanStep">Step 1</span> <span class="spanStep">Step 2</span> <span class="spanStep">Step 3</span>
</div>

<input type="button" id="btnPrev" name="btnPrev" value="Prev" />
<input type="button" id="btnNext" name="btnNext" value="Next" />

CSS 

#divProgress
{
    width: 600px;
}

#divStepTitle
{
    width: 600px;
}

.spanStep
{
    text-align: center;
    width: 200px;
}

Javascript/jQuery

var progress = 0;

$(function({
    //set step progress bar
    $("#divProgress").progressbar();

    //event handler for prev and next button
    $("#btnPrev, #btnNext").click(function(){
        step($(this));
    });
});

function step(obj)
{
    //switch to prev/next page
    if (obj.val() == "Prev")
    {
        //set new value for progress bar
        progress -= 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing previous page
    }
    else if (obj.val() == "Next")
    {
        //set new value for progress bar
        progress += 20;
        $("#divProgress").progressbar({ value: progress });

        //do extra step for showing next page
    }
}
1
suhendri