Arhiva pentru tagul “Ajax”

Resurse despre jQuery şi nu numai

Nu ştiu Dvs, dar eu unul sunt destul de dezamăgit de cele 14 zile de jQuery 1.4. Speram ceva mai concret, mai de iniţiere. În ziua a treia am putut afla despre noutăţile din 1.4. În ziua a şaptea am aflat despre noul forum (s-au supărat pe Google Gropus, pentru prea mult spam, şi au migrat pe o soluţie oferită de Zoho). Ceva concurs în jurul acestei lansări şi… cam atât. Din punctul meu de vedere, repet, mare dezamăgire. Citeam pe blogul cuiva acum câteva zile: “cu cât învăţ mai mult jQuery cu atât îmi place mai mult MooTools” 😉 . Citare aproximativă. Dar nu aş vrea să se creadă că am ceva cu această bibliotecă JavaScript. Pentru mine este încă cea favorită.

imagine


Multe resurse jQuery (şi nu numai)

Urmărind multe RSS-uri îmi strâng semne de carte (bookmarks) spre tot felul de situri sau pagini care m-ar putea interesa cândva. Iar cuvântul jQuery este pentru mine ca un magnet, având zeci de linkuri strânse doar în ultimele săptămâni sau luni. Am să caut să le pun mai jos, cu observaţia că nu am putut verifica pentru fiecare link calitatea. Dar cu siguranţă cele mai multe sunt foarte bune, dat fiind că le-am găsit via Digg.com sau situri specializate. Selecţia de articole este extrem de variată, de la tutoriale la pluginuri sau colecţii de pluginuri. Şi ca bonus, după lista jQuery mai vin şi alte articole utile webmasterilor

imagine

Iată fără alte introduceri lista:

  • Simple Guide: How To Get Started With jQuery – …


Utile pentru webmasteri

Să vedem câteva dintre articolele recente utile webmasterilor, articole ce conţin colecţii de… diverse. Şi vom începe cu AJAX. Două situri cu nume asemănător dar fără vreo legătură între ele au publicat articolele: 23 Ultimate Collection Of Useful Ajax Tutorials & Resources (SmashingApps, 16 martie) şi 70 New, Useful AJAX And JavaScript Techniques (SmashingMagazine, 8 martie). După cum vedeţi şi din titlu, dincolo de unele suprapuneri în cea mai mare parte articolele sunt diferite. Primul, fiind orientat mai mult pe tutoriale, ne învaţă (oferă link de fapt) cum cu PHP & AJAX să facem un shoutbox sau o listă to-do. Desigur, multe altele: formulare, încărcare date în tabele, schimbarea stylesheet-urilor ş.a.

img

Cel de-al doilea articol include următoarele secţiuni: 1. Calendars …


AjaxDaddy

Există numeroase situri ce colecţionează scripturi AJAX, iar AjaxDaddy.com pare a fi doar unul între multe. Din păcate răsfoind situl nu am găsit nimic cu dată (nici măcar feed-ul RSS nu are date asociate, întreg conţinutul părând ca fiind de "azi") aşa că mi-e greu să spun dacă este un sit care se actualizează frecvent… sau deloc. Nici nu deţine o arhivă uriaşă, dar majoritatea scripturilor arată foarte bine, ceea ce pare a denota un bun simţ critic în selecţie.

img731

Ca în mai toate siturile de profil, şi aici avem scripturile grupate în ceea ce seamănă mai mult a etichete.

img732

Dând click – prin AJAX, evident – are loc încărcarea scripturilor aparţinând respectivei etichete. Şi de aici încolo vine partea diferită de alte situri similare. AjaxDaddy nu oferă doar …


Script pentru paginare Ajax

Acum două zile DynamicDrive a publicat un interesant script care permite ca în conţinutul unei pagini să existe blocuri (subpagini) care să poată fi paginate (adică să se treacă la alt bloc ca şi cum s-ar da o pagină) fără reîncărcarea paginii. Evident se foloseşte (un fel de) AJAX. Cel mai bine vă faceţi o idee privind la captura de mai jos sau mergând la pagina scriptului. După cum veţi vedea din arhiva pe care trebuie să o descărcaţi pentru a folosi scriptul, acesta nu foloseşte altceva decât HTML şi JS (şi CSS pentru aspect). Aceasta înseamnă că cei cărora paginile PHP/ASP le sunt străine şi se folosesc exclusiv de HTML pot folosi cu succes acest script.

