jQuery – úvod a horké klávesy (I.)

Sérii o rychlosti webu plynule nahradím sérií o javascriptovém frameworku jQuery. Nebudu rozebírat důvody, proč je dobré používat framework a už vůbec vám nebudu radit, který je nejlepší. Na to si člověk musí přijít sám ;) Sám jsem nahradil Prototype právě knihovnou jQuery.

Standardní funkce a efekty frameworků se v zásadě od sebe neliší, všude máte nějaké to vyjíždění, zasouvání, zkrácený přístup k elementům přes $(‚#id_elementu‘), pohodlnou práci s DOMem a selektory, práce s Javascriptem je pak spíše zábava než práce. Ostatně, příkladů lze na internetu najít čím dál tím víc. Budu tedy střídat základy práce s frameworkem jQuery a užitečnými tipy a návody. Jinak jQuery má super dokumentaci, dobré příklady a rozsáhlé fórum. Tyto odkazy doporučuji v první řadě.

Horké klávesy (hot keys)

Znáte je z desktopových programů, ale čím dál více se začínají dostávat i do web aplikací, ve kterých je pak radost pracovat a bavit se. Klávesové zkratky jsou bezvadným doplňkem „user experience“ a to je v dnešní době obzvlášť důležité. Používáte v Google Docs zkratky? Všechny důležité fungují stejně jako v desktopových kancelářských aplikacích. A co Facebook? Stránkujete obrázky pomocí šipek na klávesnici nebo se snažíte pokaždé trefit myší na „Další“?

A právé teď přichází na scénu jQuery plugin hotkeys, který zvládne všechny zkratky ve všech moderních prohlížečích. Miniverze pluginu má jen 4.4 Kb, takže není třeba se bát stokilových molochů. „Bindování“ zkratek je pak až neskutečně triviální.

Zapínám odchytávání zkratky Ctrl+C (kopírování):

$(document).bind('keydown', 'ctrl+c', fn);

A tady zase vypínám:

$(document).unbind('keydown', 'ctrl+c', fn);

Čekali jste něco víc? Bohužel, je to až takhle jednoduché. Další informace a živé ukázky přímo na stránkách projektu. A ještě jedna ukázka praktického využití tohoto pluginu. U nás ve fotobance Pixmac je stránkování ve výsledcích vyhledávání jednou z nejdůležitějších funkcí. Najít ten pravý obrázek do prezentace nebo na billboard prostě někdy není jednoduché. Maximální komfort tak zaručí náš „Auto result“ a stránkování pomocí šipek na klávesnici. Auto result spočítá maximální možný počet fotek na stránce (z viewportu), takže na malém monitoru dostanete třeba 8 fotek, kdežto na velkém třeba 30. Konec nepohodlného skrolování ;) Pak přichází na řadu přednačítání další stránky v době, kdy prohlížíte fotky na stránce současné. Je to tak směšně prosté a elegantní, že to nikdo z konkurentů nemá. V době kdy prstem mačkáte klávesu „vpravo“ (viz. plugin hotkeys) už jsou náhledy dávno načteny a další stránku dostanete rychleji než bys řek „jQuery“. Předchozí stránka je pak stále schovaná v DOMu a tak stisknutím klávesy „vlevo“ dostanete předchozí výsledek hledání stejně rychle.

Však si to vyzkoušejte na nějakém příjemném tématu – žena v plavkách – a samozřejmě uvítám i kritiku, neb sto očí vidí víc, než jen těch deset našich. Díky ;)