jQuery - předchozí/další stránka na webu pomocí šipek

Opět další kousek pro (snad) intuitivnější pohyb po webových stránkách. Minule jsem dával k dobru jQuery kód vytvářející RELativní odkazy ze stránkování – jsou součástí i této mé jQuery funkce: Page Key Navigation (navigace pomocí šipek /kláves/).

Podobnou funkčnost můžete potkat například při prohlížení fotek na Facebooku – šipkami vlevo nebo vpravo se zobrazují předcházející či následující fotky v právě prohlíženém albu.
Tato funkce je více obecnější – posun se děje vždy o celou stranu.

jQuery function pageKeyNavigation

Vzhledem k tomu, že se kód javascriptu provádí nad celým dokumentem, nezvolil jsem často používaný „plugin“, ale „funkci“.

Demo

Funkce je použita na tomto blogu. Zobrazte si úvodní stránku a zmáčkněte šipku vpravo…

Možné /a vhodné/ použití

Nejvhodnější použití bude u webů, které nebudou mít aktivní vertikální posuvník – tj. jejich obsah není větší než okno prohlížeče. A logicky stránka musí mit nějakého logického předchůdce nebo nástupce.

Mé tipy na vhodné použití:

• jakékoli stránky se stránkováním (seznamy záznamů, diskuzní kluby, příspěvek fóra s více stranami…)
• prohlížení obrázků/fotek ve fotogaleriích, albech
• publikace na webu /kapitoly knihy/
• prostě stránka má logického předchůdce či nástupce

Logika funkce

• pokud neexistují LINK s atributem REL=first/prev/nex­t/last odkazy v HEAD, prohledá html stránku a za předpokladu že existuje odkaz A s příslušným REL atributem, vytvoří příslušný LINK tag /viz. výše zmíněný minulý post
• existuje-li LINK s atributem REL=prev nebo REL=next, odchytává na stránce zmáčknutí kláves
• pokud je klávesa stisklá na formuláři, stisknutí klávesy ignoruje
• v opačném případě provede při určité zmáčklé klávese příslušnou akci:
  • šipka vlevo / left arrow = přesun na předchozí stránku webu
  • šipka vpravo / right arrow = presun na další stránku webu

Kód jQuery funkce:

soubor ke stažení: jquery.pageke­ynavigation.js

jQuery.pageKeyNavigation = function() {

    // if LINK tags not exists
    // create LINK ref='' in BODY from A href='' rel='' (if exists one)

    // first - prvni
    if (!$("link[rel=first]").length && $("a[rel=first]").length == 1) {
        var urlFirst = $('a[rel=first]').attr("href");
        $('head').append('<link rel="first" href="' + urlFirst + '" />');
    }

    // prev - predchozi
    if (!$("link[rel=prev]").length && $("a[rel=prev]").length == 1) {
        var urlPrev = $('a[rel=prev]').attr("href");
        $('head').append('<link rel="prev" href="' + urlPrev + '" />');
    }

    // next - dalsi
    if (!$("link[rel=next]").length && $("a[rel=next]").length == 1) {
        var urlNext = $('a[rel=next]').attr("href");
        $('head').append('<link rel="next" href="' + urlNext + '" />');
    }

    // last - posledni
    if (!$("link[rel=last]").length && $("a[rel=last]").length == 1) {
        var urlLast = $('a[rel=last]').attr("href");
        $('head').append('<link rel="last" href="' + urlLast + '" />');
    }

    // load url from LINK tags, if exists
    if ($("link[rel=next]").length || $("link[rel=previous]").length) {
        var nextUrl = '';
        var prevUrl = '';
        if ($("link[rel=next]").length) {
            nextUrl = $("link[rel=next]").attr('href');
        }
        if ($("link[rel=prev]").length) {
            prevUrl = $("link[rel=prev]").attr('href');
        }

        // Register keydown events on the whole document
        $(document).keydown(function(e) {
            // storno keydown on form = inputs, select, button, textarea...
            if( $(e.target).is(":input") ) return;
            switch(e.keyCode) {
                // User pressed "left" arrow
                case 37:
                    if(prevUrl != '') {
                        window.location = prevUrl;
                    }
                    break;
                // User pressed "right" arrow
                case 39:
                    if(nextUrl != '') {
                        window.location = nextUrl;
                    }
                    break;
            }
        });
    }
}

spuštění funkce je pak jednoduché:

$(document).ready(function(){
    $.pageKeyNavigation();
});

Download

jquery.pageke­ynavigation.js

Edit: nefunguje mi to pod Chrome, ještě se na to musím mrknout… – tak stačilo změnit keypress na keydown

PS: jdu někoho přemluvit, ať ji překope jako User Javascript pro Operu…