Gestire gli eventi del DOM.
Altro grosso sforzo che dobbiamo fare quando lavoriamo con il DOM è dover gestire righe e righe di codice per gli eventi.
Loop noiosi per aggiungere un evento di validazione alle texbox, super trucchi per gestire piu' cose all' avvio di una pagina e cosi' via.
JQuery snellisce di molto questo processo, avendo sempre dalla sua una integrazione in Javascript snella e chiara. Proviamo a vedere come gestirne alcuni, come il piu' noto e richiesto che è l' evento load della pagina. In questo caso JQuery ci fornisce il metodo ready che si scatena dopo che il Document è pronto e carico ... molto utile.
Eventi load ...
<script type="text/javascript">
//Caricamento della pagina.
$(document).ready(function()
{
eventi();
alert("Ciao");
});
</script>
Oppure gestire il mouse over su oggetti senza dover fare 1000 if per la conpatibilità tra browser.
Eventi over e out ...
function eventi()
{
$("#rosso").mouseout(
function()
{
$("#rosso").text("Mouse Out");
}).mouseover(
function()
{
$("#rosso").text("Mouse Over");
});
}
Infine come potete notare possiamo attaccare piu' eventi insieme concatenandoli, sarà poi il Framework a gestirli tutti.
Davvero potente e utile, specialmente per quei siti dove abbiamo diverse pagine con Form e Griglie e non vogliamo personalizzare ogni singolo oggetto.
Di seguito tutti gli eventi dispobili e la loro spiegazione:
| Gestione degli eventi, eventi disponibili |
| Nome |
Funzione |
| ready(fn) |
Al caricamento della pagina completa. |
| bind(type, data, fn) |
Per creare un hadler a runtime, type è il nome dell' evento |
| hover(fnover,fnout) |
crea sia il mouseover che il mouse out in un unico evento |
| blur() |
messa a fuoco |
| change() |
ad esempio quando cambia la selezione in una SELECT |
| click() |
al click sull' oggetto |
| dblclick() |
doppio click gestito dal Framework |
| error() |
quando va in errore l' oggetto indicato |
| focus() |
quando viene messo a fuoco |
| keydown() |
alla pressione di un tasto |
| keyup() |
al suo rilascio |
Esistono comunque molti eventi che potete consultare sempre nella reference completa, JQuery Event. Infine ogni evento puo' ricevere come parametro la funzione delegato o incorporarla nelle parentesi.
Ajax e JQuery, supporto nativo.
Con tutto quello che sta scatenando nel mondo web non poteva mancare Ajax in questa piccola guida a JQuery che di suo lo supporta nativamente. In questo caso il namespace JQuery contiene diverse chiamate che sfruttano internamente le utilità di Ajax, quindi la chiamata asincrona, la lettura ed invio di Form in GET e POST e la lettura di file XML.
Emulare l' XMLHttpRequest.
Per eseguire una richiesta possiamo usare il comando jQuery.Ajax che riceve diversi parametri.
Con questo comando possiamo effettivamente simulare ogni tipo di richiesta Ajax, sempre in base ai parametri che stiamo passando.
JQuery Ajax
//Carica un file Javascript
$.ajax({
type: "GET",
url: "esempio.js",
dataType: "script"
});
//Invia il contenuto in POST ad una pagina Php
$.ajax({
type: "POST",
url: "registrazione.php",
data: "nome=Mario&cognome=Rossi",
//Evento di riuscita
success: function(msg){
alert( "Dati salvatis: " + msg );
}
});
//Leggiamo una pagina HTML senza IFrame!!
$.ajax({
url: "contenuto.html",
cache: false,
success: function(html){
$("#paragrafo").append(html);
}
});
Gli esempi sono espliciti con quattro righe abbiamo creato delle vere e proprie richieste Ajax, in POST e GET per caricare dati o inviarli, davvero stupefacente.
Le Funzioni Ajax.
Ma vediamo quali sono le funzioni che JQuery Ajax ci offre nelle API base. Abbiamo le chiamate classiche con richiesta GET o POST oppure possiamo definire ogni singolo callBack della richiesta, come l' attesa, la riuscita, l' errore e l' avvio.
| Funzioni Ajax di JQuery |
| Nome |
Funzione |
| jQuery.ajax(opzioni) |
la richiesta classica con varie opzioni |
| load(url,opzioni) |
carica un file remoto nel DOM |
| jQuery.get(url,opzioni) |
comando get classico Ajax |
| jQuery.post(url,data) |
comando post classico Ajax |
| ajaxComplete(fn) |
la funzione verrà eseguita alla conclusione della richiesta |
| ajaxError(fn) |
viene eseguita se la richiesta va in errore |
| ajaxSend(fn) |
quando viene inviata la richiesta |
| ajaxStart(fn) |
quando si avvia la richiesta ma non è ancora attiva |
| ajaxStop(fn) |
se la richiesta è terminata |
| ajaxSuccess(fn) |
solo se la richiesta si conclude con successo |
| |
|
Anche in questo caso potete trovare la documentazione completa molto ricca di codice e di esempi, a questo indirizzo. JQuery Ajax.
Altre funzioni presenti nel Framework base.
JQuery è davvero molto vasto e non possiamo elencare tutta l' SDK in questo articolo, Volgio pero' precisare cosa è possibile fare con le API.
La guida suddivide questi argomenti parlando anche di: Grafica, Effetti speciali, utilità.
Effetti speciali.
JQuery fornisce parecchi effetti speciali di base, che possiamo aggiungere ai nostri comandi. Ad esempio possiamo rendere visibile un paragrafo on maniera lenta, con un fade e cosi' via.
Possiamo creare degli effetti di slide e costruire velocemente una transizione di immagini. La documentazione sulle funzioni grafiche è tutta qui. JQuery Graphic Efx.
Utilità varie.
Anche se non è stato mostrato in questo articolo, eistono una miriade di altre modalità per selezionare e/o iterare tra gli oggetti DOM, come dei loop o i comandi previous e next, o i comandi Child e Parent. Una guida completa di queste ulteriori utilità, la trovate qui. JQuery Utilities. Si parla inoltre di come interrogare il Browser, gestire il client o lo schermo e cosi' via.
UI User Interface.
Con questa sezione, JQuery mette a disposizione una serie di controlli preconfezionati utilissimi se non vitali per il web designer. Il tutto fa parte di un grosso progetto chiamato appunto JQuery.UI che potete andare a vedere all' indirizzo del portale. JQuery UI Project.
Citiamo solamente alcune delle potenzialità di questo plugin se cosi' possiamo definirlo. La capacità di interagire con gli eventi del mouse e di crearne di propri per gestire il Drag and Drop ad esempio.
Oppure la capacità di estendere gli oggetti DOM, come le form, per creare prototipi e estendere gli attuali controlli.
Widget e controlli preconfezionati come Calendari, Popup CSS e altri utili controlli che interagiscono con Javascript.
I Plugin di terze parti.
Questa sezione vuole mostrare uno sguardo generale al mondo legato a JQuery.
Ci sono diverse società che stanno o che hanno realizzato plugin per JQuery delle piu' svariate tipologie, plugin per il DOM, plugin per le form, per l' invio o la validazione. Plugin per ottenere effetti gafici o per
validare i contenuti. Divise per categorie venfono illustrati i principali.
Vi ricordo inoltre che potete trovare una lunga lista divisa per categorie dei plugin dispobili per JQuery a questo indirizzo: JQuery Plugin.
Plugin popolari
idTabs.
Utile plugin per la creazione di Tab con Header customizzata.
Table Filter.
http://plugins.jquery.com/project/tableFilter
Potente Plugin per la gestione di filtri in tabella HTML. Se non abbiamo a disposizione controlli server con questo plugin possiamo tranquiullamente aggiungere filtri e sort nelle tabelle di dati in formato HTML.
jQChart.
Nel caso vi servisse di dover creare dei grafici, questo plugin è completamente gratuito.
Plugin per le Forms
FCKeditor.
Forse il piu' noto editor web presente.
E' una versione Javascript di FCKEditor realizzata per fornire la massima compatibilità con JQuery.
Per essere usato va inserito insieme al Framework di JQuery.
Really simple form validator.
http://plugins.jquery.com/project/simpleformvalidator
Questo Plugin è molto semplice ma allo stesso tempo molto utile. Basta aggiungere gli attributi di validazione ai campi input e creare uno stile per gestire le field da segnalare.
Al resto penserà il plugin durante la validazione del nostro form.
DatePicker.
http://plugins.jquery.com/project/datepicker
In questo caso abbiamo a disposizione un potentissimo Calendario con diverse funzioni per la selezione di date.
Plugin per le Widget
Color Picker.
Mostra la classica finestra Windows per prelevare un colore in formato RGB.
Confirmer.
Utile controllo per effettuare domande ed associarle ad una funzione. Magari per confermare l' iscrizione o per confermare la cncellazione di un record.
JQuery Gallery.
http://plugins.jquery.com/project/jqGalView
Fantastica galleria dinamica completamente scritta in Javascript con support anche per Flash.