Con questo CODE-IT vogliamo aiutare chiunque desideri mostrare un set di fotografie, video o testi con una pagina web coinvolgente e di facile implementazione. Abbiamo scelto di utilizzare la libreria MooRD basata su Mootools e mostreremo cosa significa scrivere javascript non obtrusive per far sì che le nostre pagine siano pulite e funzionali.
La parte piu' corposa del nostro codice sarà, questa volta, rappresentata dalla pagina html. In questa pagina infatti dovremo predisporre gli oggetti che vogliamo far ruotare nel nostro carosello. Scegliamo un layout semplice e predisponiamo quattro layer rappresentati dai classici tag div. A questi layer diamo una struttura, tramite i fogli di stile, che li faccia stare in quadrato in modo che possiamo suddividere gli argomenti che vogliamo mostrare con la nostra vetrina.
Diamo un titolo ad ognuna delle zone e inseriamo in sequenza le diverse immagini e link che vogliamo vengano visualizzati in successione.
Abbiamo deciso di suddividere ognuna delle diapositive che viene fatta ruotare, in tre zone: un testo, un'immagine, e il link alla risorsa che vogliamo visualizzare. Ad ogni blocco abbiamo associato un attributo class con valore snip. In questo modo tutti gli elementi che verranno fatti scorrere avranno lo stesso stile per quanto riguarda forma, colori e dimensione.
<div class="snip" >
<a href="http://www.ictv.it/file/vedi/728/creare-un-home-page-a-tab-con-ext/" target="new">
<img src="img/codeit1.jpg" style="border:1px inset #cdcdcd" ><br>Creare una homepage in pochi minuti grazie ad Ext.js
</a>
</div>
Abbiamo scelto di mettere un numero limitato di elementi nei primi tre box e di inserire poi il totale degli elementi nell'ultimo. E' importante predisporre adeguatamente la nostra pagina e far combaciare gli attributi di nome id con gli elementi che si trovano nel css e nel file javascript. Ogni zona, ad esempio, è contraddistinta da un elemento di classe main, descritto nel foglio di stile associato alla pagina html, e ha un id uguale alla parola main piu' un numero; ovvero main1, main2,main3 e main4. Questi id li ritroveremo nei file javascript e li utilizzeremo per dare un'intelligenza diversa ad ognuno dei nostri blocchi.
<div id="main1" class="main" >
Siamo andati quindi a compilare i nostri fogli di stile e a descrivere le caratteristiche di ogni elemento che si trova nella pagina. Compilare i fogli di stile e' una buona norma introdotta con gli ultimi standard web, in questa maniera è molto semplice cambiare in una volta sola caratteristiche di più blocchi di codice. Se volessimo cambiare solamente lo sfondo dei layer che si susseguono a rotazione, ad esempio, basterebbe cambiare l'attributo background della classe snip.
.snip{
width:200px;height:160px;
border:1px solid black;z-index:1;
background:#000000;
padding:10px 10px 10px 10px;
color:#a3a4a3;
font-style:Verdana Helvetica;
font-size:14px;
border:1px inset #cecece
}
Grazie all'utilizzo della libreria MooRD nella nostra pagina, il grosso del lavoro è già stato fatto prima ancora di iniziare. E' bastato infatti scrivere in maniera ordinata il codice html e il foglio di stile, perché ora si possa associare ai blocchi main1, main2, main3 e main4 un comportamento diverso a seconda delle nostre preferenze.
Nella variabile opts, ad esempio, dichiariamo che le nostre immagini devono rimanere ferme per cinque secondi ed effettuare una transizione da una all'altra in un secondo. Questo, come tante altre caratteristiche che riguardano il tempo, è stato fatto tramite dei numeri in millisecondi.
window.addEvent('domready', function() {
var opts = {duration: 1000, steps: 5000};
var fx = new Fx.Cycle.shuffle('main1' ,
$merge({sizes:[-200, 30]}, opts));
var fx2 = new Fx.Cycle.shuffle('main2' ,
$merge({sizes:[40, 100]}, opts));
var fx3 = new Fx.Cycle.shuffle('main3' ,
$merge({sizes:[40, 100]}, opts));
var fx4 = new Fx.Cycle.shuffle('main4' ,
$merge({sizes:[-200, 30]}, opts));
}
Una volta presa confidenza con questa libreria, potremo creare pagine che prima era possibile realizzare solo in flash. Sul sito di MooRD troviamo molti esempi di questo genere per rendere i nostri contenuti sempre più accattivanti.
