Sumar autogenerat cu jQuery


De când am scris prima oară despre JankoAtWarSpeed am continuat să îi urmăresc situl şi învăţ multe, multe lucruri interesante. Cine ştie, ştie – jos pălăria. Recent m-a uimit cu o idee pe cât de simplă pe atât de genială: Automatically generate table of contents using jQuery. Punctul de plecare este simplu: un articol stufos are de regulă secţiuni, marcate după adâncime cu tagurile H1, H2… De ce să nu fie folosite acestea pentru a extrage automat un sumar? Cu jQuery este evident posibil, parcurgând elementele HTML dorite. Cu incredibil de puţine linii JavaScript putem să obţinem un rezultat plăcut. Eu am luat cazul cel mai simplu, cu generarea cuprinsului în „vârful” paginii. Puteţi vedea exemplul aici iar mai jos codul pe scurt (deschideţi linkul anterior în filă nouă şi vedeţi-i sursa, dacă vreţi codul integral – veţi vedea că nu există nici urmă de cuprins scris manual).

[HTML]


Cuprins generat automat – dupa Janko At Warp Speed


Despre albine şi mere

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor elementum dolor id cursus. Etiam bibendum iaculis quam, sit amet egestas sapien sagittis auctor. Cras tristique arcu vel metus tincidunt suscipit. Suspendisse posuere pulvinar neque eu vehicula. Ut lobortis luctus erat non posuere. Phasellus pharetra tincidunt dapibus. Quisque eleifend imperdiet nisi, nec sollicitudin ante eleifend nec. In hac habitasse platea dictumst. Proin accumsan commodo dolor, sit amet mollis odio ultrices id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tellus lacus, dictum eget aliquet sed, tempor eleifend diam. Maecenas venenatis nibh sit amet ipsum semper id iaculis elit hendrerit. Vivamus ante quam, vestibulum at lobortis nec, vestibulum eu lacus. Sed vitae sem quam, ut auctor sem. Proin mi risus, interdum in semper in, scelerisque non mi. Quisque ultricies interdum sem in euismod.


[/HTML]

Cum se generează cuprinsul? După cum vedeţi din cod, se foloseşte un DIV gol (toc) pentru cuprins. Mai întâi în el se scrie un text (Sumarul articolului:) iar apoi se parcurg elementele H1, H2 şi H3 din pagina web, pentru fiecare extrăgându-se textul pentru sumar, făcut clickabil pentru a duce acolo unde trebuie. Cât de simplu! Nici măcar 10 linii JavaScript.

Dar Janko merge mai departe. În articolul lui veţi vedea cum se poate face ca sumarul să plutească tot timpul în stânga, în timp ce defilăm articolul în dreapta (vezi exemplul). Şi mai mult: un cuprins în care elementele sunt distanţate pentru a da idee despre lungime secţiunilor (vezi exemplul). Practic codul JavaScript e cam acelaşi, doar cu CSS-ul se joacă suplimentar. Vă invit să vedeţi articolul şi paginile demonstrative: sunt şanse mari la un moment dat să vă folosească la un proiect.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *