Sara Vieira: 10 užitečných útržků kódu pro jQuery

Sara Vieira, webová designérka a vývojářka, v tomto přeloženém článku popíše deset užitečných útržků kódu pro knihovnu jQuery.

jQuery je v současnosti využívána na tisících webových stránek. Patří mezi jednu z nejčastějších knihoven, které se vkládají do webových stránek pro snadnější manipulaci s objektovým modelem dokumentu (DOM). Úspěch této knihovny ale není založen pouze na jednoduchosti použití, ale také na její všestrannosti – až se zdá, že s touto knihovnou můžeme udělat téměř cokoliv, co si usmyslíme. V tomto článku si stručně napíšeme deset útržků kódu, se kterým se budete pravděpodobně znovu a znovu

Článek byl přeložen s laskavým svolením serveru webdesignerdepot.com. Originální znění článku (EN) naleznete zde: 10 jQuery snippets every designer should know.

Mezi všemi těmi možnostmi, jež máme k dispozici, je několik, ke kterým se opakovaně vracíme. Dnes si povíme o deseti snippetech, se kterými se budete znovu a znovu setkávat bez ohledu na to, zda jste úplný zelenáč či protřelý odborník.

1) Odkaz „zpět nahoru“

// Back To Top
$('a.top').click(function(){
$('document.body').animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class="top" href="#">Back to top</a>

Jak můžete vidět, v jQuery pro prostou animaci posunu stránky směrem nahoru odpadá potřeba použití nějakého pluginu – stačí použít vestavěné funkce animate a scrollTop. Změnou hodnoty pro scrollTop můžeme určit, kam až přesně má stránka narolovat; já jsem zde použila hodnotu 0, jelikož chci, aby se uživateli zobrazil začátek stránky. Pokud chcete, aby stránka narolovala na pozici, dejme tomu 100 pixelů od jejího začátku, stačí do funkce zadat hodnotu 100px. Druhá hodnota (zde 800) určuje délku trvání animace (resp. samotného rolování). Hodnota je v milisekundách.

2) Kontrola, zdali jsou obrázky načteny

$('img').load(function() {
console.log('image load successful');
});

Občas je potřeba zajistit, aby nějaký skript pokračovat ve vykonávání až tehdy, až se všechny obrázky kompletně načtou do stránky. S tímto jednoduchým a pouze třířádkovým kódem pro jQuery to dokážete zkontrolovat.

3) Automatická oprava nefunkčních obrázků

$('img').error(function(){
$(this).attr('src', 'img/broken.png');
});

Občas se přihodí, že na stránkách se objeví linky na neexistující obrázky a není jednoduché je jeden po druhém nahradit – tento krátký kód vás alespoň ochrání před potížemi (neexistující obrázky nahradí univerzálním obrázkem, zde broken.png). Kód můžete použít i tehdy, pokud se na stránce žádný nefunkční obrázek nevyskytuje, nic tím nepokazíte.

4) Přepnutí třídy pro stav hover

$('.btn').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
}
);

Poměrně často chceme, aby se na webové stránce změnil vzhled nějakého prvku, když přes něj uživatel přejede kurzorem. Tento krátký útržek funguje tak, že takovému prvku přidá speciální třídu (hover), kterou pak zase odebere, když je kurzor myši mimo objekt. Jediné, co musíte udělat vy, je vytvořit odpovídající CSS.

5) Zablokování formulářových prvků

$('input[type="submit"]').attr("disabled", true);

Příležitostně potřebujeme, aby bylo odesílací tlačítko formuláře nebo textové pole zablokováno, dokud uživatel neprovede určitý úkon, například nezatrhne nějaké zatržítko potvrzující, že si přečetl a souhlasí se smluvními podmínkami. S tímto kódem dokážete k příslušnému formulářovému prvku (odesílacímu tlačítku) přidat atribut disabled. A tento kód zase dokáže atribut disable z formulářového prvku odebrat, takže se opět stane aktivním.

$('input[type="submit"]').removeAttr("disabled");

6) Změna funkce odkazů

$('a.no-link').click(function(e){
e.preventDefault();
});

Čas od času nechceme, aby se vybrané odkazy chovaly standardním způsobem, který všichni dobře známe. Nechceme, aby například otevíraly nějakou stránku nebo opětovně obnovovaly stránku, chceme, aby dělaly něco zcela jiného, třeba spouštěly nějaký jiný skript. Celou záležitost vyřeší tento kód, který zabrání provedení výchozí akce pro odkazy.

7) Přepnutí fade/slide

// Fade
$( ".btn" ).click(function() {
$( ".element" ).fadeToggle("slow");
});
// Toggle
$( ".btn" ).click(function() {
$( ".element" ).slideToggle("slow");
});

Funkce slide a fade používáme v jQuery velmi často. Pokud máte nějaký objekt, který chcete zobrazit pouze po kliknutí na určitý prvek, můžete k tomuto účelu použít funkce fadeIn a slideDown. Pokud ale chcete, ale se objekt objevil při prvním kliknutí a při druhém kliknutím zmizel, výborně vám poslouží tento útržek kódu.

8) Jednoduché rozbalování/sbalování

// Close all Panels
$('#accordion').find('.content').hide();
// Accordion
$('#accordion').find('.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast');
$('.content').not(next).slideUp('fast');
return false;
});

K tomu, aby tento kód mohl fungovat na vaší stránce, musíte udělat jediné – vytvořit příslušný HTML kód. Kód funguje jednoduše – nejprve je všechno v prvku accordion ukryto. Samotný efket rozbalení/sbalení proběhne po kliknutí na prvek s třídou accordion-header.

9) Vytvoření dvou prvků div o stejné výšce

$('.div').css('min-height', $('.main-div').height());

Občas potřebujeme, aby dva prvky div měly stejnou výšku bez ohledu na jejich obsah. Tento kód, který to zajistí, funguje jednoduše – pro příslušný prvek div nastaví CSS vlastnost min-height. Jinak řečeno, tento div může být větší než hlavní div, ale nikoliv menší. Je to výborná věc pro weby, které obsahují spoustu dlaždic (resp. rámečků), viz třeba http://halcyon-theme.tumblr.com/

10) Seznam s odrážkami se střídajícím se pozadím

$('li:odd').css('background', '#E8E8E8');

Tento krátký kód nám jednoduše umožní vytvořit seznam s odrážkami, u kterých se bude střídat barva pozadí. Každý lichý element bude mít námi specifikovanou barvu pozadí. Samotného pruhovaného vzhledu dosáhneme tak, že v CSS nastavíme barvu pozadí pro sudé elementy. Tento kód lze samozřejmě použít i jinde než v samotném seznamu s odrážkami. Například pro tabulky, prvky div atd. Zkrátka pro cokoliv, co má vypadat „pruhovaně“

Závěr

Toto jsou útržky kódu pro knihovnu jQuery, které ve svých projektech používám stále dokola. Doufám, že si tento článek nějakým způsobem označíte a budete se k němu vracet vždy, když budete některý z těchto útržků kódu potřebovat.

O autorce

Sara Vieira je webová designérka a vývojářka na volné noze a její vášní jsou HTML5/CSS3 a jQuery. Můžete ji sledovat na twitteru či si prohlédnout její webové stránky. Její další články naleznete zde.

About translation

• Original article: 10 jQuery snippets every designer should know (Webdesignerdepot).
• Translation: Miluše Pokorná.
• Language and expert collaboration: Miroslav Kučera.

Language of translation: Czech (for readers from Czech and Slovak republics). Translated with the permission of Webdesignerdepot. Other translations.