Dinamisks HTML (DHTML) ļauj jums izveidot lietojumprogrammas stila pieredzi savās vietnēs, samazinot visu lapu pilnīgas ielādes biežumu. Lietojumprogrammās, noklikšķinot uz kaut kā, lietojumprogramma nekavējoties mainās, lai parādītu konkrēto saturu vai sniegtu jums atbildi.
Turpretī tīmekļa lapas parasti ir jāpārlādē vai jāielādē pilnīgi jauna lapa. Tas var padarīt lietotāju pieredzi nesaistītāku. Jūsu klientiem ir jāgaida pirmās lapas ielāde un pēc tam vēlreiz jāgaida otrās lapas ielāde utt.
Izmantošana, lai uzlabotu skatītāju pieredzi
Izmantojot DHTML, ir jābūt vienam no vienkāršākajiem veidiem, kā uzlabot šo pieredzi div elementi ieslēdzas un izslēdzas, lai parādītu saturu, kad tas tiek pieprasīts. A div elements definē jūsu tīmekļa loģiskos sadalījumus. Iedomājieties div kā lodziņu, kurā var būt rindkopas, virsraksti, saites, attēli un pat citi div.
Kas jums būs nepieciešams
Lai izveidotu div, kuru var ieslēgt un izslēgt, jums ir nepieciešams:
- Saite, lai kontrolētu div, ieslēdzot un izslēdzot to, kad noklikšķina.
- Div parādīt un paslēpt.
- CSS stilizēt div slēpto vai redzamo.
- JavaScript, lai veiktu darbību.
Kontrolējošā saite
Kontrolējošā saite ir vienkāršākā daļa. Vienkārši izveidojiet saiti tāpat kā uz citu lapu. Pagaidām atstājiet href atribūts tukšs.
Uzziniet HTML
Novietojiet to jebkurā vietā savā tīmekļa vietnē.
Div, ko parādīt un paslēpt
Izveidojiet div elementu, kuru vēlaties parādīt un paslēpt. Pārliecinieties, ka jūsu div ir unikāls ID. Piemērā unikālais ID ir iemācīties HTML.
Šī ir satura sleja. Tas sākas tukši, izņemot šo paskaidrojuma tekstu. Kreisajā navigācijas kolonnā izvēlieties, ko vēlaties iemācīties. Teksts parādīsies zemāk:
Uzziniet HTML
- Bezmaksas HTML klase
- HTML apmācība
- Kas ir XHTML?
CSS, lai parādītu un paslēptu div
Izveidojiet savai CSS divas klases: vienu, lai paslēptu div, un otru, lai to parādītu. Jums ir divas iespējas: displejs un redzamība.
Displejs noņem lapas plūsmu div, un redzamība tikai maina tā redzamību. Daži kodētāji dod priekšroku displejs, bet dažreiz redzamība ir jēga arī. Piemēram:
.hidden {display: none; }
.nhidden {display: block; }
Ja vēlaties izmantot redzamību, nomainiet šīs klases uz:
.slēpts {redzamība: slēpts; }
.slēpts {redzamība: redzams; }
Pievienojiet slēpto klasi savam div, lai tā sāktos kā paslēpta lapā:
JavaScript, lai tas darbotos
Viss, ko šis skripts dara, ir aplūkot pašreizējo divā iestatīto klasi un pārslēgt to kā slēptu, ja tas ir atzīmēts kā slēpts vai otrādi.
Šīs ir tikai dažas JavaScript rindiņas. Ievietojiet šādu galvu jūsu galvā HTML dokuments (pirms.
Ko šis skripts dara, pa rindai:
Izsauc funkciju paslēpt, un divID ir precīzi unikāls ID, kuru vēlaties parādīt vai paslēpt.
Iestata mainīgo item ar jūsu div vērtību.
Veic vienkāršu pārlūkprogrammas pārbaudi; ja pārlūks neatbalsta getElementById, šis skripts nedarbosies.
Pārbauda klasi div. Ja tā ir paslēpts, tas to maina uz neslēpts. Pretējā gadījumā tas to maina uz paslēpts.
Aizver ja paziņojums, apgalvojums.
Aizver funkciju.
Lai skripts darbotos, jums jādara vēl viena lieta. Atgriezieties pie savas saites un pievienojiet javascript atribūtam href. Noteikti izmantojiet precīzu unikālo ID, kuru šajā hrefā nosaucāt par savu div:
Uzziniet HTML
Apsveicam! Tagad jums ir div, kas tiks parādīts un paslēpts, kad noklikšķināt uz saites.
Iespējamās problēmas, no kurām jāuzmanās
Šis scenārijs nav drošs. Ir dažas situācijas, kurās tas var radīt jums problēmas:
JavaScript nav ieslēgts. Ja jūsu lasītājiem nav JavaScript vai tas ir izslēgts, šis skripts nedarbosies. Slēptie divi paliek paslēpti neatkarīgi no tā, ko dara jūsu lasītāji. Viens no veidiem, kā to novērst, ir slēpto divu ievietošana noscript zonā, taču jums tas būs jāspēlē, lai tie tiktu pareizi parādīti.
Pārāk daudz satura. Tas var būt lielisks rīks, kas ļauj lasītājiem redzēt tikai nepieciešamo saturu, taču, ja jūs pārāk daudz ievietojat slēptajos divos, tas var krasi ietekmēt lapas ielādi. Atcerieties, ka, lai arī saturs netiek rādīts, tīmekļa pārlūkprogramma to joprojām lejupielādē, tāpēc izmantojiet saprātu par to, cik daudz satura slēpjat.
Klienti to nesaprot. Visbeidzot, klienti var nebūt pieraduši noklikšķināt uz saites, kas parāda vai slēpj saturu. Spēlējiet apkārt ar ikonām (plus zīmes un bultiņas darbojas labi) vai tekstu, lai izskaidrotu, kas notiks ar jūsu klientiem. Cits risinājums ir atstāt vienu no diviem atvērtus, kamēr pārējie ir aizvērti. Tas var nodot ideju jūsu klientiem, lai viņi varētu ātrāk izdomāt, kā atvērt atlikušo saturu.
Šāds dinamiskais HTML vienmēr jāpārbauda kopā ar klientiem. Kad esat pārliecināts, ka viņi to var saprast un izmantot, tas var būt lielisks veids, kā iegūt lielu daudzumu satura savās tīmekļa lapās, neaizņemot daudz redzamās vietas.