Aggiungi passi di progresso ai moduli con questo plugin jQuery

La maggior parte di noi conosce le barre di avanzamento e come funzionano nella progettazione dell'interfaccia utente. Aiutano a definire tempi di caricamento, moduli di caricamento e periodi di ritardo simili tra le pagine.

Ma passi di progresso sono un po 'diversi Questi funzionano come breadcrumb nella parte superiore della pagina per guidare gli utenti attraverso una procedura dettagliata (di solito moduli di iscrizione e verifica).

Con jQuery Steps puoi aggiungere rapidamente passi di avanzamento personalizzati su qualsiasi pagina del tuo sito.

L'intero plugin gira su jQuery e viene rilasciato gratuitamente su GitHub.

Puoi eseguirli le fasi di avanzamento come funzionalità di più pagine che guida il visitatore attraverso diverse pagine del tuo sito. Oppure puoi eseguire questo come un passo Ajax che sposta l'utente attraverso la stessa pagina con campi modulo dinamici.

Nelle opzioni del plugin troverai le impostazioni per cambiare il “inizio” posizione, pulsanti footer, pulsanti avanti / indietro e molto altro ancora.

Ci sono anche alcuni eventi che puoi scegliere come target con le tue funzioni di callback personalizzate ogni volta che l'utente avanza nel passaggio di progresso o quando l'utente raggiunge la fine.

Tutto sommato, questo è un plugin abbastanza nuovo così non ha un sacco di opzioni tra cui scegliere. Ma è sicuramente uno dei migliori plug-in che troverai per creare queste funzionalità personalizzate.

Nota bene: il supporto del browser è per lo più limitato ai browser moderni e per i browser Microsoft questo è stato testato solo in IE 11. Se stai cercando di supportare i browser più vecchi dovrai fare dei test da solo o provare a creare dei custom metodi di fallback per gestire gli utenti legacy.

Certamente uno dei plugin per il progresso più semplice che abbia mai visto e dovrebbe funzionare bene anche con altri plugin jQuery.

Dai una rapida occhiata alla home page per una demo live insieme alle opzioni JS personalizzate e un pulsante di download per estrarre una copia del codice per te stesso.