jQuery, stránkování a RELativní odkazy

Používáte relativní odkazy tagy LINK v hlavičce svých stránek? Na nalinkování CSS stylu ano – znáte ale další využítí? Co třeba pro usnadnění pohybu na stránkách se stránkováním?

Pokud máme stránkování rozumně vytvořené, můžeme si pomocí jQuery zpětně vytvořit tagy [LINK rel="" /] do hlavičky dokumentu, a ty se pak promítnou v prohlížečích s navigacní lištou či obdobným prvkem.

Navigační lišta v Opeře:

Navigační lišta ve Firefoxu (rozšíření Site Navigation Bar):

Kde to můžu potkat

Pokud jste uživateli prohlížeče Opera, možná jste si už někdy všimli, že tento browser je schopen rozeznávat, zda jste na stránce se stránkováním – a pokud ano a umožní vám posun na „další stránku“ ačkoli jste na ni ještě nebyli.

Přesun na další stránku si samozřejmě musíte od Opery vynutit příkazem – a to příkazem vpřed – ať už myším pohybem (PTM[pravé tlačítko myši] + vpravo) nebo pomocí klávesnice (pravý alt + šipka vpravo).

Vyzkoušet to můžete minimálně po libovolném vyhledání na Google s více než jednou stránkou výsledků. Vyhledávač Yahoo také Opera zvládá. V našich končinách „čte“ Jyxo, ale Seznam, Centrum či Atlas ne…

Jakým způsobem má Opera přečteny tyto weby netuším – u Google a Yahoo bych tipl „natvrdo“ někde ve svém kódu, u Jyxa to dle všeho bude díky použitému stránkování pomocí query stringu (parametru v url) „page“ – ale ruku do ohně bych za to nedal.

Určitě však nemají implementovánu následující funkčnost – takže taková menší záhada :)

Úprava stránkování

I když je několik typů stránkování – logicky se v něm vždy řeší tyto 4 stavy: první stránka, předchozí stránka, další stránka, poslední stránka.

V závislosti na aktuálně zobrazené stránce jsou ty ostatní logicky zobrazeny nebo skyty – já budu předpokládat, že jsem uprostřed stránkování (strana 5 z 10) a tudíž všechny tyto odkazy vidím:

<a href="/sekce">první</a>
<a href="/sekce/strana/4">předchozí</a>
<a href="/sekce/strana/6">další</a>
<a href="/sekce/strana/10">poslední</a>

Takto vypsané stránkování ovšem Opera (či jiný prohlížeč) nedokáže přečíst – pokud jsem se již nevrátil zpět o stránku, příkaz „vpřed“ nám nepomůže k posunu – upravíme tedy linky pomocí atributu rel :

<a href="/sekce" rel="first">první</a>
<a href="/sekce/strana/4" rel="prev">předchozí</a>
<a href="/sekce/strana/6" rel="next">další</a>
<a href="/sekce/strana/10" rel="last">poslední</a>

S touto úpravou již Opera dokáže zjistit, že následující stránka je „/sekce/strana/6“ a tedy po příkazu „vpřed“ nám zobrazí další stránku!

Na hlavičku s jQuery

S touto úpravou však stále nevyužíváme možností navigační lišty Opery – do které se promítají tagy [LINK] s atributem [rel] v hlavičce html dokumentu [HTML][HEAD]

Navigační lišta Opery zobrazuje tyto relativní odkazy: Home, Index, Contents, Search, Glossary, Help, First, Previous, Next, Last, Up, Copyright, Author – a nás teď zajímají First, Previous, Next, Last

Samozřejme můžeme vypsat tyto odkazy při generování stránky, teda za předpokladu, že nejdříve zjistíme potřebné url a teprve potom začneme vypisovat vlastní tělo HTML dokumentu. Pokud ovšem máme stránku poskládanou jinak – využijeme našeho stránkování a jQuery:

// nastaveni rel tagu hlavicky dokumentu
// prvni
if ($("a[rel=first]").length) {
        var url = $('a[rel=first]').attr("href");
        $('head').append('<link rel="first" href="' + url + '" />');
}
// predchozi
if ($("a[rel=prev]").length) {
        var url = $('a[rel=prev]').attr("href");
        $('head').append('<link rel="prev" href="' + url + '" />');
}
// dalsi
if ($("a[rel=next]").length) {
        var url = $('a[rel=next]').attr("href");
        $('head').append('<link rel="next" href="' + url + '" />');
}
// posledni
if ($("a[rel=last]").length) {
        var url = $('a[rel=last]').attr("href");
        $('head').append('<link rel="last" href="' + url + '" />');
}

Celkem 4× opakujeme shodný postup:

• nejdříve zjistíme, zda existuje odkaz s atributem rel a příslušnou hodnotou (testování existence se dělá pomocí zjištění délky objektu)
• pokud ano, zjistíme v něm použitý odkaz
• a nakonec vložíme tag [LINK] s příslušným atributem a odkazem do tagu [HEAD]

Využití vás asi neohromí, ale

není to zas až tak marné.
Představte si web po vyhledání, kde prostě musíte stránkovat a jednotlivé stránky s výsledky jsou různě dlouhé – jednou obrazovka, podruhé dvě… – pomocí myšího kolečka si pěkně procházíte výsledky, ale pro přechod musíte link na „další“ stránku vždy lovit.

Pokud máte zaplou navigační lištu, jsou odkazy na předchozí/další stránky vždy na shodném místě.

PS:

Na tomto blogu mám LINK[rel] odkazy generovány (lsblog má něco jako šablonu) – tohle řešení s jQuery jsem včera dělal do antikvariátu Legie. (ale sepsat tento článek byla snad větší dřina)