Navigare cu j şi k din heading în heading


Vorbim acum de o demonstraţie concretă la biblioteca MouseTrap tocmai prezentată şi la biblioteca jQuery. Dacă scriu pe această temă e pentru că tocmai am avut nevoie de aşa ceva ;). Mai exact am lucrat la un sit care afişează pagini cu mult text şi în care mi-ar place să se poată naviga secvenţial din taste. Dacă folosiţi Google Reader ştiţi deja cum merge cu j şi k. Dacă e să luăm un alt exemplu ar fi TheBigPicture, unde se sare din imagine în imagine: de dragul unui exemplu simplu eu vă propun să sărim din heading în heading.

imagine

Cum se face aşa ceva? Să presupunem că avem un text luuung cu multe heading-uri. Să zicem H1 şi H2, dar se poate extinde uşor. Ca să putem naviga între ele ar trebui să aibă ancore. E o joacă de copil cu jQuery să punem ancore, mai exact un ID per H1 sau H2, care va merge ca ancoră. După ce am pus mai trebuie doar să definim scurtăturile cu MouseTrap, respectiv mai avem nevoie de o funcţie care să facă efectiv “derularea” la o ancoră. Tot codul îl vedeţi mai jos. Şi dacă vreţi să îl vedeţi în acţiune mergeţi aici şi nu uitaţi să apăsaţi tastele j, respectiv k. Mai vedeţi sursa dacă ceva e neclar.

$(function() {
    i=1;
    $("h1,h2").each(function(index) {
        $(this).attr("id","ancora"+i);
        i=i+1;
    });
    ancoremax=i-1;
});
pos=0;
Mousetrap.bind('j', function() { 
    if(pos<ancoremax) {
        pos=pos+1; scrollToElement(jQuery("#ancora"+pos));
    } 
});
Mousetrap.bind('k', function() { 
    if(pos>1) {
        pos=pos-1; scrollToElement(jQuery("#ancora"+pos));
    } 
});
function scrollToElement(el) {
    $(window).scrollTop(el.offset().top).scrollLeft(el.offset().left);
}


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 *