jQuery: cuprins auto-generat după titluri


Nu, nu discutăm despre generarea unui cuprins în MS Word, ci dintr-o pagină web, cu mult text, care – pornim de la această premisă – are titlurile şi subtitlurile indicate ierarhic cu tagurile h1, h2, h3. Să spunem că documentul e stufos şi nu vrem să generăm manual cuprinsul. Să spunem că de fapt sunt sute de documente şi a realiza manual cuprinsul la fiecare ne-ar lua zile. De ce să ne chinuim când cu jQuery putem face totul lejer? (Poate că scenariul nu vi se aplică… începătorii în ale jQuery merită oricum să urmărească materialul pentru a deprinde câteva tehnici.)

imagine

Vom creşte treptat în complexitate. Pornim deci de la un fişier HTML în care avem documentul, cu titlurile aşa după cum am spus. Pentru a genera cuprinsul vom parcurge conţinutul căutând tagurile headline. Ne vom folosi de funcţia each, căreia îi dăm ca argument ce elemente căutăm. Ca notă, dacă dorim să limităm căutarea într-un anume div, vom folosi ceva de genul .continut>h1, unde respectivul div trebuie să aibă clasa continut. Revenind: cu each ne plimbăm din heading în heading. Cu $(this).html() vom şti ce scrie în respectivul heading. E simplu de afişat atunci cuprinsul. Mai rămâne însă problema intentării: pentru aceasta trebuie să ştim exact dacă e h1 să nu intentăm deloc; dacă e h2 să punem o intentare; dacă e h3 mai mare intentarea… Aflăm exact ce tag e cu $(this).get(0).tagName. Puteţi vedea aici primul exemplu în acţiune, iar mai jos codul JavaScript.

$(function() {
    cuprins="";
    $("h1,h2,h3").each(function(index,value){
        if($(this).get(0).tagName=="H2") 
            cuprins+="    ";
        if($(this).get(0).tagName=="H3")
            cuprins+="        ";
        cuprins+=$(this).html()+"<br>";
    });
    $("body").prepend("<p><strong>Cuprins generat singur-singurel!</strong><br>"+cuprins+"</p>");
});

Acum să creştem pretenţiile: vrem ca meniul să fie clickabil şi să ne ducă la titlurile respective. Dar – hopa! – titlurile nu au ancore. Nici o problemă: le punem noi dinamic. Cum? Pur şi simplu cu $(this).attr("id","poz"+index). Dacă punem id la un tag HTML va funcţiona ca ancoră. Puteţi vedea aici noul exemplu în acţiune, iar mai jos codul JavaScript.

$(function() {
    cuprins="";
    $("h1,h2,h3").each(function(index,value){
        $(this).attr("id","poz"+index);
        if($(this).get(0).tagName=="H2") 
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;";
        if($(this).get(0).tagName=="H3")
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        cuprins+="<a href=#poz"+index+">"+$(this).html()+"</a><br>";
    });
    $("body").prepend("<p><strong>Cuprins generat singur-singurel!</strong><br>"+cuprins+"</p>");
});

Dar ce ar fi ca de la un titlu să poţi reveni rapid la cuprins? Cel mai simplu este să adăugăm după fiecare heading o trimitere spre cuprins. Pentru aceasta ne-am folosit de inserarea cu after. Ah, încă de la primul cod ar fi trebuit să trimit şi spre prepend cu care am inserat cuprinsul (aţi dedus din nume că e un fel de append dar la început, de aceea îi spune prepend). A treia versiune de cod se găseşte aici, iar mai jos codul JavaScript.

$(function() {
    cuprins="";
    $("h1,h2,h3").each(function(index,value){
        $(this).attr("id","poz"+index)
        $(this).after("<a href=#cuprins>^</a>");
        if($(this).get(0).tagName=="H2") 
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;";
        if($(this).get(0).tagName=="H3")
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        cuprins+="<a href=#poz"+index+">"+$(this).html()+"</a><br>";
    });
    $("body").prepend("<p><strong><a name=cuprins></a>Cuprins generat singur-singurel!</strong><br>"+cuprins+"</p>");
});

În acest caz s-ar putea să nu ne placă faptul că trimiterile spre cuprins apar după titluri. Le-am putea adăuga direct lângă titluri? Desigur, doar că tot ce adăugăm se va reflecta şi în cuprins… drept urmare se modifică puţin codul pentru a lua în cuprins doar textul până la trimitere. Ca bonus am mai făcut ceva automat: am numerotat automat paragrafele. Cum? Vedeţi în acelaşi cod de mai jos. Iar exemplul poate fi văzut aici. Sper că parcurgând aceste mici secvenţe de cod v-aţi convins în plus ce puternic e jQuery şi ce manipulări extraordinare permite.

$(function() {
    cuprins="";
    $("h1,h2,h3").each(function(index,value){
        $(this).attr("id","poz"+index)
        $(this).append(" <a href=#cuprins>^</a>");
        if($(this).get(0).tagName=="H2") 
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;";
        if($(this).get(0).tagName=="H3")
            cuprins+="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        text=$(this).html();
        text=text.substr(0,text.indexOf(" <a"))
        cuprins+="<a href=#poz"+index+">"+text+"</a><br>";
    });
    $("p").each(function(index,value){
        $(this).prepend("<b>"+(index+1)+".</b> ");
    });
    $("body").prepend("<p><strong><a name=cuprins></a>Cuprins generat singur-singurel!</strong><br>"+cuprins+"</p>");
});


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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