web-dev-qa-db-fra.com

Construire la barre de progression des étapes (css et jquery)

enter image description here

Vous avez vu des itérations de ce type de barre de progression sur des sites tels que Paypal. Comment peut-on configurer cela avec CSS et jquery? J'ai 4 pages et chaque page est une étape ... donc 4 étapes.

jquerycssprogress-barmulti-step
58
WillingLearner

J'ai recherché une solution permettant de visualiser les étapes du processus dans mon application Web. J'ai trouvé l'excellent article suivant rédigé par Stephen A Thomas:

Suivi des progrès en CSS pur ( lien d'origine maintenant mort )

Dans son approche, Thomas n’utilise même que CSS - pas de Javascript! En substance, le code CSS suivant de son article me convient parfaitement:

    <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>

Ainsi que les balises HTML de son exemple (j'utilise les pages Grails GSP pour générer des balises et la classe 'done/todo' dynamiquement):

<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>

J'espère que ça aide. Fonctionne assez bien pour moi.

[~ # ~] update [~ # ~] : La version suivante (abrégée) fonctionne également bien.

    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% assurez-vous que les éléments de la liste ont automatiquement la même taille tant que le contenu ne déborde pas. Il n'est pas nécessaire d'utiliser data-progtrckr-steps et ses CSS associés.

52
Jeltok

Voici comment en faire un:

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

Voici quelques exemples d'inspiration:

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

17
ven

Il y a beaucoup de très belles réponses sur cette page et j'ai recherché d'autres mots sur Google, mais aucune des réponses ne répondait à toutes les cases de ma liste de souhaits:

  • CSS uniquement, pas de Javascript
  • S'en tenir à Tom Kenny Meilleures pratiques de conception
  • Mise en page comme les autres réponses
  • Chaque étape a un nom et un numéro
  • Disposition sensible: indépendante de la taille de la police
  • Mise en page fluide: la liste et ses éléments sont redimensionnés avec la largeur disponible
  • Les noms et les nombres sont centrés dans leur bloc
  • La couleur "terminé" va jusqu'à l'élément actif inclus, mais pas après.
  • L'élément actif doit ressortir graphiquement

J'ai donc mélangé le code de plusieurs exemples, corrigé les choses dont j'avais besoin et voici le résultat:

Progress Tracker v2

J'ai utilisé les CSS et HTML suivants:

/* 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>

Comme on peut le voir dans l'exemple ci-dessus, il existe maintenant deux classes d'éléments de liste pour prendre note de: active et done. Utilisation class="active" pour l'étape en cours, utilisez class="done" pour toutes les étapes précédentes.

Notez également le data-steps="4" dans la balise ol; définissez ceci sur le nombre total d'étapes pour appliquer la taille correcte à tous les éléments de la liste.

N'hésitez pas à jouer avec le JSFiddle . Prendre plaisir!

15
Patrick Atoon

C’est ce que j’ai réalisé en utilisant uniquement du CSS et du HTML (pas de JavaScript/images, etc.).

http://jsfiddle.net/tuPrn/

Il se dégrade gracieusement dans la plupart des navigateurs (je dois ajouter un correctif faute de dernier type dans <IE9).

14
user171304

J'avais les mêmes exigences pour créer une sorte de traqueur de progression pas à pas, alors j'ai créé un plugin JavaScript à cette fin. Voici le JsFiddle pour la démonstration du suivi de cette étape. Vous pouvez également accéder à son code sur GitHub .

Fondamentalement, il prend les données JSON (dans un format particulier décrit ci-dessous) en entrée et crée le suivi de la progression en fonction de cela. Les étapes en surbrillance indiquent les étapes terminées.

Son code html ressemblera à celui présenté ci-dessous avec le CSS par défaut, mais vous pouvez le personnaliser en fonction du thème de votre application. Il existe une option permettant d'afficher un texte d'info-bulle pour chaque étape.

Voici un extrait de code pour cela: 

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

J'espère que cela sera utile pour quelqu'un d'autre aussi!

enter image description here

2
Sanjeev Rai

C'est ce que j'ai fait:

  1. Créez jQuery .progressbar () pour charger une div dans une barre de progression.
  2. Créez le titre de l'étape au bas de la barre de progression. Positionnez-les avec CSS .
  3. Ensuite, je crée une fonction dans jQuery qui modifie la valeur de la barre de progression à chaque fois que l'utilisateur passe à L'étape suivante.

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