nExpand Your Site
Ultima Versione: 1.0 RC

nExpand è una libreria JavaScript che fornisce utilities per lo sviluppo di web application scalabili e moderne. Strutturata in moduli completamente personalizzabili, fornisce flessibili strumenti per sviluppatori alle prime armi fino ai Ninja del JavaScript. nExpand permette di scrivere codice in modo semplice, intuitivo e crossbrowser, garantendo un alto livello di compatibilità con altri frameworks e librerie.

Come si usa?

Per poter utilizzare la libreria, devi caricarla all'interno della pagina HTML del sito web di tuo interesse (guida principianti). Valentine, Il modulo principale della libreria, permette di utilizzare gli oggetti nativi di JavaScript senza temere problemi di tipo crossbrowser e crossdevice.

Es1: Selezione elementi.

Per trovare gli elementi nel DOM possiamo sfruttare i selettori dal CSS1 al CSS4 utilizzando la funzione nExpand (guida ai selettori).

/* CSS1 Cerchiamo gli elementi DIV che appartengono alla classe first */ var a1 = nExpand("div.first"); /* CSS2 Cerchiamo gli elementi A preceduti da un elemento DIV */ var a2 = nExpand("div+a"); /* CSS3 Cerchiamo gli elementi A non preceduti da un elemento DIV */ var a3 = nExpand("a:not(div+a)"); /* CSS4 Cerchiamo gli elementi DIV seguiti da un elemento A */ var a4 = nExpand("div:has(+a)");

Es2: Gestione selezione.

Gli elementi selezionati vengono restituiti in un oggetto di tipo array-like, simile a un array (guida all'oggetto nExpand).

/* Vogliamo trovare tutti gli elementi input compilati correttamente e aggiungere loro la classe 'valid'. */ var input = nExpand("input:valid"); // Selezione input.forEach(function(e) { e.classList.add("valid"); // Aggiungiamo la classe ad ogni elemento e }); /* Alternativa */ for(var input = nExpand("input:valid"),i=0,l=input.length;i<l;i++) input[i].classList.add("valid");

Es3: Proprietà di Stile.

Imposta le proprietà di stile degli elementi senza preoccuparti dei Vendor prefixes e/o specifica stili personalizzati a seconda del Vendor prefix (guida alle proprietà di stile).

/* Impostazione stile all'elemento E precedentemente selezionato. */ /* Tramite nExpand */ E.setStyle("opacity","0.1"); /* JavaScript Nativo */ var stile = E.getAttribute("style")||"", opacity = [ '-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";', '-o-opacity: 0.1;', '-ms-opacity: 0.1;', '-moz-opacity: 0.1;', '-webkit-opacity: 0.1;', 'opacity: 0.1;' ].join(""); E.setAttribute("style",stile+" "+opacity);

Es4: Eventi

Per la programmazione event-driven, nExpand mette a disposizone differenti metodi per la gestione degli ascoltatori di eventi (guida agli eventi).

/* Assegna un evento a un elemento E al click del mouse.*/ E.addEventListener("click",function(event) { /* codice da eseguire */ }); /* Evita che la stessa funzione venga eseguita più volte durante la propagazione di un evento. Es.: Se è stata assegnata agli ascoltatori degli eventi touchstart e mousedown di un elemento E la stessa funzione Fx, un'azione touch dell'utente sull'elemento E causa l'esecuzione della funzione Fx due volte. Per impedirlo usa la funzione firstEvent. */ E.firstEvent(["touchstart","mousedown"],function(event) { /* */ });

Open Source

nExpand è una libreria JavaScript che segue la filosofia dello sviluppo open source. Ogni modulo è distribuito sotto licenze open source ed è personalizzabile con semplicità. Per informazioni visita la pagina delle licenze.