I den här bloggen kommer jag att skapa ett dragspel med hjälp av javascript. Inget bibliotek som jQuery behövs. JQueryUI har en inbyggd dragspelskomponent som är utmärkt att använda. Men som ansvarig utvecklare bör vi också veta hur man skapar ett med rent javascript. Om du inte vet vad dragspel är så titta jquery en här.
Låt oss bryta ner komponenten i mindre steg.
- Accordion innehåller en lista med paneler.
- Varje panel har två komponenter, header & body.
- Huvudkomponenten för alla paneler är alltid synlig.
- En panel kan expanderas eller fällas ihop.
- När en panel expanderas blir dess kroppskomponent synlig.
- Endast en panel kan expanderas åt gången.
- När en annan panel expanderas döljs den sista panelens kroppskomponent.
Låt oss bygga komponenten med små steg.
Steg1 :- Utforma grundläggande HTML
Låt oss skapa lite grundläggande html som skapar en lista med paneler med rubrik & body.
Ovanstående html innehåller en lista med paneler. Varje panel har rubrik och kropp objekt. För närvarande är allt synligt.
Steg2 :- Definiera lite CSS för att hantera synlighet
Låt oss skapa två CSS-klasser för att definiera kroppens synlighet.
Som standard vill vi dölja alla panelens kropp enligt kraven. Nu behöver vi bara visa expanderade element åt gången. Vi kommer att lägga till active-klassen i panelens div för att göra kroppen synlig.
Steg3 :- Användning av CSS i HTML
När vi har lagt till CSS i vår HTML blir koden
Nu döljs hela panelens kropp utom den första. Vi har skapat vår grundläggande dragspelskomponent. Vi behöver använda lite javascript för att göra den fullt funktionell.
Steg4 :- Lägga till klickhändelser
Vi kommer att lägga till klickhändelser på varje panel, vilket kommer att ändra panelens synlighet.
JS Fiddle-länk här
initAccordion-funktionen är definierad för att initialisera dragspelskomponenten. Den sätter en klickhändelse på varje panel. När en panel klickas tar den bort den aktiva klassen från den aktuella aktiva panelen och lägger till den i den nya panelen. Som standard gör den den första panelen aktiv. Vi kan göra vilken panel som helst aktiv som standard genom att överlämna panelelementet till showPanel-funktionen.
Vi har skapat vårt dragspel framgångsrikt. Detta är bara en mycket grundläggande modell av dragspel, men den täcker den huvudsakliga funktionaliteten.
Vi kan göra det mer elegant genom att lägga till fina css-stilar, animationer och ikoner. Vi kan också göra den mer prestandainriktad genom att implementera händelsedelegering & cachelagring av aktuella aktiva element. Se min blogg om händelser för att lära dig mer om händelser i detalj.