I denne blog vil jeg skabe en harmonika ved hjælp af indbygget javascript. Intet bibliotek som jQuery er påkrævet. JQueryUI har en indbygget harmonikakomponent, som er fantastisk at bruge. Men som en ansvarlig udvikler bør vi også vide, hvordan vi kan oprette en med rent javascript. Hvis du ikke ved, hvad harmonika er, så se jquery en her.
Lad os bryde komponenten ned i mindre trin.
- Accordion indeholder liste af paneler.
- Hvert panel har to komponent, header & body.
- Hovedkomponenten for alle paneler er altid synlig.
- Et panel kan udvides eller klappes sammen.
- Når et panel udvides, bliver dets kropskomponent synlig.
- Kun ét panel kan udvides ad gangen.
- Når andet panel udvides, skjules sidste panels kropskomponent.
Lad os opbygge komponenten med små skridt.
Strin1 :- Design grundlæggende HTML
Lad os oprette nogle grundlæggende html, som skaber liste af paneler med header & body.
Overstående html indeholder liste af panel. Hvert panel har header og body element. I øjeblikket er alt synligt.
Step2 :- Definer nogle CSS til at håndtere synlighed
Lad os oprette to CSS-klasser til at definere synligheden af kroppen.
Som standard ønsker vi at skjule alle panelets krop som pr. krav. Nu har vi brug for kun at vise udvidet element ad gangen. Vi tilføjer active-klassen i panelets div for at gøre kroppen synlig.
Step3 :- Brug af CSS i HTML
Når vi har tilføjet CSS i vores HTML, vil koden være
Nu er alle panelets krop skjult undtagen den første. Vi har skabt vores grundlæggende harmonikakomponent. Vi skal bruge noget javascript for at gøre den fuldt funktionel.
Step4 :- Tilføjelse af klikbegivenheder
Vi vil tilføje klikbegivenhed på hvert panel, som vil ændre panelets synlighed.
JS Fiddle-link her
initAccordion-funktionen er defineret for at initialisere harmonikakomponenten. Den sætter en klikbegivenhed på hvert panel. Når der klikkes på et panel, fjerner den den aktive klasse fra det aktuelle aktive panel og tilføjer den til det nye panel. Som standard gør den det første panel aktivt. Vi kan gøre et hvilket som helst panel aktivt som standard ved at sende panelelementet til showPanel-funktionen.
Vi har oprettet vores harmonika med succes. Dette er blot en meget grundlæggende model af harmonika, men den dækker hovedfunktionaliteten.
Vi kan gøre det mere fancy ved at tilføje flotte css-stilarter, animation og ikoner. Vi kan også gøre det mere præstationsorienteret ved at implementere begivenhedsdelegering & caching aktuelle aktive elementer. Henvis til min blog om begivenheder for at lære om begivenheder i detaljer.