jQuery

Recensione del libro "Drupal 6: costruire applicazioni web 2.0"

Come dicevo in un post di qualche tempo fa intitolato “I miei libri su Drupal”, iniziano ad essere disponibili molti libri dedicati a Drupal, ma tutti in lingua inglese. Ma anche questo trend inizia a cambiare e grazie all'editore Hoepli abbiamo anche noi il nostro libro italiano dedicato a Drupal “Drupal 6: Costruire applicazioni web 2.0”

Tutti webdesigner con jquery

Quella che vi presento è un link ad una collezione di 20 plugin per jquery dove l'arte del webdesign diverrà anche un po' nostra.

JCrop: ed il client si fa le immagini come le vuole lui

Sono alle prese con il rifacimento di un sito web, con alcune immagini molto particolari (nulla che possa offendere la morale pubblica). Ovviamente piu' le immagini sono particolari più il cliente vuole che si metta in risalto un certo particolare, che ovviamente per noi è insignificante. Cercando e cercando ancora ho trovato un modulo di JQuery che fa al caso mio: JCrop.

Liste sequenziali con JQuery e CSS

Se c'e una cosa che odio è quella di dover riuscire a trovare sempre una soluzione alle richieste piu' disparate dei clienti. L'ultima era una lista sequenziale ben visibile, ma visibile solo in alcune parti del sito. Meno male che c'e' JQuery.

JQuery: come bloccare il browser mentre usiamo Ajax

Molto spesso è necessario fermare l'interazione dell'utente mentre la nostra operazione "in Ajax" viene eseguita. Un esempio su tutti è il doppio invio di un form. Il plugin BlockUI di Jquery ci permette di risolvere anche questa situazione.

Jquery Plugins: Gchart, ddcombobox, jmailer, flip

jQuery Google Charting: vi permette di utilizzare il servizio offerto da Google per creare delle immagini al volo, così da utilizzarle all'interno del vostro sito web.

JQuery Drop-Down Combo Box: questo plugin vi permette di creare una select box con autocompletamento. Per intenderci: pensate ai mesi dell'anno di 3 anni consecutivi, messi in una select box; quindi 36 elementi tra cui scegliere. Ora al posto di scegliere immaginatevi di iniziare a scrivere "Gen" e ritrovarvi a video la lista dei valori della select box che contengono la parola "Gen", cosi' da ridurre la scelta a soli 3 elementi.

jMailer: questo plugin vi permette di associare ad un elemento HREF un form di dialogo (via modal) da cui far spedire una email. Pensate alla sezione contattaci e ne capirete l'utilità. 

Flip: questo plugin vi permette di definire due div e switchare tra di essi simulando il cambio di una pagina da destra a sinistra (e viceversa) o dall'alto al basso (e viceversa).

5 Plugin per jQuery: Crossslide e Link Fader, meioMask, pull quotes e Validation [UPDATE]

Il primo plugin è CrossSlide: avete presente quell'effetto realizzato che tramite flash che creava un effetto di sfumatura quando si passa da una immagine ad un'altra? Da oggi lo stesso effetto è possible grazie a questo plugin. Inoltre lo stesso effetto permette di definire un div più piccolo delle immagini e farle scorrere dall'alto in basso o da sinistra a destra (e viceversa) prima di sfumarle. E se proprio vogliamo fare anche piu' cose possiamo anche zoomare le immagini prima di sfumarle.

Il secondo è Link Fader: fino ad ora per gestire i fadeIn ed i fadeOut delle immagini era necessario l'utilizzo dei CSS. Ora basta un semplice plugin. Certo, l'utente deve avere l'esecuzione dei JS abilitati, ma nel web2.0 chi è che non li ha ?

Il terzo plugin si chiama meioMask e vi permette di formattare l'input type text di un form al momento dell'inserimento da parte dell'utente. Per intenderci: nel momento in cui l'utente scrive  il numero 1000, il plugin lo trasforma in automatico in 1.000, all'interno dello stresso campo di testo. E ci sono regole per i numeri decimali, per le date, per gli orari e per i telofoni, per gestire quali numeri è possibile scrivere ed in che formato.

Il quarto è dedicato ancora una volta all'aspetto grafico: sempre piu' spesso gli articoli di giornare riportano una piccola parte dell'articolo (spesso poche parole) in modo piu' marcato rispetto al resto dell'articolo; font piu' grande, magari racchiuso tra due linee orizzontali o come separatore di testo. Ora è possibile farlo anche sul web tramite il plugin Pull Quotes.

Ultimo per questa serie di link è il plugin Validation: è uso comunte che quando l'utente compila un form questo venga controllato prima di effetturare l'invio al web server. Con il plugin Validation sarà possibile definire una o più regole di validazione per il singolo campo di input, permettendo di contollare in due semplici righe di codice JS ad esempio la necessarietà di inserire un valore e la lunghezza di quel valore.  Ovviamente gli stessi controlli sarebbero poi da rifare anche sul web. 

Update: oltre a Link Fader a questo url trovate una soluzione simile a questo plugin di Jquery.

fgCanvas: creare grafici con jQuery e i canvas

Come al solito jQuery si rivela come una delle migliori librerie javascript del momento riuscendo a risolvere uno dei problemi che hanno sempre richiesto l'uso di Flash: mostrare grafici on-the-fly. Questa volta vi presento il plugin fgCharting creato dalla Filament Group di Boston, che permette di creare grafici a forma di barra, linee, torte ed altro ancora. fgChart

L'unico problema di questo plugin è l'uso dei canvas, che come è noto non sono supportati da Internet Explorer. E' comunque disponibile, grazie ai geniacci di Google, una classe in javascript, chiamata ExplorerCanvas che permette di simulare canvas all'interno del browser di casa Microsoft.

E nel caso ne voleste sapere di più sui canvas potete sempre leggere il tutorial ufficiale di casa mozilla.

Flot: i grafici in jQuery

jQuery continua a stupirmi sempre di più. Partita qualche anno fa come una delle tante librerie javascript, è ora una delle piu' avanzate e utilizzate nel panorama mondiale.

Guardate cosa si riesce a fare con il suo plugin Flot:

Flot