jQuery, stránkování a RELativní odkazy … 3tecky.cz

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

Sdílet

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 4x opakujeme shodnpostup:
* nejdve zjistme, zda existuje odkaz s atributem rel a pslunou hodnotou (testovnexistence se dlpomoczjitndlky objektu)
* pokud ano, zjistme v nm pouitodkaz
* a nakonec vlome tag [LINK] s pslunm atributem a odkazem do tagu [HEAD]

Vyuitvs asi neohromale
***

nento zas atak marn.
 Pedstavte si web po vyhlednkde prostmuste strnkovat a jednotlivstrnky s vsledky jsou rzndlouhjednou obrazovka, podruhdv... - pomocmyho koleka si pknprochzte vsledky, ale pro pechod muste link na \"další\" strnku vdy lovit.

Pokud mte zaplou naviganlitu, jsou odkazy na pedchozdalstrnky vdy na shodnm mst.

PS:
===

Na tomto blogu mm LINK[rel] odkazy generovny (\"lsblog\":http://blog.3tecky.cz/tag/lsblog má něco jako šablonu) - tohle řešení s jQuery jsem včera dělal do \"antikvariátu Legie\":http://www.legie.info/antikvariat. (ale sepsat tento článek byla snad větší dřina)
tagy:
Publikováno: 28.05.2009 02:04
Knedle

Související články

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

Spíš by mne zajímala statistika, kolik lidí má při prohlížení webu zapnutou \„navigační lištu\“ s začátek/vpřed/zp­ět/konec.. protože osobně neznám nikoho :)

Reakce: #2 freeze
#2 Knedle

#1 freeze: udelej si carku za mne – nicmene bude jich hodne malo, pravda

ale kvuli tomu to nedelam – pokud urcim „dalsi“ stranku, je to ulehceni pro pripadne automaty, ktere webovou stranku zpracovavaji – napr ctecky slepcu – jednoznacne jim definujes, ktera stranka nasleduje a oni nemusi po ni patrat – at uz hadat sami nebo cist vsechny odkazy svemu „panu“

osobne hodne v opere pouzivam posun „vpred“ i kdyz jsem „vpred“ jeste nebyl – specialne na strankach blogu ci jakychkoliv seznamech (a web bude vzdy o starsim obsahu na dalsich strankach) – tak proc to neusnadnit?

potazmo navigacni odkazy nejsou vymysleny jen tak pro nic za nic :) – mimo mnou zminene – home, index, obsah, rejstrik, nadrazene, autor, autorska prava, napoveda… pro vsechny je vhodne vyuziti