Archivio per la tag 'javascript'
Una delle caratteristiche che affascina e diverte di più gli utenti windows, quando vedono un Mac, sono le animazioni del dock, la barra posto in fondo allo schermo.
E’ possibile dare lo stesso effetto anche al nostro sito web, vediamo come …
Per prima cosa scarichiamo il codice javascript da questo sito. Creiamo poi, un elemento chiamato “dock” in questo modo <div id="dock"></div> e inseriamo il pezzettino di codice che richiama javascript
<script type=”text/javascript” src=”MacStyleDock.js”></script>
dove al posto di “MacStyleDocks.js” dobbiamo inserire l’indirizzo esatto dove è salvato il codice javascript sul nostro server, ad esempio “www.viscido.org/MacStyleDock.js”
quindi il codice sarà:
<script type=”text/javascript” src=”www.viscido.org/MacStyleDock.js”></script>
inoltre dovremmo inserire dei parametri per far funzionare al meglio l’effetto scala. Sul sito web vengono così spiegati:
-
node
-
The node at which to create the Mac-style dock.
-
imageDetails
-
An array each of whose elements are object with three properties:
-
name
-
the basename of the image
-
sizes
-
an array of pizel sizes available
-
extension
-
the image extension
-
onclick
-
the function to call when the image is clicked
Requested file names consist of the concatenation of the name property, one of the values of the size property, the string ‘-reflection’ for reflections, the string ‘-full’ for full versions (so captions can be added), and the extension property.
-
-
minimumSize
-
The minimum size of icons in the dock.
-
maximumSize
-
The maximum size of icons in the dock.
-
range
-
The range of expansion, measured in icons. This must be an integer.
-
-
-
In sostanza, in quesiti parametri, viene definito come si deve comportare l’icona al passaggio del mouse, quale icona deve apparire, quando deve essere grande, quanto deve essere piccola, cosa accade quando ci si clicka sopra ecc ecc..
Possiamo prendere i parametri fortini nell’esempio e usarli nella nostra pagina, eccoli qui:
<script type=”text/javascript” >
var dock = new MacStyleDock(
document.getElementById(’dock’),
[
{
name : 'mac-icon-0-',
extension : '.jpg',
sizes : [32, 64],
onclick : function(){
alert(’You clicked on the first icon’);
}
},
{
name : ‘mac-icon-1-’,
extension : ‘.jpg’,
sizes : [32, 64],
onclick : function(){
alert(’You clicked on the second icon’);
}
}
],
32,
64,
2);
</script>
Fatto questo dovremmo esser pronti, quindi salviamo la pagina e riapriamola con il browser per vedere se tutto funziona per ilmeglio.
Se qualcosa non dovesse funzionare, o se l’articolo non vi è chiaro, vi rimando a questa pagina dov’è possibile trovare delle faq che vi aiuteranno di certo.
Se questo post ti è piaciuto, iscriviti ai miei feed RSS !
