Dopo 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:
1 2 3 4 5 6 7 8 9 | 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:
1 | Event.observe(window, 'load', function() {new Effect.BlindUp($("tit_category").next(),{duration:.5}) } ) |
I titoli sulla sidebar sono definiti, quindi, in questo modo:
1 2 3 4 |
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…








4
Non ci sono commenti per questo Post
Lascia un commento