moo.fx per principianti
Come i più attenti avranno notato, da qualche giorno ho aggiornato il blog alla nuova versione di Blogger (ex beta), adesso ho le etichette che compaiono a fine post e niente di particolare da aggiungere (ci tornerò, spero dettagliatamente, in questi giorni)... ma veniamo al tema di questo post.
Moo.fxMoo.fx è una libreria di effetti, scritti in JavaScript utilizzabile con il framework prototype o mootools. La maggior parte della documentazione (tutta quella ufficiale) è in inglese nonostante l' autore,Valerio Proietti, sia italiano. Per questo motivo e visto che comunque era da un pò che ne volevo parlare, ho deciso di pubblicare questo breve tutorial, o guida per principianti; maggiori informazioni e supporto (in inglese) sul forum del progetto. Il codice che segue è lo stesso della banda nera superiore che ho aggiunto al blog; ho escluso i filtri della trasparenza nel CSS per evitare problemi legati ai browser (relativamente al supporto dei filtri CSS) e per mantenere la concentrazione su moo.fx.
Cosa ci serve: per prima cosa dobbiamo scaricare questi file: moo.fx.js , cioè la libreria vera e propria e poi il framework JavaScript; per questo esempio ho scelto di utilizzare moo.fx con prototype.js.Una volta caricati sul nostro server/provider, andiamo a scrivere il nostro documento partendo dall' unico script che sarà necessario:
<head>
<script type="text/javascript" src="prototype-1-.4.0.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
<script type="text/javascript">
window.onload = function() {
primo = new fx.Height('moofx', {duration: 400});
primo.hide();
}
< /script>Carichiamo prima la libreria e il framework che abbiamo sul nostro server e poi creiamo la funzione al caricamento della pagina: una variabile (primo) che utilizza l' oggetto Height (altezza) e lo applica a moofx (che è un normale id nel foglio di stile. La riga conclusiva nasconde la variabile (e il div relativo).
Passiamo al foglio di stile:
<style type="text/css">
<!--
#moofx{margin: 0px;color: #FFFFFF;width: 100%;font-size: 1em;text-align: justify;background-color: #000000;}
.guida a{font-family: Arial, Helvetica, sans-serif;font-size:16px;color:#FFFFFF; margin: 0px; padding: 0em 0.5em;font-weight: bold; background-color: #CC6600; width: 100%; display: block; line-height: 15px;}
.guida a:hover{background-color: #000000;}
#moofx p {font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; color: #FFFFFF; margin: 0px; padding: 1.2em; text-align: left; line-height: 28px;}
</style>
</head>Ed infine il codice HTML
<body>
<div id="moofx" class="fx_Height">
<div align="center"><p>Nascondere
o visualizzare un contenitore CSS con moo.fx la libreria in JavaScript scritta da Valerio Proietti... questo mini tutorial è stato realizzato da <a href="http://sid05.com>Sid05</a></p> </div>
< /div>< div align="left"><span class="guida"><a
href="#" onclick="primo.toggle();">?</a></span></div>
</body> Anche qui dobbiamo dire poco: solo che la variabile richiamata dal click del
mouse utilizza l' oggetto toggle che altro non è che uno switch che restituisce
i due valori consecutivamente... facile no
|
Permalink |
|
