spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 9.12.2012
Hodnoť článok:
12 0

5 užitočných jQuery tipov

Alebo aj zopár drobností, ktoré Vám pomôžu s rôznymi drobnosťami. Inými slovami menšie snippetíky.

Zvýraznenie label-u aktívneho prvku formuláru

Sem-tam je dobré, ak udržíte pozornosť používateľa na formulárovom políčku, ktoré vypĺňa. Môžete to riešiť placeholderom, no ten pri zadaní písmen zmizne a tak zostáva asi len starý dobrý "label" tag. Ako ho teda zvýraznime?

$("form :input").focus(function() {
         // najdeme si label aktívneho elementu
         // (kým je name rovnaký ako id, môžete použiť aj name.
         // podľa w3c by však label mal obsahovať hodnotu ID.
         $("label[for='" + $(this).attr('id') + "']").addClass("labelfocus");
   }).blur(function() {
         // zrušíme zvýraznenie ak už nie je vo focus-e
         $("label").removeClass("labelfocus");
});

Prednahranie obrázkov

Čím viac ich je, tým väčší problém to dokáže robiť, nie? Tak ich radšej popredu načítajme.

(function($) {
  var cache = [];
  // pozor na relativne cesty k aktualnej stranke!
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
  jQuery.preLoadImages("obrazok1.gif", "/cesta/k/obrazku.png");

Automatický target _blank

Jo, niekedy naň zabúdame, nie?

$('a[@rel$='external']').click(function(){
     this.target = "_blank";
});

Používa sa:

<a href="http://www.snipi.sk" rel="external">SNiPI</a>

Umožnenie HTML5 pre staršie prehliadače

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,header,hgroup,mark,menu,meter,nav, output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

Zakázanie "ENTER" klávesy vo formulároch

$("form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});
František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
12 0

31 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 František Čaník 15.12.2012 21:03:55
@guykh k h jk jou, modernizr je goood...
0 0 guykh k h jk 15.12.2012 19:48:28
ak uz chceme riesit kompatibilitu HTML5 v starsich prehliadacoch, treba ju myslim riesit komplexne a v tomto kontexte by bol hriech nespomenut skripty ako
HTML5shiv http://code.google.com/p/html5shiv/
modernizr http://modernizr.com/

predovsetkym modernizr dokaze detekovat podporu roznych modernych (nielen HTML5) technologii, na zaklade coho zmodifikuje atribut class <body> elementu. je tak mozne robit kompatibilne opatrenia pre pripady, kedy dane vlastnosti prehliadac nepodporuje.

0 0 Jakub Senko 11.12.2012 20:33:15
@Peter Širka:
$(".labelfocus").removeClass("labelfocus")
nie je vhodný ako snippet, lebo na stránke môžeš mať použíté .labelfocus aj na iných elementoch, na ktorých to odstraňovať nechceš.

event.stopPropagation
a taktiež
event.preventDefault()
- radšej viac, ako menej.
0 0 Peter Širka 11.12.2012 11:14:54
Ja len môj postreh:

## Zvýraznenie label-u aktívneho prvku formuláru
1. Prečo si použil v selectore dvojbodku pred input?
2. Miesto $("label").removeClass("labelfocus") by som skúsil použiť $(".labelfocus").removeClass("labelfocus") (neviem či jQuery nevyužíva pri takomto zápise document.getElementByClassName());

## Automatický target _blank
- to riešenie v diskusii je veľmi dobré, to si tam mal použiť.

## Zakázanie "ENTER" klávesy vo formulároch
Mám pocit, že ENTER ti nebude fungovať vo všetkých prehliadačoch. Neviem či tam netreba použiť event.stopPropagation, mal som s týmto problémy, tiež som bol navyknutý vracať false.

HTML5 som nevedel, díkes.
0 0 Pavel Straka 11.12.2012 09:40:33
Díky za článek. Tipy k jquery se vždy hodí...máš moji podporu jen tak dále
0 0 Miloš 10.12.2012 22:50:19
František: Nešlo mi o skomentovanie, ale keď diskusia, tak k téme a nie natahovanie sa s niekým, komu to robí radosť. To, že tam boli chyby, to je preto, lebo som to písal z hlavy a narýchlo, podstatné je, že si pochopil, čo som tým chcel povedať. Osobne sa ale prikláňam k písaniu plných ciest, pretože na locahoste je to ľahšie rozbehateľné (nemám rád virtuálne domény na locahoste), ale to už podľa chuti každého vývojára.

A nenechaj sa znechutiť. Ja keď niečo hľadám ako to urobiť v PHP alebo v CSS a podobne, často narazím na rôzne články, ktoré nie sú ani poriadne popísané a niekedy sa hľadá dosť zle. Záleží od toho ako to hľadajúci vie popísať Googlu, čo vlastne hľadá. No a čím viac toho môže nájsť a hlavne vo svojom jazyku, tým lepšie. Ja na svojej stránke píšem aj krátke články, ktoré by som na zajtra nedal už len za to, že sú pre "školákov" a píšem ich často len preto, aby keď to niekedy budem potrebovať a v tej chvíli si nespomeniem ako na to, tak to budem mať po ruke. No a čo sa týka tvojich článkov, sem na zajtra nechodia len dokonalí profesionáli, ale aj takí, ktorým to pomôže.
0 0 František Čaník 10.12.2012 22:01:46
@Miloš vzhľadom na preklepy a pod. je tvoje riešenie fakt dosť že nepoužiteľné. sorry. nemyslel som, že to potrebuješ ešte aj skomentovať. v každom prípade ak chceš riešenie, ktoré by malo automaticky dávať target="_blank" na všetky externé odkazy bez používania REL atribútu, tak skús radšej:

$('a[href^="http://"]').attr('target','_blank');

a si za vodou, či?
0 0 viťo 10.12.2012 21:00:25
@František Čaník v ramci html/css? seem taam pozriem alistapart, ci obdobne, hoc aj retro ceske webdesignerske blogy, stranky a slzy utieram, ze uz nemam cas citat si nove clanky tak, ako kedysi.. ale nie.. ja uz len zabudam postupne.. :)
0 0 Miloš 10.12.2012 20:55:29
Viktor: Na Google je všetko, to by nemusel písať o ničom.

Viktor, František: Ako baby na trhu...

František: Čakal som, nájdem niečo k môjmu komentáru, ale nedočkal som sa...
0 0 František Čaník 10.12.2012 20:39:38
@viťo a čo teda robíš vrámci profesie?
0 0 viťo 10.12.2012 20:18:32
@František Čaník kto chce.. pocuva.. ja napr pisat clanky neviem, priznaval.. robit css/css3 priklady ma uz nebavi a celkovo html/css, co som robil 10 rokov som nedavno povesil.. za prdel.. :)
1 0 František Čaník 10.12.2012 20:05:44
@viťo zacinas mi pripominat shaggyho... ten mal tiez plno podobnych hlasok typu "tocme stale to iste, hlavne nech je o com". tym padom toto tu uzatvaram a tesim sa na nejaku tvoju autorsku cinnost.
0 0 viťo 10.12.2012 19:37:35
@František Čaník "nie je úlohou vymýšlať koleso, ale ponúknuť riešenia".. to su take detske vyhovorky.. aspon od vlastnych sa ucis, noo..
0 0 František Čaník 10.12.2012 19:27:13
@viťo ešte raz... skús čítať všetko čo som napísal, potom o tom dáme reč
0 0 viťo 10.12.2012 19:24:46
@František Čaník kazdopadne podla mna maju vahu clanky, ktore niekto napise na zaklade vlastnych skusenosti, nie z google..
0 0 František Čaník 10.12.2012 19:21:06
@viťo neviem kolko mas rokov, je mi to jedno, ale ja som si uz pocas vojny drillom presiel, takze taketo srandicky na mna fakt neplatia :)
0 0 viťo 10.12.2012 18:54:14
@František Čaník no tak uz neviem no.. treba ti daky drill asi zazit.. vtedy sa ludia ucia pocuvat:)
0 0 František Čaník 10.12.2012 18:41:37
@viťo a ty si neuvedomujes, ze nemam 5 rokov a robim si to, co chcem a pocuvam to, co chcem, takze inymi slovami, neopakuj a mozno sa naucim pocuvat... opakuj a budes pre mna vzdy len rypac
0 0 viťo 10.12.2012 18:34:11
@František Čaník opakujem to, lebo skratka nepocuvas......... sila..
1 0 Miloš 10.12.2012 13:41:06
František: Ten target sa dá tak isto zabudnúť ako ako to rel. To tam ten target môžeš rovno napísať. Navyše v prípade použitia strict módu by výsledný kód nebol validný. Osobne by som to navrhoval radšej takto (nechajme teraz validitu stranou):

$('a']').click(function(){
if (this.attr('href').substring(0, 18) != 'www.mojastranka.sk') {
this.target = "_blank";
}
});

Samozrejme, že môj kód nie je dokonalý (napísané je to narýchlo a v reáli by som to ešte vylepšil), ale určite chápeš čo som tým chcel povedať.

Inak je článoček kratučký, mohlo tam toho byť viac. Na druhej strane, niekomu to môže byť užitočné, takže prečo nie?
Zajtra.sk > Programovanie > JS/jQuery > 5 užitočných jQuery tipov


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama