Dinamički HTML (DHTML) omogućuje vam stvaranje iskustva u stilu aplikacije na vašim web mjestima, smanjujući učestalost učitavanja cijelih stranica. U aplikacijama, kada kliknete nešto, aplikacija se odmah mijenja kako bi prikazala taj određeni sadržaj ili vam pružila vaš odgovor.
Suprotno tome, web stranice se obično moraju ponovno učitati ili se učitava potpuno nova stranica. To može učiniti korisničko iskustvo nepodvojenijim. Vaši kupci moraju pričekati učitavanje prve stranice, a zatim ponovno pričekati učitavanje druge stranice itd.
Upotreba za poboljšanje iskustva gledatelja
Korištenje DHTML-a jedan je od najjednostavnijih načina za poboljšanje ovog iskustva div elementi se uključuju i isključuju za prikaz sadržaja kada se to zatraži. A div element definira logičke podjele na vašoj web stranici. Zamislite div kao okvir koji može sadržavati odlomke, naslove, poveznice, slike, pa čak i druge div-ove.
Što će vam trebati
Da biste stvorili div koji se može uključivati i isključivati, potrebno vam je sljedeće:
- Veza za upravljanje divom uključivanjem i isključivanjem kad se klikne.
- Div koji treba prikazati i sakriti.
- CSS za oblikovanje div skrivenog ili vidljivog.
- JavaScript za izvođenje radnje.
Kontrolna veza
Kontrolna veza je najlakši dio. Jednostavno stvorite vezu kao na drugu stranicu. Za sada ostavite atribut href prazan.
Naučite HTML
Postavite ovo bilo gdje na svoju web stranicu.
Div za prikaz i skrivanje
Stvorite element div koji želite prikazati i sakriti. Provjerite ima li vaš div jedinstveni ID. U primjeru je jedinstveni id naučiti HTML.
Ovo je stupac sadržaja. Počinje prazno, osim ovog teksta objašnjenja. Odaberite ono što želite naučiti u navigacijskom stupcu s lijeve strane. Tekst će se pojaviti ispod:
Naučite HTML
- Besplatna HTML klasa
- HTML vodič
- Što je XHTML?
CSS za prikaz i skrivanje div
Stvorite dvije klase za svoj CSS: jednu za sakrivanje div-a, a drugu za prikaz. Za to imate dvije mogućnosti: prikaz i vidljivost.
Zaslon uklanja div iz toka stranice, a vidljivost samo mijenja način na koji se vidi. Neki programeri preferiraju prikaz, ali ponekad vidljivost ima smisla, također. Na primjer:
.skriveni {prikaz: nema; }
.unhidden {prikaz: blok; }
Ako želite koristiti vidljivost, promijenite ove klase u:
.skrivena {vidljivost: skrivena; }
.unhidden {vidljivost: vidljivo; }
Dodajte skrivenu klasu u svoj div tako da započne skriveno na stranici:
JavaScript kako bi to uspjelo
Sve što ova skripta čini je pogledati trenutnu klasu postavljenu na vašem div i prebaciti je na neskrivenu ako je označena kao skrivena ili obrnuto.
Ovo je samo nekoliko redaka JavaScript-a. Stavite sljedeće u glavu svog HTML dokument (prije.
Što ova skripta radi, redak po redak:
Poziva funkciju otkriti, i divID točan je jedinstveni ID koji želite prikazati ili sakriti.
Postavlja varijablu item s vrijednošću vašeg div.
Obavlja jednostavnu provjeru preglednika; ako preglednik ne podržava getElementById, ova skripta neće raditi.
Provjerava razred na div. Ako jest skriven, mijenja ga u neskriveni. Inače ga mijenja u skriven.
Zatvara ako izjava.
Zatvara funkciju.
Da bi skripta uspjela, trebate napraviti još jednu stvar. Vratite se na svoju vezu i dodajte javascript u atribut href. Obavezno upotrijebite točan jedinstveni ID kojem ste dali ime div u ovom hrefu:
Naučite HTML
Čestitamo! Sada imate div koji će se prikazati i sakriti kad god kliknete na vezu.
Mogući problemi na koje treba paziti
Ova skripta nije sigurna. Postoje neke situacije u kojima bi vam to moglo stvoriti probleme:
JavaScript nije uključen. Ako vaši čitatelji nemaju JavaScript ili je isključen, ova skripta neće raditi. Skriveni div-ovi ostaju skriveni bez obzira na to što rade vaši čitatelji. Jedan od načina da se to popravi je stavljanje skrivenih div-ova u područje noscripta, ali morat ćete se poigrati s tim kako biste ih pravilno prikazali.
Previše sadržaja. Ovo može biti izvrstan alat koji će čitateljima omogućiti da vide samo sadržaj koji im je potreban, ali ako stavite previše unutar skrivenih div-ova, to može drastično utjecati na učitavanje stranice. Imajte na umu da, iako se sadržaj ne prikazuje, web-preglednik ga i dalje preuzima, zato dobro razumite koliko sadržaja skrivate.
Kupci ne razumiju. Konačno, kupci možda nisu navikli kliktati vezu koja prikazuje ili skriva sadržaj. Poigrajte se ikonama (plus znakovi i strelice dobro rade) ili tekstom kako biste objasnili što će se dogoditi s vašim kupcima. Drugo rješenje je da jedan div ostane otvoren dok su ostali zatvoreni. To ideju može prenijeti na vaše kupce, tako da mogu brže smisliti kako otvoriti preostali sadržaj.
Uvijek biste trebali testirati takav dinamički HTML sa svojim kupcima. Jednom kada se uvjerite da ga mogu razumjeti i koristiti, ovo može biti izvrstan način za donošenje velike količine sadržaja na vaše web stranice bez zauzimanja puno vidljivog prostora.