In questo blog, sto per creare una fisarmonica usando javascript nativo. Nessuna libreria come jQuery è necessaria. JQueryUI ha un componente fisarmonica integrato, che è ottimo da usare. Ma come sviluppatore responsabile, dovremmo anche sapere come crearne una con puro javascript. Se non sai cos’è la fisarmonica, allora guarda quella di jquery qui.
Ripartiamo il componente in passi più piccoli.
- La fisarmonica contiene una lista di pannelli.
- Ogni pannello ha due componenti, header & body.
- Il componente header di tutti i pannelli è sempre visibile.
- Un pannello può essere espanso o collassato.
- Quando un pannello è espanso, il suo componente body diventa visibile.
- Solo un pannello può essere espanso alla volta.
- Quando un altro pannello è espanso, il componente corpo dell’ultimo pannello si nasconde.
Costruiamo il componente a piccoli passi.
Passo1 :- Progettare HTML di base
Creiamo un po’ di html di base che crea una lista di pannelli con intestazione & corpo.
Il precedente html contiene una lista di pannelli. Ogni pannello ha un’intestazione e un corpo. Attualmente tutto è visibile.
Step2 :- Definire alcuni CSS per gestire la visibilità
Creiamo due classi CSS per definire la visibilità del corpo.
Per default, vogliamo nascondere tutto il corpo del pannello secondo i requisiti. Ora abbiamo bisogno di mostrare solo l’elemento espanso alla volta. Aggiungeremo la classe active nel div del pannello per rendere il corpo visibile.
Step3 :- Usando i CSS nell’HTML
Dopo aver aggiunto i CSS nel nostro HTML, il codice sarà
Ora tutto il corpo del pannello è nascosto tranne il primo. Abbiamo creato il nostro componente fisarmonica di base. Abbiamo bisogno di usare un po’ di javascript per renderlo completamente funzionale.
Step4 :- Aggiungere eventi click
Aggiungeremo l’evento click su ogni pannello, che cambierà la visibilità del pannello.
JS Fiddle link qui
initAccordion function è definita per inizializzare il componente accordion. Mette un evento click su ogni pannello. Quando un pannello viene cliccato, rimuove la classe attiva dal pannello attivo corrente e la aggiunge al nuovo pannello. Per impostazione predefinita, rende attivo il primo pannello. Possiamo rendere qualsiasi pannello attivo di default passando l’elemento panel alla funzione showPanel.
Abbiamo creato la nostra fisarmonica con successo. Questo è solo un modello molto semplice di fisarmonica, ma copre la funzionalità principale.
Possiamo renderlo più elegante aggiungendo stili css, animazioni e icone. Inoltre, possiamo renderla più orientata alle prestazioni implementando la delega degli eventi &e il caching degli elementi attivi correnti. Fate riferimento al mio blog sugli eventi per conoscere gli eventi in dettaglio.