8 často používaných príkladov z jQuery

jquery_blog-01

Javascriptový framework jQuery je používaný na tisícoch a tisícoch webových stránkach. Je to jedna z najčastejších knižníc, ktorá sa vkladá do web stránok – pre svoju jednoduchosť je preto veľmi populárna.

Zdá sa, že s touto knižnicou môžeme urobiť takmer všetko, čo sa nám páči. Pri všetkých možnostiach, ktoré nám tento framework poskytuje, sa objavujú prvky, ku ktorým sa máme tendenciu vrátiť stále znovu a znovu. Dnes by som rád predstavil 10 príkladov, ktoré sú na webových stránkach často používané a veľmi populárne.

1) Tlačítko: Späť na začiatok stránky

// 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>

Pomocou funkcie animate a scrollTop v jQuery nepotrebujeme plugin na to, aby sme vytvorili jednoduché posunutie stránky smerom hore jedným kliknutím myši.

Zmenou hodnoty scrollTop môžeme zmeniť pozíciu, kde ma posunutie stránky zastaviť – v mojom prípade som použil hodnotu 0, pretože chcem, aby sa stránka posunula na úplný začiatok (vrchol) stránky. Pokiaľ by som zmenil hodnotu napr. na ‘100px’ – posun stránky by zastal 100px od horného okraja.

Hodnota 800 je čas posunu stránky v ms.

2) Pruhovaný zoznam

$('li:odd').css('background', '#DDDDDD');
$('li:even').css('background', '#EEEEEE');

Tento príklad ukazuje, ako ľahko môžete vytvoriť pruhovaný zoznam, kde každá párna / nepárna položka v zozname bude mať iné (preddefinované) pozadie.

3) Toggle fade/slide

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

Metóda Toggle fade / slide je niečo, čo budeme veľmi často používať v našich animáciach pomocou jQuery: napr. keď chceme zobraziť určitý prvok (div), po kliknutí na nejaké tlačítko.

4) Kontrola, či sú obrázky načítané

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

Niekedy je potrebné skontrolovať, či sú vaše snímky plne načítané, aby ste mohli pokračovať vo svojich skriptoch. Nie je nič ľahšie – funkcia load() nám zistí, či sú vaše obrázky načítané.

Môžete tiež skontrolovať, či sa načítal konkrétny obrázok tým, že nahradíte hodnotu (tag) img za názov ID alebo triedy.

5) Automaticky opraviť nefunkčné obrázky

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

Občas sa nám stane, že máme na stránkach nefunkčné odkazy na obrázky a nahradiť ich jeden po druhom je veľmi pracné. Pridaním tohto kódu sa chybné odkazy nahradia definovaným obrázkom.

Aj v prípade, že nemáte žiadne nefunkčné odkazy – pridaním tohto scriptu žiadnu škodu neurobíte.

6) Prepnúť triedu „on hover“

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

Obvykle chceme zmeniť design klikacieho prvku na stránke, keď sa používateľ pohybuje myšou nad ním. Tento jQuery úryvok robí len to, že to pridáva triedu na vašom prvku, keď používateľ sa vznáša nad daným elementom, a keď používateľ prestane – tak triedu odstráni. Treba ešte pridať potrebné štýly v CSS súbore.

Note: Samozrejme, že väčšinou existuje ľahšia cesta a to priamo v CSS –  .btn:hover { … }

7) Deaktivácia vstupných polí

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

V niektorých prípadoch možno budete chcieť zakázať tlačidlo pre odoslanie formulára, pokiaľ napr. užívateľ nevykoná určitú akciu (napr. check button „Čítal som podmienky“) a tento riadok kódu urobí to, že pridá atribút disabled do vášho input tagu.

Aby ste opäť povolili submit tlačítko – stačí parameter disabled odobrať:

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

8) Urobte si dva div-y v rovnakej výške

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

Niekedy môžete chcieť, aby mali dva divy rovnakú výšku bez ohľadu na to, aký obsah sa v nich zobrazuje. Tento malý príklad práve toto umožňuje –  nastaví sa minimálna výška, čo znamená, že môže byť väčšia, ako je hlavný div, ale nikdy nie menšia.