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

23. ledna 2014

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

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

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

Mohlo by vás také zajímat

Nejnovější

10 komentářů

  1. Stanislav Janů

    Led 23, 2014 v 21:01

    Redaktoři by si měli kódy projít a upravit tak, aby byly uvozovky nezávadné.

    To je jedna věc a druhá je ta: Co dělá bod „4) Přepnutí třídy pro stav hover“ mezi ústřižky v této podobě? Tuto funkci v tomto příkladě lze použít pouze nouzově. Vždyť tu funkcionalitu má samotné CSS se selektorem „:hover“. Neznám případ, kdy je nutné využít jQuery. V tomto výčtu to nemá co dělat. Tedy pokud by jste tím nespouštěli jiné funkce. Třeba animace atp… Tvar použitý v článku je prasečina.

    Odpovědět
  2. Podbi

    Led 23, 2014 v 21:01

    Pěkné krátké shrnutí. Většinu věcí asi spousta vývojářů bude znát, ale někdy se hodí si připomenout i ty jednoduché a často užitečné základy.

    Odpovědět
  3. Miroslav Kučera

    Led 24, 2014 v 11:26

    Stanislav Janů – uvozovky a apostrofy jsem upravoval (překladatelka dodala článek ve Wordu, takže tam přibyly ještě dolní a horní uvozovky), ale jak koukám, některé špatné apostrofy jsem přehlédnul. Opraveno, díky za info :-) Koukám ale, že originální článek se s tím také moc nepáře ”, „, ‚, ‘, ’ atd. A ano – s tím hover v CSS máte úplnou pravdu. Sám jsem si při práci na překladu článku říkal „WTF?“, proč tak složitě?

    Odpovědět
  4. Johny Patera

    Led 24, 2014 v 18:16

    BTW bod 10 je úplně to stejné jako ten hover v bodě 4 – stačí CSS.

    Odpovědět
  5. Mjc

    Led 27, 2014 v 16:22

    Ten hover priklad nie je zbytocny. Moze te mat niekolko nezavyslich stylov ktore mozete rozne kombinovat pre rozne elementy. Nedochadza tak k zbytocnej duplicite a je to modularnejsie. Samozrejme to ma zmysel az ked sa tych stylov kombinuje viac.

    Odpovědět
  6. M

    Úno 9, 2014 v 22:46

    Vetsinu veci resi html+css, jsou to jen zpusoby, jak to udelat jinak – nespolehlive a sloziteji.

    Odpovědět
  7. exit

    Kvě 22, 2014 v 0:50

    První příklad kupodivu funguje v HTML5/CSS3 i zcela bez jakýchkoliv javascriptů. Testováno ve FF a IE posledních verzí.
    Takže pro odkaz „zpět nahoru“ stačí:
    //Create an anchor tag
    Back to top

    Odpovědět
  8. exit

    Kvě 22, 2014 v 0:53

    Čili, mám pocit, že specialisté na jquery si rádi vymýšlejí uplatnění pro jejich tak oblíbenou knihovnu, aniž by jejich přehled sahal někam dál. Tristní….

    Odpovědět
  9. Anonym

    Lis 15, 2014 v 6:14

    O príklade 5 mám pochybnosti, či to bude fungovať vo všetkých prehliadačoch. Normálny spoľahlivý spôsob je nastaviť elementu vlastnosť (nie atribút) disable na true alebo false.

    Odpovědět
  10. Gofree

    Úno 28, 2016 v 12:10

    V bode 1) by správne mal skutočne existovať nejaký anchor na vrchole stránky s id trebárs „top-anchor“ a samotné „scroll to top“ tlačítko by malo mať href nastavené na „#top-anchor“. Takto je to prasárna.

    V bode 6) Prečo autorka vôbec používa anchor, keď po kliknutí to nemá nikam presmerovať? Viem si predstaviť, že by to dávalo zmysel práve v kombinácii s bodom 1, ale inak je to prasárna a mal by sa na to použiť iný element.

    Odpovědět

Napsat komentář: Johny Patera Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *