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

Sdílet

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;
            }
        });
    }
}
\\---

sputnfunkce je pak jednoduch
$(document).ready(function(){
    $.pageKeyNavigation();
});
\\---

Download
===

\"jquery.pagekeynavigation.js\":jquery.pagekeynavigation.js

--Edit: nefunguje mi to pod Chrome, jetse na to musm mrknout... - tak stailo zmnit keypress na keydown--

PS: jdu nkoho pemluvit, aji pekope jako User Javascript pro Operu...
===
tagy:
Publikováno: 30.03.2010 17:51
Knedle

Související články

blog comments powered by Disqus
Počet komentářů k tématu: 5

Ahoj, moc diky za tuhle funkci :) doufam ze nevadi kdyz ji pouziji na svem fotoblogu? :)

Reakce: #2 knedle
#2 knedle

#1 vaclav-prokop: vubec ne, kazdej jeden komu se shodi je ten, pro koho jsem to publikoval

Ahoj, taky děkuji za funkci. Moc se mi hodila na můj web, kde ji používám k prohlížení fotek. Náhodou neuvažoval jsi ještě přidat slideshow ?

#4 vv

Ahoj, prosimte nevis proc mi jak na tvojem blogu tak na svym webu, kterej je ve vyvoji funguje pouze posunuti sipkou na dalsi stranku ale nikdy nefunguje posunuti na tu predchozi?

#5 vv

v html kodu bylo porad previous misto prev…