Tässä blogissa aion luoda harmonikan käyttämällä natiivia javascriptiä. Mitään jQueryn kaltaista kirjastoa ei tarvita. JQueryUI:ssa on sisäänrakennettu harmonikkakomponentti, jota on hyvä käyttää. Mutta vastuullisena kehittäjänä meidän pitäisi myös osata luoda sellainen puhtaalla javascriptillä. Jos et tiedä mikä harmonikka on niin katso jquery sellainen täältä.
Puretaan komponentti pienempiin vaiheisiin.
- Accordion sisältää listan paneeleista.
- Jokaiseen paneeliin kuuluu kaksi komponenttia, header & body.
- Kaikkien paneelien otsikkokomponentti on aina näkyvissä.
- Paneeli voidaan laajentaa tai sulkea.
- Kun paneeli on laajennettu, sen runkokomponentti tulee näkyviin.
- Vain yksi paneeli voidaan laajentaa kerrallaan.
- Kun toinen paneeli laajennetaan, viimeisen paneelin runkokomponentti piiloutuu.
Rakennetaan komponentti pienin askelin.
Vaihe1 :- Suunnitellaan perus-HTML
Luotaan perus-HTML, joka luo listan paneeleista, joilla on otsikko & body.
Yllä oleva html sisältää listan paneeleista. Jokaisella paneelilla on otsikko ja runkoelementti. Tällä hetkellä kaikki on näkyvissä.
Vaihe2 :- Määritellään joitakin CSS-luokkia näkyvyyden käsittelemiseksi
Luotaan kaksi CSS-luokkaa, joilla määritetään rungon näkyvyys.
Vakiossa haluamme piilottaa kaikki paneelin rungot tarpeen mukaan. Nyt meidän on näytettävä vain laajennettu elementti kerrallaan. Lisäämme active-luokan paneeli-diviin, jotta runko saadaan näkyviin.
Step3 :- CSS:n käyttäminen HTML:ssä
Sen jälkeen, kun olemme lisänneet CSS:n HTML:ään, koodi on
Nyt kaikki paneelin runko on piilotettu ensimmäistä lukuun ottamatta. Loimme perus harmonikkakomponenttimme. Meidän täytyy käyttää jonkin verran javascriptiä saadaksemme sen täysin toimivaksi.
Vaihe4 :- Klikkaustapahtumien lisääminen
Lisäämme klikkaustapahtuman jokaiselle paneelille, joka muuttaa paneelin näkyvyyttä.
JS Fiddle-linkki tässä
initAccordion-funktio on määritelty harmonikkakomponentin alustamiseksi. Se asettaa klikkaustapahtuman jokaiselle paneelille. Kun paneelia klikataan, se poistaa aktiivisen luokan nykyisestä aktiivisesta paneelista ja lisää sen uuteen paneeliin. Oletusarvoisesti se tekee ensimmäisestä paneelista aktiivisen. Voimme tehdä mistä tahansa paneelista oletusarvoisesti aktiivisen siirtämällä paneelielementin showPanel-funktioon.
Loimme harmonikkamme onnistuneesti. Tämä on vain harmonikan perusmalli, mutta se kattaa tärkeimmät toiminnot.
Voidaan tehdä siitä hienompi lisäämällä hienoja css-tyylejä, animaatioita ja kuvakkeita. Voimme myös tehdä siitä suorituskykyisemmän toteuttamalla tapahtumadelegaation & välimuistiin tallentamalla nykyiset aktiiviset elementit. Tutustu tapahtumia käsittelevään blogiini oppiaksesi tapahtumista yksityiskohtaisesti.