post precedente : eventi
indice tutorial
Cerchiamo prima di proseguire di fare chiarezza sull’ambito delle variabili, e sulla visibilità delle variabili esterne alle closure degli eventi.
Assegno fuori dal contesto degli eventi una variabile
var _context = _page;
La userò solamente in questo esempio. Nei successivi post non ci sarà traccia di questo codice.
All’interno degli eventi di tutti i [...]
post precedente : jPaging - Differenze via jQuery - 2/2
indice tutorial
sorgente js di questo post
demo di questo post
Aggiungiamo gli eventi.
Nei precedenti post abbiamo aggiunto la toolbar. Ora non ci rimane che aggiungere i comportamenti ai tasti della toolbar.
Partiamo dai tasti di pagina. Poi vedremo il tasto avanti e indietro.
jQuery(”.jp-handler”)
.click(function(){
//qui il codice dell’evento
});
Per associare [...]
Tagged javascript, jpaging, jquery, plugins, tutorial post precedente : differenze via jQuery - 1/2
indice tutorial
Aggiungiamo la toolbar per la paginazione.
Per aggiungere una struttura xhtml posso usare tante tecniche.
Un sistema di template sarebbe l’ideale. Perchè renderebbe più chiaro il codice xhtml.
Se dovessi scegliere forse salverei un file xhtml e lo inietterei via ajax nella nostra pagina (AHAH).
Ma aggiungerei “troppa carne [...]
Appoggio con tutto il cuore.
Salva uno sviluppatore. Aggiorna il tuo Browser.
Say No To IE 6!
Say No To IE 6!
Our current campaign focuses on assisting users in upgrading their Internet Explorer 6 web browser. This campaign will result in former IE 6 users having a more enjoyable experience on the web while (hopefully) creating a [...]
post precedente : template pre-js
indice tutorial
Nel post precedente ho tagliato dall’xhtml qualsiasi struttura utile alla sola componente js.
jQuery
Aggiungere, manipolare in generale, elementi html di una pagina è uno dei principali motivi di successo nel mondo, della libreria creata dal genio di John Resig.
Una delle invenzioni più geniali che io abbia potuto veder nascere [...]
post precedente : Studio UI
indice tutorial
Nell’esempio precedente abbiamo visto il componente “finito”. Non funzionante. Ma visivamente come dovrebbe essere alla fine del nostro processo di sviluppo.
La paginazione, la pagina attiva, i pulsanti avanti e indietro (visibili o meno).
Per programmare in maniera intrusiva bisogna rispettare il principio del “Graceful degradation“.
Io devo AGGIUNGERE una funzionalità. Aggiungerla [...]
indice tutorial
Il componente è stato progettato e disegnato in html/css.
Lo “storyboard” è più o meno questo:
Qualcuno ha pensato che un componente per la paginazione client-side possa essere utile
Qualcuno ha dato incarico al settore grafico/impaginazione web di creare un template statico con css allegato del componente (il pattern html)
Qualcuno arriva dal programmatore javascript/jquery per la creazione [...]
… continua da
Carlo sostiene che i primi 3 post sono stati un po’ facilotti anche per lui…
Facciamo questa paginazione lato-client.
Suddividiamo il processo in una serie di passaggi.
L’estetica vi dico subito la lascio ai grafici.
Il componente più è slegato dal design e più è riusabile.
Un piccolo indice per il tutorial:
Studio del componente UI
Template pre-js
Differenze applicate via [...]
… continua da
La separazione del codice javascript dal documento html prevede che le nostre funzionalità, almeno quelle che devono interagire con il documento, aspettino un evento.
L’evento window.onload.
window.onload
Il window.onload è il primissimo passo per una vera programmazione javascript non intrusiva.
window.onload è un handler.
Handler vuol dire maniglia. Almeno quando si parla di programmazione guidata da eventi (Event [...]
… continua da
Prima di addentrarmi nel tutorial vero e proprio e nel primo esempio (paginazione latoclient) vorrei definire alcune buone pratiche che ricadono sotto la definizione di javascript non intrusivo (unobtrusive javascript).
Per approfondimenti consiglio la lettura della serie di articoli scritti da Christian Heilmann:
le 7 regole di javascript non intrusivo
tradotto in italiano da [...]