Subpaginile se definesc într-un array, după dimensiunea lui construindu-se partea de navigare. DynamicDrive evidenţiază următoarele avantaje:

  • partea cu paginaţie poate fi pusă oriunde într-o pagină web, dar şi de mai multe ori …

Trei soluţii pentru afişarea de albume foto

Sunt sute, mii de soluţii, recunosc. Cu unele deja aţi putut face cunoştinţă aici, pe CNet.ro. Astăzi mă opresc pe scurt la trei soluţii interesante. Primele două sunt via AjaxRain unde găsiţi acum aproape 50 de implementări diferite. Mergeţi la norul de taguri al sitului şi alegeţi acolo termenul gallery. Cele mai recente două soluţii sunt Photo Morpher şi jQuery plugin: Photo Slider. Am aruncat o privire peste ele şi sunt interesante. Prima a fost actualizată ultima oară anul trecut, aşa că înainte de a o folosi veţi dori poate să o verificaţi în navigatoarele moderne actuale.

Photo Morpher face un "morfism" dar nu din acela spectaculos: nu, nu realizează treceri hollywood-iene între imagini, ci este mai degrabă un morfism al dimensiunilor imaginilor. Vedeţi linkul tocmai indicat care are o demonstraţie. Efectul este mai vizibil când cele două imagini între care se face tranziţia sunt …


ajaxWindows… adică Windows ajax

Am mai scris despre sisteme de operare online iar astăzi avem toate motivele să revenim asupra temei datorită unui nou candidat: ajaxWindows. Read/Write Web anunţa ieri lansarea de către Ajax13 a acestui sistem de operare… care însă ieri nu a funcţionat. Astăzi l-am retestat şi cu părere de rău trebuie să spun că e departe de a fi funcţional: în mijlocul unei sesiuni mi-a spus că contul folosit a fost suspendat, să mă reînscriu (cum?); au apărut diverse erori XML; meniul tip Start a funcţionat la început, după care nimic…

image

Dar… să privim partea plină a paharului. ajaxWindows are o serie de facilităţi foarte ambiţioase. Nu am mai întâlnit până acum un sistem de operare online care să se apropie atât de mult de Windows. Lansaţi-l şi… veţi auzi un sunet …


jQuery: Edit in Place

Pentru cei care nu au auzit de Edit in Place (sau Edit’n’Place) este o metodă de editare a unor informaţii chiar în pagina unde apar. Pagina care pare doar de afişare are, datorită AJAX, şi "proprietăţi" de formular. La un click pe un text, acesta apare într-un control input sau textarea, gata pentru editare. Într-o vreme foloseam şi pentru WordPress un plugin cu un comportament de acest gen. Cât de greu este de implementat folosind jQuery? Depinde de pretenţii. Dacă vreţi să folosiţi aşa ceva într-un proiect primul sfat este să vedeţi dacă nu există un plugin dezvoltat exact pentru aşa ceva. Materialul de faţă nu reprezintă o soluţie completă ci mai degrabă o introducere în temă.

img575

Puteţi să vedeţi pagina demonstrativă aici, iar arhiva o puteţi descărca de aici (dacă se vor înregistra abuzuri rămâne …


jQuery: Formular de înscriere cu AJAX

După cum promiteam, încercăm să vedem o problemă mai concretă: un formular de înscriere. Privim în stânga şi în dreapta şi alegem Google 😉 . Formularul de înscriere are un buton (check availability) care verifică dacă numele de utilizator ales este liber sau nu. Vom încerca şi noi aşa ceva: verificarea disponibilităţii numelui de utilizator. Dar nu numai…

img566

Pagina demonstrativă vă aşteaptă aici (iar arhiva aici). Şi acum scurte explicaţii. Avem un formular cu cinci câmpuri (nume, prenume, email, nume de utilizator şi parolă). Fiecare câmp are un id pentru o referinţă mai uşoară cu jQuery, şi evident un nume pentru referinţa clasică JavaScript. Sub fiecare câmp (input) am pus un div care iniţial este gol şi în care va apare indicată eroarea, când există: după ce am apăsat butonul Inscriere se va face o evaluare …


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 …