Lunedì 26 Luglio 2010
jQuery UI, una vera manna per gli sviluppatori Web
Oramai, aggirarmi per la rete in cerca di programmi carini, spunti per aggiungere/modificare/migliorare la grafica del mio sito, metodi per complicarmi la vita, ecc. è diventato il mio sport preferito!
Mi ero interessato alla programmazione AJAX, in quanto ho saputo delle sue potenzialità e volevo imparare qualche trucchetto da poter usare; scrivendo su google "ajax" mi è comparso il noto sito html.it che metteva a disposizione una guida (strano) tra le varie cose anche su jQuery UI.
Ora non vi sto' a raccontare tutti i dettagli del mio incontro, ma ho subito visto in questo, un potente strumento a disposizione di tutti!

jQuery UI è un progetto nato dallo sviluppo parallelo tra jQuery e del progetto UI (attualmente inglobato nelle librerie principali) che si prefigge lo scopo di fornire delle specie di API in formato javascript (probabilmente ciò che ho appena scritto non è corretto, invito qualche buona anima a correggermi) che permettono la creazione in maniera molto semplice di pulsanti, aree sensibili al drag & drop e tante altre funzioni molto carine e promettenti (se mi vengono belle idee, modifico il mio sito con il jQuery UI così verrà fuori un bel sito dinamico e curato nei dettagli).

Intanto, prima di iniziare con una breve carrellata delle potenzialità del progetto, vi do il link relativo al sito ufficiale dove si puù reperire le stesse cose qui descritte molto brevemente http://jqueryui.com.

All'interno del sito sopracitato, ci sono 3 sezioni di nostro interesse:
-Area download;
-Area per la creazione di un tema grafico;
-Area della documentazione e degli esempi.

Nella'area download, naturalmente, troveremo il pacchetto da scaricare con tutte le opzioni per aggiungere o togliere delle funzionalità in base alle nostre richieste; nell'area per la creazione di un tema, troveremo un'interfaccia che ci permette di stabilire a nostro piacimento tutte le combinazioni di colori che più si intonano con il nostro sito, dopodichè vi rimanda alla pagina download per scaricare il pacchetto con la skin grafica scelta. L'ultima sezione (quella degli esempi e della documentazione) è la più importante, in quanto ci permette di vedere effettivamente cosa si può fare con il jQuery UI e ci fornisce i documenti per poter sviluppare la nostra interfaccia.

Qui sotto aggiungerò giusto un paio di elementi del jQuery UI esemplificativi, che mostrano un po' la potenza delle librerie:


Accordion

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.

Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

Dialog

Open Dialog

Overlay and Shadow Classes (not currently used in UI widgets)

Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci.

Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.

Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam.

Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante.

Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Slider

Datepicker

Progressbar

Highlight / Error

Hey! Sample ui-state-highlight style.


Alert: Sample ui-state-error style.





Questi sono alcuni esempi (con le dimensioni e altre piccole rifiniture da rivedere) di elementi interattivi e a mio avviso particolarmente gradevoli che si possono aggiungere ad un'interfaccia grafica in modo da renderla più User Friendly e accattivante rispetto ad una banale interfaccia come può essere quelle di questo sito.
Torna indietro


Commenti: 0

Nome:
Messaggio:
Riscrivi il codice:

Non รจ stato inviato nessun commento!

Filtra per Tag:

-Windows (9)
-HowTo (7)
-Server (6)
-Linux (4)
-Hardware (4)
-e-commerce (3)
-Programmazione (2)
-Wireless (2)
-eMule (2)
-nVidia (2)
-PDF (1)
-Arduino (1)
-Elettronica (1)
-WEB (1)
-Trashware (1)
-IRC (1)
-Puttanate (1)