Barre de progression de l'étape de construction (css et jquery)

Question

Vous avez vu des itérations de ce type de barre de progression sur des sites comme PayPal. Comment mettre en place cela en utilisant CSS et jquery? J'ai 4 pages et chaque page est une étape... donc 4 étapes.

Answer 1

J'ai cherché une solution qui permettra de visualiser les étapes du processus dans mon application web. J'ai trouvé l'excellent article suivant de Stephen A Thomas :

Suivi de Progression en CSS Pur (Lien original maintenant mort)

Dans son approche, Thomas parvient même à s'en sortir en n'utilisant que du CSS - pas de Javascript ! En essence, le code CSS suivant de son article fait l'affaire pour moi :

    <!-- Progression avec étapes -->

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

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

    Traitement de Commande
    Pré-Production
    En Production
    Expédié
    Livrée

J'espère que ça aide. Fonctionne plutôt bien pour moi.

---

MISE À JOUR : 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;
    }
    ... et le reste du CSS ...

        ...

display: table; table-layout: fixed; width: 100% garantit que les éléments de la liste sont automatiquement dimensionnés de manière égale tant que le contenu ne dépasse pas. Il n'est pas nécessaire d'utiliser data-progtrckr-steps et son CSS associé.

Answer 2

Voici comment en créer 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/

Answer 3

Voici comment j'ai réussi à le faire en utilisant uniquement CSS et HTML (pas de JavaScript/images etc.).

http://jsfiddle.net/tuPrn/

Il se dégrade gracieusement dans la plupart des navigateurs (je dois ajouter une correction pour le manque de last-of-type dans

Answer 4

J'avais les mêmes exigences pour créer une sorte de suivi de progression par étape, alors j'ai créé un plugin JavaScript à cet effet. Voici le JsFiddle pour la démo de ce suivi de progression par étape. Vous pouvez également accéder à son code sur GitHub.

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

Son HTML ressemblera en quelque sorte à ce qui est montré ci-dessous avec le CSS par défaut, mais vous pouvez le personnaliser selon le thème de votre application. Il y a également une option pour afficher du texte d'info-bulle pour chaque étape.

Voici un extrait de code à cet effet:

//div container

//exemple de données JSON
var sampleJson1 = {
ToolTipPosition: "bottom",
data: [{ order: 1, Text: "Foo", ToolTipText: "Étape1-Foo", highlighted: true },
    { order: 2, Text: "Bar", ToolTipText: "Étape2-Bar", highlighted: true },
    { order: 3, Text: "Baz", ToolTipText: "Étape3-Baz", highlighted: false },
    { order: 4, Text: "Quux", ToolTipText: "Étape4-Quux", highlighted: false }]
};    

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

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

Answer 5

C'est ce que j'ai fait :

1. Créer jQuery .progressbar() pour charger un div dans une barre de progression.
2. Créer l'étape titre en bas de la barre de progression. Les positionner avec du CSS.
3. Ensuite, je crée une fonction en jQuery qui change la valeur de la barre de progression à chaque fois que l'utilisateur passe à l'étape suivante.

HTML

    Étape 1 Étape 2 Étape 3

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() == "Précédent")
    {
        //set new value for progress bar
        progress -= 20;
        $("#divProgress").progressbar({ value: progress });

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

        //do extra step for showing next page
    }
}