Ebben a blogban egy harmonikát fogok létrehozni natív javascript segítségével. Nincs szükség olyan könyvtárra, mint a jQuery. A jQueryUI rendelkezik egy beépített harmonika komponenssel, amelyet nagyszerűen lehet használni. De felelős fejlesztőként tudnunk kell azt is, hogyan hozhatunk létre egyet tiszta javascript segítségével. Ha nem tudod mi az a accordion, akkor nézz meg itt egy jquery-t.
Bontjuk le a komponenst kisebb lépésekre.
- Az akkordion panelek listáját tartalmazza.
- Minden panel két komponensből áll, header & body.
- Az összes panel fejléc komponense mindig látható.
- A panel kibontható vagy összecsukható.
- Ha egy panel kibontva van, a test komponense láthatóvá válik.
- Egyszerre csak egy panel bővíthető.
- Mikor egy másik panel bővül, az utolsó panel testkomponense elrejtődik.
Építsük fel a komponenst kis lépésekkel.
1. lépés :- Alap HTML tervezése
Készítsünk néhány alap html-t, amely létrehozza a panelek listáját a fejléc & testtel.
A fenti html tartalmazza a panelek listáját. Minden panel fejléc és test elemmel rendelkezik. Jelenleg minden látható.
2. lépés :- Néhány CSS definiálása a láthatóság kezeléséhez
Hozzunk létre két CSS osztályt a test láthatóságának meghatározásához.
Alapértelmezés szerint el akarjuk rejteni az összes panel testét a követelménynek megfelelően. Most egyszerre csak a kibővített elemet kell megjelenítenünk. Hozzáadjuk az active osztályt a panel div-hez, hogy láthatóvá tegyük a testet.
Step3 :- CSS használata a HTML-ben
A CSS hozzáadása után a HTML-ünkben a kód a következő lesz
Most a panel összes teste el van rejtve, kivéve az elsőt. Létrehoztuk az alapvető harmonika komponensünket. Néhány javascriptet kell használnunk, hogy teljesen működőképessé tegyük.
4. lépés :- Kattintási események hozzáadása
Kattintási eseményt fogunk hozzáadni minden panelhez, ami megváltoztatja a panel láthatóságát.
JS Fiddle link itt
initAccordion függvényt definiálunk a harmonika komponens inicializálásához. Minden panelre egy kattintási eseményt helyez el. Amikor egy panelre kattintunk, eltávolítja az aktív osztályt az aktuálisan aktív panelről, és hozzáadja az új panelhez. Alapértelmezés szerint az első panelt teszi aktívvá. Bármelyik panelt aktívvá tehetjük alapértelmezés szerint, ha a panel elemet átadjuk a showPanel függvénynek.
Sikeresen létrehoztuk a harmonikánkat. Ez csak egy nagyon egyszerű modellje a harmonikának, de lefedi a fő funkcionalitást.
Képesebbé tehetjük szép css stílusok, animáció és ikonok hozzáadásával. Emellett teljesítményorientáltabbá tehetjük az eseménydelegáció & megvalósításával, az aktuális aktív elemek gyorsítótárazásával. Az eseményekről szóló blogomban részletesen megismerheti az eseményeket.