Dünaamiline HTML (DHTML) võimaldab teil oma veebisaitidel luua rakenduse stiilis kogemuse, vähendades tervete lehtede täieliku laadimise sagedust. Kui klõpsate mõnel rakendusel, muutub rakendus kohe, et näidata konkreetset sisu või pakkuda teile oma vastust.
Seevastu veebilehed tuleb tavaliselt uuesti laadida või laadida täiesti uus leht. See võib muuta kasutuskogemuse eraldatumaks. Teie kliendid peavad ootama esimese lehe laadimist ja siis uuesti ootama teise lehe laadimist jne.
Kasutamine vaatajakogemuse parandamiseks
DHTML-i kasutamine on selle kogemuse parandamise üks lihtsamaid viise div elemendid lülitavad sisse ja välja sisu kuvamiseks, kui seda nõutakse. A div element määratleb teie veebisaidil loogilised jaotused. Mõelge divist kui kastist, mis võib sisaldada lõike, pealkirju, linke, pilte ja isegi muid dive.
Mida vajate
Div-i loomiseks, mida saab sisse ja välja lülitada, vajate järgmist:
- Link div-i juhtimiseks, klõpsates selle sisse- ja väljalülitamiseks.
- Div, mida näidata ja peita.
- CSS kujundada div peidetud või nähtavaks.
- Toimingu sooritamiseks JavaScripti.
Kontrolliv link
Kontrolliv link on kõige lihtsam osa. Looge lihtsalt link nagu teisele lehele. Praegu jäta hrefi atribuut tühi.
Õpi HTML-i
Paigutage see oma veebisaidile ükskõik kuhu.
Div, mida näidata ja varjata
Looge div-element, mida soovite näidata ja peita. Veenduge, et teie div-il oleks ainulaadne ID. Näites on kordumatu ID õppida HTML-i.
See on sisu veerg. See algab tühjaks, välja arvatud see selgitustekst. Valige vasakpoolsest navigeerimisveerust, mida soovite õppida. Tekst ilmub allpool:
Õpi HTML-i
- Tasuta HTML-klass
- HTML-i õpetus
- Mis on XHTML?
CSS näitab ja peidab Div
Looge oma CSS-ile kaks klassi: üks peidaks div ja teine selle kuvamiseks. Selleks on teil kaks võimalust: kuvamine ja nähtavus.
Ekraan eemaldab div lehevoogust ja nähtavus lihtsalt muudab selle nähtavust. Mõned kodeerijad eelistavad kuva, aga mõnikord nähtavus on ka loogiline. Näiteks:
.hidden {kuva: puudub; }
.varjatud {kuva: blokeeri; }
Kui soovite kasutada nähtavust, muutke need klassid järgmisteks:
. varjatud {nähtavus: peidetud; }
.varjatud {nähtavus: nähtav; }
Lisage peidetud klass oma div-i, nii et see algab lehel peidetuna:
JavaScripti, et see toimiks
Selle skripti puhul vaadatakse ainult teie div-is määratud praegust klassi ja lülitatakse see varjatuks, kui see on märgitud peidetuks või vastupidi.
See on ainult paar JavaScripti rida. Pange oma pähe järgmine HTML-dokument (enne.
Mida see skript teeb rida realt:
Kutsub funktsiooni varjataja divID on täpne kordumatu ID, mida soovite näidata või peita.
Seadistab muutuja item teie div väärtusega.
Teostab lihtsa brauseri kontrolli; kui brauser ei toeta getElementById, see skript ei tööta.
Kontrollib klassi div. Kui on varjatud, muudab see selle varjatud. Vastasel korral muudab see selle varjatud.
Sulgeb kui avaldus.
Sulgeb funktsiooni.
Skripti toimimiseks peate tegema veel ühe asja. Minge tagasi oma lingi juurde ja lisage atribuuti href javascript. Kasutage kindlasti täpset unikaalset ID-d, mille nimetasite diviks selles hrefis:
Õpi HTML-i
Palju õnne! Nüüd on teil div, mis kuvatakse ja peidetakse alati, kui klõpsate lingil.
Võimalikud probleemid, millele tähelepanu pöörata
See skript pole lollikindel. Mõnes olukorras võib see teile probleeme tekitada:
JavaScripti pole sisse lülitatud. Kui teie lugejatel pole JavaScripti või see on välja lülitatud, ei tööta see skript. Peidetud divid jäävad peidetuks, hoolimata sellest, mida teie lugejad teevad. Üks viis selle parandamiseks on varjatud divide asetamine noscript-alale, kuid peate õigesti kuvamiseks seda mängima.
Liiga palju sisu. See võib olla suurepärane vahend, mis võimaldab teie lugejatel näha ainult vajalikku sisu, kuid kui panete liiga palju peidetud dividesse, võib see lehe laadimist drastiliselt mõjutada. Pidage meeles, et kuigi sisu ei kuvata, laadib veebibrauser seda siiski alla, seega mõelge mõistlikult, kui palju sisu peidate.
Kliendid ei saa aru. Lõpuks ei pruugi kliendid olla harjunud klõpsama lingil, mis sisu näitab või peidab. Mängige ikoonide (plussmärgid ja nooled sobivad hästi) või tekstiga, et selgitada, mis teie klientidega juhtub. Teine lahendus on jätta üks diividest lahti, kui teised on suletud. See võib idee teie klientidele edastada, et nad saaksid kiiremini aru saada, kuidas ülejäänud sisu avada.
Sellist dünaamilist HTML-i peaksite alati oma klientidega testima. Kui olete kindel, et nad saavad sellest aru ja saavad seda kasutada, võib see olla suurepärane viis oma veebisaitidele suure hulga sisu hankimiseks, võtmata palju nähtavat ruumi.