Restyling: animazioni ed interattività
Mercoledì 25 Aprile, 2007Dopo aver sistemato la grafica di Undolog e aver apportato gli ultimi ritocchi ad alcuni titoli (vedi sidebar), mi sono divertito ad usare l'accoppiata Prototype.js e Scriptaculous, in modalità non intrusiva (Unobtrusive)! Ecco un video (ma lo potete provare di persona qui a destra 
) con la simpatica funzione che ho aggiunto alla sidebar di Undolog, che oltre a renderla più gradevole spero la renda anche più funzionale!
Il codice che ho utilizzato è davvero semplice:
-
Event.observe(window, 'load', function() {
-
$$('h2.dropdown').each( function(element) { element.style.cursor="pointer";
-
element.observe('click', function(event) {
-
if( this.next().style.display == "" ) new Effect.BlindUp(this.next(),{duration:.5});
-
else new Effect.BlindDown(this.next(),{duration:.3});
-
Event.stop(event);
-
}.bindAsEventListener(element))
-
})
-
})
Inoltre notate che la prima volta che viene caricata la Home Page di Undolog viene automaticamente chiuso il pannello delle Categorie - identificato dall'id tit_category:
-
Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } )
I titoli sulla sidebar sono definiti, quindi, in questo modo:
Tramite la classe dropdown vengono identificati i titoli H2 da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js - di cui abbiamo già parlato...
Lascia un commento