Negli ultimi tempi sono diverse le tecniche che consentono di personalizzare elementi di form grazie a Javascript. La prima in ordine di tempo è Select something new: permette di trasformare una select in un menu dropdown. La tecnica ha avuto un seguito con la parte 2, in cui vengono presentate migliorie al codice, all'accessibilità  e all'usabilità  (qui la demo).àˆ stata poi la volta degli Styled Checkboxes e dei Custom Checkbox, che consentono di rimpiazzare i classici checkbox con delle immagini, e ARC, che oltre ai checkbox permette di personalizzare anche i radio button.Ultimo in ordine di tempo, e senza dubbio il più potente, è lo script Niceforms che permette di rimpiazzare select, checkbox, radiobutton e aggiungere effetti hover su input, textarea e bottoni. (more...)

Continua a leggere Rimpiazzare elementi di form con Javascript

Categoria: Scripting

Il titolo del link con cui l'ho scovato su del.icio.us era di quelli ambigui: The coolest DHTML/JavaScript Calendar. Boooom! Sarà vero? Ci vado o non ci vado? Sono andato e devo dire che questo calendario è davvero il più bello e funzionale che abbia finora visto in questa categoria di widget per pagine web. Offre tutte le possibilità di personalizzazione desiderabili, sia nella gestione delle date sia nell'aspetto grafico. Ha un ottimo supporto cross-browser. Last but not least, è un progetto open source. La pagina della demo è il punto di partenza ideale per scoprirne tutti i possibili usi e gli scenari di implementazione (provate anche a cambiare la skin dal menu in alto a destra...).Il sito di DynArch è comunque pieno di altre sorprpese, a partire dal menu a tendina principale, e offre altri prodotti (per lo più commerciali). La cosa fastidiosa è che per aprire certi link richiede di disattivare il blocco delle popup.

Continua a leggere DynArch JsCalendar

Categoria: Scripting

Il nostro Alessandro Fulciniti esamina in un post su Webgraphics uno dei problemi più sentiti da chi sviluppa in Javascript: i limiti nell'utilizzo dell'evento window.onload.Si tratta, in sintesi, di due limiti principali:È possibile richiamare con questo evento una sola funzioneÈ necessario attendere il caricamento di tutta la pagina prima di eseguire gli script collegatiIl post contiene quindi un ottimo prospetto delle soluzioni attualmente adottate per superare il problema, con un'analisi dei pro e contro di ciascuna. Da bookmarkare.

Continua a leggere Superare i limiti di onload

Categoria: Scripting

Qualche mese fa ho tradotto per PRO una serie di articoli di Peter-Paul Koch usciti originariamente su Digital Web Magazine. Uno di essi è dedicato ad un tema caro a PPK e ad altri sostenitori del cosiddetto Unobtrusive Javascript: la separazione del codice Javascript dalla struttura, ovvero dal codice HTML della pagina. La tesi di fondo è questa: a che serve creare documenti standard compliant, validi, con codice pulito e ben strutturato se poi lo si riempie di istruzioni Javascript che potrebbero invece essere tenute separate? Sia benvenuta allora Behaviour, una libreria creata da Ben Nolan che offre una soluzione semplice e indolore per ottenere la tanto agognata separazione. Tutto è ottenuto grazie all'uso dei selettori CSS: vengono usati per specificare gli elementi a cui aggiungere gli eventi Javascript. Ecco l'esempio di codice proposto da Nolan: <li> <a onclick="this.parentNode.removeChild(this)" href="#">Click me to delete me</a> </li> Una semplice lista in cui cliccando sul li lo si fa scomparire. Come si vede, l'istruzione Javascript è richiamata con l'evento onclick inserito in un a. Roba triviale e stravista. Usando Behaviour, invece, potremmo mantenere il codice molto più pulito: <ul id="example"> <li> <a href="/someurl">Click me to delete me</a> </li> </ul> OK, Javascript è scomparso, ma come richiamiamo la funzione? Basta creare un JS da collegare alla pagina in cui andremo a inserire una serie di regole, così: var myrules = { '#example li' : function(el){ el.onclick = function(){ this.parentNode.removeChild(this); } } }; Behaviour.register(myrules); Attenzione alla seconda riga. Mettendo all'inizio #example li aggiungo l'evento a tutti gli elementi li discendenti dell'ul con id 'example'. Per altre demo si può vedere questa pagina. La documentazione è scarna, ma le poche istruzioni d'uso presenti sono molto chiare e più che sufficienti per iniziare a sperimentare. Segnalo anche un articolo di Alessandro Fulciniti, ricchissimo di link e dedicato alle ultime evoluzioni di Javascript.

Continua a leggere Behaviour: separare Javascript da HTML

Categoria: Scripting