• Home
    • Special web hosting offer - LIMITED TIME ONLY

    Mac OS-X Dock con JavaScript

    Posted By m4tricol on September 15, 2008

    image

    Come si fa a vedere un effetto cosí bello e non riportarlo :-D . Eccovi come si fa a implementare la famosa Dock della Apple sul proprio sito.

    Allora per prima cosa bisogna scaricare il file MacStyleDock dopo di che dovete inserire qualche riga di codice JavaScript prima del tag </head>, e per abbellire il tutto possiamo creare la barra sottostante alla Dock, per intenderci , quella grigia sotto le icone. Quindi procediamo con un po’ di CSS per la barra:

    <style type=”text/css”>

    #dockContainer{
    display    : table;
    margin     : 0 auto;
    text-align : center;    /* fixes IE bug */
    }

    #dockContainer > div{
    display : inline-block; /* fixes IE bug */
    }

    #dockContainer > div{
    display : inline;       /* fixes IE bug */
    }

    #dockContainer > div{
    display       : table-cell;
    text-align    : left;
    background    : url(’images/dock-centre-80.png’) repeat-x 0 129px;
    border-bottom : 2px solid rgb(220,220,200);
    }

    #dockContainer > div > div{
    background : url(’images/dock-right-80.png’) no-repeat right 129px;
    }

    #dockContainer > div > div > div{
    background : url(’images/dock-left-80.png’) no-repeat left 129px;
    height     : 176px;
    overflow   : hidden;
    padding    : 0 20px;
    }

    </style>
    Fatto questo possiamo procedere con la pagina html e inserire il tag

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

    Dopo questo inizia la parte di JavaScript.

    Allora bisogna creare gli elementi della Dock usando la funzione MacStyleDock che accetta 5 parametri.

    1. node
    Il nodo al quale verranno “attaccati” gli elementi
    2. imageDetails
    É l’array contente gli elementi della dock con le seguenti proprietá:
      1. name
        1. Il nome del file immagine
      2. sizes
        1. La dimensione espressa con un array [dimensione_iniziale,dimensione_finale]
      3. extension
        1. L’estensione dell’immagine, es: '.jpg'
      4. onclick
        1. La funzione da richiamare se premuto quell’elemento

    3. minimumSize
    La dimensione minima delle icone della dock

    4. maximumSize
    La dimensione massima delle icone della dock

    5. range
    Il range di espansione della dock, deve essere un numero intero.

    Quindi in conclusione eccovi un esempio di codice JS.

    <script type=”text/javascript” >
    var dock = new MacStyleDock(
    document.getElementById(’dock’),
    [
    {
    name      : ‘images/mac-icon-’,
    extension : ‘.png’,
    sizes     : [80, 160],
    onclick   : function(){
    alert(’You clicked on the first icon’);
    }
    },
    {
    name      : ‘images/mac-icon-’,
    extension : ‘.png’,
    sizes     : [80, 160],
    onclick   : function(){
    alert(’You clicked on the second icon’);
    }
    }
    ],
    80,
    160,
    2);
    </script>

    Ecco fatto ora chiudete la pagina con i tag </body > o proseguite con la vostra pagina ed avrete la bellissima dock mac os-x.

    Da notare che per creare le icone dovete creare quattro immagini, di cui due optional.

    1. immagine piccola : nome_file-dimensione.estensione,
      1. es: mac-icon-80.png
    2. immagine grande :nome_file-dimensione-full.estensione,
      1. es: mac-icon-160-full.png
    3. Infine altre due immagini di riflesso con stesso nome delle prime due ma con il nome reflection.
      1. es:mac-icon-80-reflection.png,mac-icon-160-reflection.png

    Voilá un esempio di elemento dock

    mac-icon-80 mac-icon-160-full mac-icon-80-reflection mac-icon-160-reflection

    mentre questi sono gli elementi per creare la base

    dock-centre-80 dock-left-80 dock-right-80

    source

    Social Bookmarks:
    • Facebook
    • Digg
    • Technorati
    • del.icio.us
    • Google
    • Live
    • Sphinn
    • Mixx

    No Comments

    Leave a reply