Arhiva pentru tagul “jQuery”

jQuery: AJAX şi (alte) preloadere

Continuăm să vedem cât de uşor putem să implementăm comportamentul AJAX folosind jQuery. În exemplele de ieri încărcam nişte div-uri, folosind AJAX, deodată cu încărcarea paginii. Pentru o variaţie să încercăm acum încărcarea AJAX la click. După cum intuiţi, este foarte uşor dar apar nişte modificări la afişarea gif-ului animat. Deschideţi exemplul de aici (arhiva cu toate exemplele acestui articol se găseşte aici). Dacă vă uitaţi în sursă vedeţi că încărcarea se face acum la un click pe un link.

<a href="#" onClick=’$("div#dhtml").
load("fisier.php",{nume:"Ion Popescu",varsta:30});’>
CLICK AICI</a>

Trebuie însă ca acum să ascundem explicit div-ul cu animaţia (desigur, folosind funcţia hide) şi să îl afişăm când începe procesarea AJAX, respectiv să îl ascundem la finalul procesării. Deja codificarea acestui comportament în jQuery nu ne mai este străin. Vom scrie:

$(’#incarcare’).hide();
$(’#incarcare’).ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});

Codul acesta nu este însă cel folosit în sursă! Da, pentru că am încercat …


jQuery: Şi în sfârşit AJAX

"Ajax (sau AJAX), prescurtare pentru Asynchronous JavaScript and XML, este o tehnică de programare pentru crearea de aplicaţii web interactive. Intenţia este să facă paginile web să pară mai receptive, prin schimbul unor cantităţi mici de date cu serverul în fundal, astfel încât să nu fie nevoie ca pagina să fie reîncărcată la fiecare acţiunea utilizatorului. Aceasta are ca scop creşterea interactivităţii, vitezei şi uşurinţei în utilizare a aplicaţiilor web." Am citat de pe pagina românească din Wikipedia dedicată subiectului. Evident, pagina în limba engleză conţine mult mai multe informaţii. Dincolo de acel "să pară mai receptive", introducerea mi se pare potrivită. Şi spre bucuria unora şi tristeţea altora ţin să precizez de la început că nu voi intra absolut deloc în subtilităţi de genul: este AJAX sau AHAH? cum e treaba cu sincronă şi asincronă? Într-un alt moment poate, dar acum ne grăbim …


jQuery: Selectori, atribute, traversări, manipulări…

Am făcut primii paşi de acomodare cu jQuery. Pentru un studiu mai serios vă recomand parcurgerea documentaţiei de pe situl jQuery.com. Principalele capitole (pe lângă introducere) sunt: Selectors, Attributes, Traversing, Manipulation, CSS, Events, Effects şi Ajax. Noi am văzut până acum aplicarea modificărilor CSS (funcţia css, height, width), a unor efecte (toggle, slideIn, fadeOut…), iar legat de evenimente am exemplificat doar cu click. Astăzi vom mai vedea ceva evenimente şi într-o trecere rapidă şi pe sărite vom vorbi şi despre selectori, atribute, traversări şi manipulări. Ar rămâne atunci ca într-un alt articol să vorbim despre AJAX; altele ar urma să fie dedicate unor pluginuri şi poate construirii unor mici aplicaţii. Acum să trecem de la intenţii la fapte. Avem ca …


jQuery: Ce şi de ce?

Ultimele două articole despre jQuery au intrat destul de mult în această librărie JavaScript pentru ca următoarele rânduri să aibă mai mult sens, dedus deja dintr-o practică. În iunie 2007 a apărut la Pakt Publishing cartea "Learning jQuery", avându-i ca autori pe Jonathan Chaffer şi Karl Swedberg. La începutul cărţii lor, cei doi fac o interesantă analiză despre jQuery, dar am preferat să nu încep cu ea, ci cu ceva exemple practice. Acum însă cred că următoarele idei vor fi din start mai clare. Voi traduce & sintetiza două subcapitole ale cărţii, care mi s-au părut importante.

img556

Ce face jQuery?

– Accesează părţi din pagină. După cum vom vedea într-unul din materialele următoare, jQuery oferă mecanisme foarte elegante de traversare a elementelor unei pagini. De fapt am văzut deja cum cu un script de câteva linii am accesat toate linkurile dintr-o pagină …


jQuery: Devine mai interesant!

Ieri am avut ocazia unui prim contact cu jQuery. Am putut să vedem că nu este greu să ne folosim de această librărie. Dacă sunteţi nerăbdător ca mine veţi dori probabil să vedeţi ceva mai spectaculos (cel puţin mai interesant). Tocmai de aceea am pregătit o nouă pagină (şi desigur şi o arhivă pentru a o putea descărca şi studia în tihnă). Uitaţi-vă în sursa paginii pentru a vedea cât de simplu se rezolvă totul. Evident am inclus librăria şi în plus în secţiunea head am definit două clase CSS. Dacă data trecută ne-am folosit de $(document).ready(…), acum ne interesează nişte efecte generate la clickul vizitatorului unei pagini. Am pus de fiecare dată <a href="#" … pentru ca clickul să nu ducă nicăieri, dar am completat cu onClick="…" pentru a indica acţiunea cu jQuery.

Acţiunile se fac pe un div pe care …


jQuery: Introducere

Există mai multe librării (sau framework-uri) JavaScript, iar jQuery (nu) este (doar) una dintre ele. Ele vin în ajutorul webdeveloperilor scutind timpi valoroşi: prin recursul la o astfel de librărie un anumit efect sau comportament într-o pagină web, în loc să necesite zeci, sute de linii de cod, se reduce la 1-2 rânduri. Desigur, acele zeci, sute de linii de cod nu dispar, se transferă doar în librăria JavaScript, dar nu avem noi dureri de cap cu scrierea ei şi în plus avem garanţia calităţii ei.

Cu jQuery, sau cu alte librării similare, anumite lucruri devin o joacă de copil. Dacă obiectivele sunt însă mai pretenţioase, jQuery nu scuteşte, ba dimpotrivă presupune ca webdeveloperul să ştie JScript, PHP/ASP, CSS, să aibă ceva noţiuni de programare obiectuală… Dacă sunteţi un începător, jQuery v-ar putea fi de folos pentru unele lucruri, inutil pentru lucruri mai avansate. Dacă sunteţi un profesionist, atunci jQuery nu …