jQuery: câteva pluginuri


E vremea să facem cunoştinţă cu alte pluginuri jQuery (vă amintiţi de cele de săptămâna trecută?). Am reţinut două tutoriale (m-aţi prins, nu sunt pluginuri, dar folosesc jQuery) ce arată cum poţi face nişte secţiuni mobile. Primul articol se numeşte Creating a Slide-In jQuery Contact Form – îl vedeţi în cele două capturi cu maro de mai jos. Ni se explică pas cu pas cum putem avea o secţiune de contact valabilă în orice pagină, fără totuşi să încurce, să ocupe spaţiu constant. De fapt formularul de contact se deschide, alunecă în jos, atunci când e nevoie de el (click pe Contact Us). Ideea e simplă, implementarea e simplă, dar tocmai de aceea deschide orizonturi largi de aplicabilitate (de exemplu pentru un sondaj, sau un fel de help…). Pe scurt e vorba de 1) un DIV, care 2) are un CSS şi care 3) e activat cu jQuery. Trei paşi, fiecare cu codul necesar. Pentru a vedea rezultatul puteţi da click aici.

img84

Cel de-al doilea tutorial se numeşte Creating a jQuery Dashboard. A apărut pe acelaşi sit, DesignHacks, chiar ieri. Ideea e cumva similară dar aici partea ascunsă ce se activează cu click arată un fel de meniu, sau mă rog, dashboard. Vorbim de idei similare, doar că acest din urmă tutorial o ia mai pe îndelete, chiar de la etapa de Photoshop, explicând şi modul de realizare a meniului cu imagini. Din nou, puteţi vedea rezultatul final dând click aici.

Un alt script pe care l-am descoperit săptămâna aceasta şi m-a impresionat. Free CSS Drop-Down Menu Framework (nu e, din nou, un script jQuery ci) e o soluţie CSS pentru meniuri pe mai multe nivele. Aţi mai văzut, nu? Ei bine, această soluţie are o flexibilitate impresionantă. Practic schimbând o clasă el devine din orizontal vertical sau invers. Deşi se vrea o soluţie pur CSS, pentru anumite navigatoare (ex: IE6) are nevoie şi de puţin ajutor JavaScript. Exemplele date (merită să le vedeţi) sunt în combinaţie cu jQuery, dar evident se poate folosi şi o altă librărie (sau chiar fără). Nu este însă genul de script pe care îl preiei într-un minut. Mă rog, depinde de pretenţii. Pentru o adaptare la un anumit design trebuie ceva muncă în partea de CSS, dar tocmai acest punct e deosebit la acest script. Veţi vedea de fapt din demonstraţii ce "forme" poate să ia. Cât priveşte partea efectivă de descriere a meniului, se face cu liste imbricate. Un exemplu concret puteţi vedea aici.

img85

Acum ajungem cu adevărat la pluginuri jQuery. Am mai vorbit despre astfel de pluginuri de la Filament Group. Mai întâi să spunem că acum câteva zile a fost actualizat pluginul pentru selecţia unei date. Pluginul permite selectarea unei date sau a unui interval, iar noua versiune foloseşte ultima versiune a librăriei UI de la jQuery şi suportă ThemeRoller de la aceeaşi librărie pentru interfaţă. O demonstraţie puteţi vedea aici.

img86

Dar pluginul ce mi s-a părut teribil de interesant a apărut ceva mai de mult timp dar mai bine îl semnalez acum decât niciodată. Ideea lui e ingenioasă: transformarea unei liste (select) într-un glisor (slider). Detalii în articolul Using Progressive Enhancement to Convert a Select Box Into an Accessible jQuery UI Slider. După cum vedeţi din capturile de mai jos, în locul unui select pentru a indica viteza putem alege valoarea trăgând acel pătrat verde pe poziţia dorită. Slider-ul poate fi folosit şi pentru un interval: de exemplu pentru o aplicaţie cu preţuri (selectează cărţile cu preţ între 50 lei şi 200 lei). Dacă sunteţi în căutare de un plus de stil puteţi încerca această abordare.

img87


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *