Desigur, există multe moduri în care puteți crea o listă drop-down, însă în acest articol vom enumera funcționarea unei astfel de liste. Prin urmare, lista creată va fi foarte simplă, iar simplitatea este cheia implementării cu succes.
În HTML există etichete speciale care vă permit să generați liste - acestea sunt etichete
- și
- . Aceste etichete sunt cele mai des folosite atunci când creați liste pe pagini Web, spre deosebire de etichetă
- ; acesta este motivul pentru care vom folosi etichete
- .
Mai întâi, creați o listă simplă, de exemplu cea prezentată mai jos:
Dacă lucrați în mediul Quick Page. atunci puteți crea o astfel de listă într-un mod foarte simplu! Ca rezultat, ar trebui să obțineți următorul cod HTML:
În acest moment, lista nu poate fi extinsă și extinsă, deoarece este doar cod HTML. Pentru a adăuga boxele care sunt atât de necesare pentru lista drop-down, trebuie să convertiți această listă în formularul următor:
Am declarat o funcție numită doMenu. care poate lua o valoare numerică a AIndex. În funcție de această valoare, va fi tratată una dintre cele două condiții. În aceste condiții, ne referim la valoarea proprietății stil.display. Această proprietate CSS vă permite să specificați tipul elementului de pagină. Există șapte valori disponibile pentru această proprietate, dar ne vom concentra pe două: bloc și nici unul. Dacă setați valoarea blocului. atunci acesta face blocul elementului de pagină. În acest caz, un astfel de element poate fi poziționat liber. Primul exemplu al unui element de blocare este eticheta
. Elementele din listă sunt, de asemenea, blocate, deci folosim această proprietate. Dacă setați proprietatea stil.display la niciuna. atunci acest lucru va face ca elementul paginii dat să fie invizibil. Pagina va fi afișată ca și cum acest element nu există în codul sursă al paginii Web [2, p. 515].În această etapă, ar trebui să aveți aproximativ următoarea pagină Web:
Dacă rulați această pagină, puteți utiliza deja această listă: deschideți și închideți elementele. S-ar părea că sarcina a fost rezolvată - am creat o listă descendentă. Dar dacă dezvoltați în mod independent pagini Web, atunci este posibil să aveți întrebări.
În primul rând, de ce nu am folosit proprietatea style.visibility în loc de stil.display. Doar proprietate style.visibility vă permite pentru a face paginile de elemente vizibile sau nu sunt vizibile [2, p. 536]. Dar, în cazul în care elementul este invizibil (style.visibility = „ascunse“;), aceasta nu înseamnă că există un element de pe pagină. În cazul în care codul am folosit această proprietate, apoi a închis primul capitol al elementelor dintre elementele vizibile a existat un decalaj pe care noi, în acest caz, la nimic. Dacă doriți să vedeți vizual diferențele dintre aceste două proprietăți, înlocuiți fragmentul corespunzător al codului script la următorul bloc de cod și pentru a vizualiza rezultatele în browser-ul Web-a închis primul capitol al elementelor:
Să schimbăm funcția doMenu la următoarele:
Salvați pagina modificată și lansați-o prin browserul Web. Ei bine, cum? Se deschide și se închide lista? Da! Rețineți că nu am modificat codul sursă al paginii HTML, dar am corectat funcția. Acum putem adăuga alte elemente în listă.
În funcția de mai sus, ne întoarcem la colecția (matrice) din pagina toate elementele document.all. Desigur, în loc de a transforma la colectarea pagina corespunzătoare, ar putea fi utilizată funcția document.getElementById. care este disponibil în standardul W3C DOM, dar, în opinia mea, un apel la colectarea va fi mai sigur și codul în acest caz, va (ar trebui) funcționeze chiar și în browserele vechi [1, p. 112].
Acum este momentul să creați o listă care să conțină mai mult de un element de cuibărit. Având în vedere că am creat un cod foarte universal, va fi foarte ușor să extindeți numărul de elemente și nivelul de cuibare a elementelor din listă. Înlocuiți codul pentru primul element cu fragmentul următor:
Acum vom încerca să oferim un aspect modern listării descendente. Pentru a face acest lucru, trebuie să declarăm stilul și să desenăm două imagini. Pentru fiecare element care are subelemente, trebuie să adăugați o etichetă de imagine la care doriți să setați un ID. Stabiliți valori universale acestei proprietăți, astfel încât să nu fie necesar să faceți niciun fel de condiții sau excepții în codul de script. Cel mai optim pentru acest caz este ID = "chapter_imgX". unde în locul simbolului X este necesar să se pună identificatorul numeric corespunzător. De exemplu, pentru elementul "Capitolul 1", trebuie să adăugați o etichetă:
; pentru elementul "Secțiunea 1" -și așa mai departe.Unii utilizatori dezactivează afișarea imaginilor, deci pentru etichetele de imagine este de dorit să specificați și dimensiunile folosind parametrii WIDTH și HEIGHT. Din motive de simplitate a exemplului, acest lucru nu a fost făcut, dar dacă doriți să vă protejați lista când afișarea desenelor este dezactivată, nu neglijați acești doi parametri ai etichetei
.
Acum schimbați funcția doMenu la următoarele:
Aici vom crea o variabilă suplimentară imgObj. care va fi o referință la obiectul imaginii. Aici puteți utiliza colecția document.images. dar pentru a nu te confunda, codul folosește colecția deja familiară a tuturor elementelor paginii - document.all. Mai mult, dacă nu vedeți subelementele necesare, linia imgObj.src = 'treeOpened.png' funcționează deasupra acestui link. Această linie vă permite să încărcați imaginea treeOpened.png în instanța imgObj.
Pentru a elimina marcatorii marcatorului de listă pe care browserul le introduce în mod implicit, trebuie să specificați următorul stil:
Așadar, am creat o listă drop-down mai mult sau mai puțin frumoasă, pe care o puteți modifica și îmbunătăți foarte ușor. Dacă doriți să faceți clic pe o imagine pentru a extinde sau închide lista corespunzătoare, atunci trebuie să introduceți în etichetă
următorul fragment de cod: ONCLICK = "doMenu (X);". unde, în loc de X, identificatorul listei corespunzătoare, care ar trebui închis sau afișat când faceți clic pe o anumită imagine.
Așa că am creat o listă drop-down. Având aceste exemple ca punct de plecare, puteți să o îmbunătățiți și să o îmbunătățiți în mod semnificativ, deoarece am folosit o abordare universală a listei. Pentru a extinde lista în continuare, va dura un timp minim. Desigur, cu cât doriți să creați o listă mai colorată și mai prietenoasă, cu atât mai mult timp va fi codul sursă. Dar nu uitați că dacă utilizați o abordare universală, puteți crea fără probleme o listă frumoasă a listei.
Liste de drop-down similare sunt utilizate în secțiunile de conținut din referințele produsului. și, de asemenea, în secțiunea Harta site-ului.
Pentru a crește viteza scenariilor din articol, puteți recomanda mai multe metode.
Cea de-a doua cale este să refuzați să folosiți desenele. Pentru a implementa o listă derulantă, aveți nevoie de două imagini care afișează semnele plus și minus, dar puteți afișa aceste caractere folosind simboluri simple. Deci, să le folosim în loc de desene; în acest caz - este o opțiune excelentă.
Aici ne-am stabilit un stil care va desena o grosime de cadru de un pixel în jurul valorii de conturul link-uri. Trebuie remarcat faptul că dezavantajul acestei metode este că trebuie să ajungă doar dimensiunea fontului pentru o astfel de trimitere, că are aceeași formă ca și cu „plus“ și „minus“. După cum se poate observa din codul de funcție, este clar că permite doar să înlocuiți simbolurile în anumite condiții.
Codul pentru o astfel de legătură va arăta astfel:
O piesă mai utilă de cod poate fi citată mai departe:
După cum puteți vedea, în loc să lucrăm cu imaginea, folosim aceeași abordare, dar numai pentru lucrul cu etichete . Un exemplu de lucru este harta site-ului - vizualizați codul HTML original al hărții pentru a vedea o implementare specifică a listei derulante de pe pagina Web.
Mulți cititori ai acestei întrebări a apărut pagina de modul de a face o pagină cu o listă derulantă în care pagina este încărcată la conținutul, adică, nu ar fi afișat prăbușit. Așa că am editat exemple de liste derulante la articol, și să adăugați informații suplimentare, deoarece poate fi pus în aplicare.
Pentru aceasta trebuie să schimbați scriptul într-o anumită măsură (consultați articolul_12_9.html din arhivă cu exemple în articol). Pentru a face acest lucru, trebuie să implementați noi funcții: doMenu_Hide. care va ascunde conținutul listei, adică va minimaliza conținutul acesteia și doMenu_Show. care va deschide conținutul listei, adică va afișa conținutul acesteia. Funcția doMenu a fost, de asemenea, modificată pentru a permite acesteia să implementeze toate caracteristicile noii abordări. Adăugați, de asemenea, o nouă funcție onBodyLoad. în care descriem acțiunile la încărcarea paginii - adică, care secțiuni din lista derulantă ar trebui să fie vizibile când deschideți pagina și care nu. Avem următorul cod:
Observați cât de neobișnuit este codul funcției onBodyLoad. Aici ne referim la document.all. Pentru a specifica parametrii corespunzători pe care funcția doMenu_Hide ar trebui să accepte (doMenu_Show obține și parametri asemănători).
Acum trebuie să schimbați eticheta
pe . Pagina finită, în care nu sunt afișate toate articolele din listă la încărcare, se află în arhivă, cu exemple la articol (articolul_12_9.html).Ați observat că în funcția doMenu, parametrii predefiniți, capitolul și shSpan, au fost folosiți pentru a unifica ultimul cod sursă din acest articol. Acest lucru se face astfel încât codurile tuturor listelor derulante să aibă același aspect și nu trebuie să faceți funcții unice pentru anumite liste derulante.
Ca urmare a acestui articol, doresc să vă împărtășesc codurile sursă ale listelor pe care le-am creat în acest articol.
Trimiteți-le prietenilor:
- și
- .