Dockbar

Una delle caratteristiche più amate del sistema operativo Apple è senz’altro la dockbar, ovvero quella barra situata nella parte bassa dello schermo che permette di lanciare le applicazioni e/o passare da un’applicazione all’altra.

Oggi, grazie ad un semplice javascript, è possibile inserire una dockbar in stile Mac sul proprio sito.
Per prima cosa bisogna scaricare lo script, disponibile in due versioni: la prima è il pacchetto completo con commenti (poco più di 9Kb), mentre la seconda è la versione compressa, senza commenti e di dimensioni ridotte (2 Kb).

Versione completa
Versione compressa

Una volta scaricato nella cartella del sito, dobbiamo richiamare lo script dalla pagina in cui vogliamo inserire la dockbar:

<script type=”text/javascript” src=”MacStyleDock.js”></script>

Quindi inseriamo il DIV che conterrà la dockbar:

<div id=”dock”></div>

La funzione che gestisce la creazione della dockbar ha diversi parametri:

node
Va specificato l’elemento all’interno del quale dev’essere creata la dockbar (solitamente il DIV che abbiamo creato in precedenza)
imageDetails
Un array composto da elementi, ognuno dei quali ha tre proprietà:

name
percorso e nome dell’immagine
sizes
array delle dimensioni in pixel disponibili
extension
estensione dell’immagine
onclick
specifica l’azione da eseguire nel momento in cui l’utente clicca su un’icona

minimumSize
Dimensione minima delle icone della dock
maximumSize
Dimensione massima delle icone nella dock
range
Range di espansione, dev’essere specificato un intero

Ecco un esempio di utilizzo della dockbar:

<script type=”text/javascript” >
var dock = new MacStyleDock(
document.getElementById(’dock’),
[
{
name : ‘mac-icon-0-’,
extension : ‘.jpg’,
sizes : [32, 64],
onclick : function(){
window.location = ‘http://www.cssmagazine.it/’;
}
}
],
32,
64,
2);
</script>

Il codice dev’essere inserito prima del DIV che dovrà ospitare la dockbar; è preferibile quindi inserirlo all’interno dei tag <head></head>.

In questa pagina potete vedere una demo della dockbar.



Altri articoli che potrebbero interessarti