Atunci când creați marcare pentru piesele scrise mai lungi pe o singură pagină, este adesea important să creați structuri de navigație pentru a sari între diferite porțiuni ale acelui text. Acest lucru este susținut nativ în HTML, permițându-ne să trecem la secțiunile din cadrul unei pagini și chiar să le vizităm direct din legături externe.
A List Apart-aici vedeți link-ul secțiunii și "identificatorul fragmentului" (tag-ul hash ...) în urlDocumentația de ajutor pe GitHub este un alt loc unde veți găsi link-uri din secțiunea dinamică
În acest tutorial, vom discuta o tehnică pentru generarea dinamică a acelor legături cu JavaScript și apoi animarea acestora utilizând CSS. Hai să ne aruncăm!
Marcaj
Primul pas necesar este crearea unui marcaj adecvat pentru piesa scrisă. Vom presupune că aveți un articol, și în interiorul acelui articol există multe secțiunes, fiecare cu propriile sale h1 eticheta și conținutul ulterior.
Iată cum ar putea arăta HTML-ul dvs.:
Iată o parte
Mobilizarea campaniei de strângere de fonduri, criteriile de fundație salvează viața drepturilor omului dona împuternicirea. Generozitatea schimbărilor climatice, liderii vulnerabili la nivel mondial lideri de schimbare de durată. Rezultatele, dezvoltarea onestă a națiunilor întrerupe designul centrat pe om; implementarea progresului UNHCR procesează multe voci.
Bătrânii; complexitatea sărbători; asistență juridică diversificare salubritate antreprenoriat social contribuția de asistență open source asistență socială comunitară.
Iată un altul
Extinderea proprietății comunității; Kickstarter consumul de servicii publice de colaborare, ocuparea forței de muncă Rockefeller parteneriate public-privat abordare transformative. Partener Aga Khan economii neoficiale nevoi orașe colaborative instituții publice oportunități nutriție.
Și încă unul
Expresia liberă a sectorului public este semnificativă; Andrew Carnegie Bloomberg, situația emergentă a crizei globalizării implicării. Genul, adevărul privind egalitatea de gen pe termen lung îmbunătățirea calității tinerilor implicarea civică egalitate scalabilă sfârșitul foamei durabil Medecins du Monde schimbarea vieții.
Analiza socială, afiliată; piatră de temelie salvarea vieții granturile Jane Addams liber-vorbire, schimbare mișcări ridicarea oamenilor până provocări sociale pozitive schimbare socială disruptor viitor.
Notă: după cum puteți vedea, aplicăm un id la secțiunile separate. Am ales să facem acest lucru pentru că id este de fapt legată de secțiunea în sine, nu de h1 etichetă.
Pentru a sări la un element cu un anumit id pe o pagină, creați o etichetă de ancorare cu o href valoare egală cu marcajul hash urmat de id. De exemplu, în exemplul nostru de conținut de sus, pentru a trece la a doua secțiune, am putea crea următorul link:
A doua secțiune
Există o mulțime de moduri de a face acest lucru: ați putea codifica legăturile manual, puteți utiliza o abstracție care construiește secțiunea HTML, inclusiv linkul. În acest tutorial, cu toate acestea, vom folosi JavaScript pentru a genera dinamic link-urile.
Vanilla JS
Iată JavaScript-ul:
secțiuni var = document.querySelectorAll ("secțiune"); pentru (var i = 0; i < sections.length; i++) var section = sections[i]; var id = section.id; var h1 = section.querySelectorAll('h1')[0]; var text = h1.innerHTML; h1.innerHTML = ""+ text +""+" "+ id +" ";
Versiunea jQuery
Iată o versiune jQuery, realizând în mod esențial același lucru:
$ (this) .attr ('id'); var h1 = $ (this) .find ('h1') primul () ; var t = h1.text (); h1.html (""+ t +""); h1.append (" # "+ id +" "););
Ambele dau același rezultat. Căutăm toți descendenții unei secțiuni dintr-un anumit articol, iar pentru fiecare dintre aceștia găsim id din acea secțiune. Apoi, construim o legătură care indică acest lucru id și adăugați-l la antet element. De asemenea, învelim textul existent într-un interval pentru un stil mai flexibil.
Vorbind de stil ...
Apoi, să aplicăm câteva CSS de bază pentru a oferi un efect de ascundere și dezvăluire:
Aceste reguli stabilesc mai întâi câteva stiluri de bază; font, culoare, articol lăţime si asa mai departe. Apoi afirmăm că A (pe care le-am adăugat mai devreme prin JavaScript) va avea aplicații de tranziție și va avea o opacitate de 0 în mod implicit. Doar atunci când vom trece peste ea, opacitatea va crește la 1, ne va da efectul de estompare.
Si asta e! Acum avem o implementare relativ simplă a acestei tehnici în acțiune:
Concluzie
Tocmai am construit un accesoriu foarte util pentru paginile web bogate în conținut! De asemenea, arhiva este grațioasă: dacă JavaScript este dezactivat, link-urile pur și simplu nu apar - și dacă o etichetă hash este prezentă la sfârșitul urlului, este ignorată.
Efectul nostru de estompare este o modalitate simplă de a prezenta linkul, așa cum ați putea să îl îmbunătățiți? Ce tipuri de animații ați putea aplica? Ați poziționa legătura în același mod? Așteptăm cu nerăbdare să vă auzim ideile (și urmăriți-vă proiectul comunitar pe care îl vom lansa în curând pe acest subiect!)
Accentsconagua
Share
A List Apart-aici vedeți link-ul secțiunii și "identificatorul fragmentului" (tag-ul hash ...) în url
Documentația de ajutor pe GitHub este un alt loc unde veți găsi link-uri din secțiunea dinamică