Dinamični HTML (DHTML) vam omogoča, da na svojih spletnih mestih ustvarite izkušnjo v slogu aplikacije in tako zmanjšate pogostost polnega nalaganja celotnih strani. Ko v aplikacijah kliknete nekaj, se aplikacija takoj spremeni, da prikaže to določeno vsebino ali da vam odgovori.
Nasprotno pa je treba spletne strani običajno znova naložiti ali pa naložiti povsem novo stran. Zaradi tega lahko uporabniška izkušnja postane bolj nepovezana. Vaše stranke morajo počakati, da se naloži prva stran, nato pa še enkrat, da se naloži druga stran itd.
Uporaba za izboljšanje izkušenj gledalcev
Uporaba DHTML je eden najlažjih načinov za izboljšanje te izkušnje div elementi vklopijo ali izklopijo za prikaz vsebine, ko je ta zahtevana. A element div definira logične delitve na vaši spletni strani. Div si predstavljajte kot polje, ki lahko vsebuje odstavke, naslove, povezave, slike in celo druge div-je.
Kaj boste potrebovali
Če želite ustvariti div, ki ga je mogoče vklopiti ali izklopiti, potrebujete naslednje:
- Povezava za nadzor divja z vklopom in izklopom ob kliku.
- Div za prikaz in skrivanje.
- CSS za oblikovanje skrivnega ali vidnega divja.
- JavaScript za izvedbo dejanja.
Krmilna povezava
Nadzorna povezava je najlažji del. Preprosto ustvarite povezavo kot na drugo stran. Za zdaj pustite atribut href prazno.
Naučite se HTML
To postavite kamor koli na svojo spletno stran.
Div za prikaz in skrivanje
Ustvarite element div, ki ga želite prikazati in skriti. Prepričajte se, da ima vaš div enoličen ID. V primeru je enolični id naučite se HTML.
To je stolpec z vsebino. Začne se prazno, razen tega pojasnila. V stolpcu za krmarjenje na levi izberite, česar se želite naučiti. Besedilo bo prikazano spodaj:
Naučite se HTML
- Brezplačni tečaj HTML
- Vadnica za HTML
- Kaj je XHTML?
CSS za prikaz in skrivanje razdelka
Ustvarite dva razreda za svoj CSS: enega, da skrijete div, in drugega, da ga prikažete. Za to imate dve možnosti: prikaz in vidnost.
Zaslon odstrani div iz toka strani, vidnost pa samo spremeni način prikaza. Nekateri kodirniki imajo raje zaslon, ampak včasih vidljivost je tudi smiselno. Na primer:
.skriti {zaslon: noben; }
.unhidden {prikaz: blok; }
Če želite uporabiti vidnost, spremenite te razrede v:
.skrita {vidnost: skrito; }
.unhidden {vidljivost: vidna; }
Dodajte skriti razred v svoj div, tako da se začne kot skrit na strani:
JavaScript, da bo deloval
Vse, kar počne ta skript, je, da pogleda trenutni razred, nastavljen na vašem divju, in ga preklopi na skritega, če je označen kot skrit ali obratno.
To je le nekaj vrstic JavaScript. Postavite naslednje v glavo svojega Dokument HTML (pred.
Kaj počne ta skript, vrstica za vrstico:
Pokliče funkcijo razkrij, in divID je natančen enoličen ID, ki ga želite prikazati ali skriti.
Nastavi spremenljivko item z vrednostjo vašega div.
Izvede preprosto preverjanje brskalnika; če brskalnik ne podpira getElementById, ta skript ne bo deloval.
Preveri razred na div. Če je skrito, spremeni ga v neskrito. V nasprotnem primeru ga spremeni v skrito.
Zapre če izjavo.
Zapre funkcijo.
Če želite, da scenarij deluje, morate narediti še eno stvar. Vrnite se na svojo povezavo in dodajte javascript atributu href. Uporabite natančno enoličen ID, ki ste ga poimenovali v tem href:
Naučite se HTML
Čestitamo! Zdaj imate div, ki se bo prikazal in skril vsakič, ko kliknete povezavo.
Možne težave, na katere morate biti pozorni
Ta skripta ni varna. Obstaja nekaj situacij, v katerih bi vam lahko povzročil težave:
JavaScript ni vklopljen. Če vaši bralci nimajo JavaScripta ali je ta izklopljen, ta skript ne bo deloval. Skriti divji ostajajo skriti ne glede na to, kaj počnejo bralci. Eden od načinov za odpravo tega je, da skrite divje postavite v območje noscript, vendar se boste morali poigrati s tem, da se bodo pravilno prikazali.
Preveč vsebine. To je lahko odlično orodje, s katerim lahko bralci vidijo samo vsebino, ki jo potrebujejo, vendar če v skrite div-je vstavite preveč, lahko to drastično vpliva na to, kako se stran naloži. Ne pozabite, da čeprav se vsebina ne prikazuje, jo spletni brskalnik še vedno prenaša, zato dobro razumite, koliko vsebine skrijete.
Kupci ne razumejo. Nazadnje kupci morda niso vajeni klikati povezave, ki prikazuje ali skriva vsebino. Poigrajte se z ikonami (plus znaki in puščice dobro delujejo) ali besedilom, da razložite, kaj se bo zgodilo z vašimi strankami. Druga rešitev je, da pustite enega od divjev odprtega, medtem ko so drugi zaprti. Tako lahko idejo prenesete na vaše stranke, da lahko hitreje ugotovijo, kako odpreti preostalo vsebino.
Takšen dinamični HTML morate vedno preizkusiti s svojimi strankami. Ko se prepričate, da ga lahko razumejo in uporabijo, je to lahko odličen način, da na svoje spletne strani prenesete veliko vsebine, ne da bi zavzeli veliko vidnega prostora.