Tutorial jQuery IV – Exemplu practic

După ce în primele două părți (de fapt prima și a treia parte) am arătat cum se folosesc selectorii și event-urile, m-am gândit că ar fi bine totuși să arăt două mici exemple despre cum se poate folosi ce am învățat până acum (și ceva în plus).

1.Link-uri deschise în altă fereastră

Dacă ții neapărat la corectitudinea codului tău și îl vrei XHTML 1.0 strict sau XHTML 1.1, vei observa că atributul target="_blank" nu mai este valid. Există două abordări:

rel=”external”

Cea mai exactă metodă ce îți permite un control sporit asupra link-urilor este adăugarea atributului rel="external" în interiorul link-ului. Astfel, din <a href="#"> ancoră </a> vei avea <a rel="external" href="#"> ancoră </a>. Apoi, codul jQuery:

$(document).ready(function(){
	$('a[rel^=external]').attr('target', '_blank');
});

Folosind un selector xPath (de care am amintit sumar în primul episod), adăugăm atributul target="_blank" după încărcarea paginii. Fiind inserate dinamic, codul rămâne valid în continuare. Selectorul s-ar traduce așa: „orice link ce are atributul rel iar valoarea acestuia începe cu external”.

Toate link-urile externe

$(document).ready(function() {
  $("a[@href^=http]").each(
    function(){
      if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
});

Această metodă este mult mai simplă și implică și puțin javascript dar TOATE link-urile externe se vor deschide într-o fereastră nouă. În cazul în care vrei ca un link să nu se deschidă în altă fereastră… Nu prea ai ce face.

Totuși, părerea mea este că tu (ca programator) nu ai niciun drept de a-ți impune preferințele peste cele ale user-ului. Acesta poate folosi ctrl+click, middle click (sau ce alte metode mai sunt în alte browsere) pentru a deschide un link într-o nouă fereastră/tab. În acest sens, îți recomand să citești acest articol.

2.Icon-uri pentru fișiere

Dacă ai fișiere pentru download pe site (pdf, mp3, doc, zip, etc) poți adăuga un icon în dreptul fiecărui link. În browsele adevărate (adică tot ce nu este Internet Explorer), acest lucru se poate face simplu, doar cu CSS. Folosind însă același selector, combinat cu puțin jQuery, îl putem face să funcționeze corespunzător și pentru nefericiții cu IE:

$('a[href $='.doc']').addClass('doc');
$('a[href $='.pdf']').addClass('pdf');
[...]
$('a[href $='.zip']').addClass('zip');

Apoi, în CSS adaugi:

.doc {background:url(../images/doc.gif) no-repeat left center; padding-left:20px;}
.pdf {background:url(../images/pdf.gif) no-repeat left center; padding-left:20px;}
[...]
.zip {background:url(../images/zip.gif) no-repeat left center; padding-left:20px;}

Simplu, eficient și elegant :)

În zilele următoare va urma un articol despre efecte și animații cu jQuery.

IMPORTANT!

M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să știu dacă explic bine și pe înțelesul tuturor, deoarece, având o oarecare experiență îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.

7 Comentarii

Staicu Ionuț Bogdan a scris

tutorialele sunt foarte bine explicate, dar daca te-ai stradui sa faci si un exemplu la sfarsitul tutorialului : Rezultatul final aici , sau ceva de genu, cum ai mai facut la tutorialale acelea cu bara de navigatie.

sunt începător si am înțeles tot din ce ai scris pana acuma :D

Nu pot decât să mă bucur :D

Pagină de exemple nu voi face decât mai încolo. Acum se poate folosi consola cu brio. De asta am făcut tutorial pentru firebug și am pus pagina respectivă. Când va fi nevoie, voi face demo-uri ;)
Ideea e să încurajez „învățăceii” să experimenteze, deoarece se înțelege mai bine în felul ăsta ;)

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter