Parametri Mac OS X Dockbar

[codesurfer]

Ciao a tutti,
ho aggiunto ad un'applicazione una dockbar in stile Mac OS X (http://safalra.com/web-design/javasc...ac-style-dock/).
Nell'esempio ogni immagine è passata al js che crea la dockbar con parametri fissi mentre a me interessava rendere il tutto dinamico. Quindi ho creato una funzione che crea ogni immagine in questo modo:

<script type="text/javascript" >
        var dock = new docklet(document.getElementById('dockBar'),createDockParameters('{APP_NAMES}','{APP_EXTENSIONS}','{APP_LINKS}'),80,160,2);
        </script>

function createDockParameters(strNames, strExt, strLinks){
    names=new Array();
    ext=new Array();
    links=new Array();
    values=new Array();

    names=strNames.split(',');
    ext=strExt.split(',');
    links=strLinks.split(',');

    for(var id=0;id<names.length;id++){
        values.push(
        {
            name:      names[id],
            extension: ext[id],
            sizes:     [80, 160],
            onclick:  function(){
                location.href=links[id];
            }
        }
        );
    }

    return values;
}

Il ciclo in grassetto crea dinamicamente gli elementi contenenti i parametri di ogni immagine.
Le immagini vengono create correttamente ad eccezione dell'evento onclick che come indice 'id' prende sempre il massimo del ciclo.
Mi spiego, nel caso specifico carico 4 immagini per cui il ciclo valorizza 'id' da 0 a 3 ed esce su 'id==4'.
Nel push 'names[id]' e 'ext[id]' sono corretti ma 'links[id]' si comporta come se fosse sempre 'links[4]', di conseguenza il link che viene creato punta ad 'undefined' invece che al nome della pagina.

Mettendo un 'alert(id)' appena prima o dopo il 'push' vedo che i valori sono corretti.

Come posso ovviare a questo problema?

Grazie a tutti in anticipo.

[artorius]

mi sa tanto che non hai ben chiaro il funzionamento degli eventi:

facendo

onclick:  function(){
   location.href=links[id];
}

tu non chiami subito al momento dell'esecuzione la funzione, ma DOPO il click ed in quel momento il valore di id è uguale a 4, che è il valore dopo che l'hai usato.

prova a fare così:

for(var id=0;id<names.length;id++){
   var funct = eval('function(){location.href="'+links[id]+'";}');
   values.push(
        {
            name:      names[id],
            extension: ext[id],
            sizes:     [80, 160],
            onclick:  funct
        }
    );
);

}

[codesurfer]

mi sa tanto che non hai ben chiaro il funzionamento degli eventi

vero non sono un grande esperto di js.

Comunque va decisamente meglio, quasi perfetto. Ora viene valorizzato correttamente a quanto vedo ma mi da questo errore:

Errore: syntax error
File sorgente: http://localhost/nagios/scripts/common.js
Riga: 39, Colonna: 8
Codice sorgente: function(){location.href="downtime.php";}

Il codice mi pare uguale a quello che mi hai suggerito e mi sembra anche coerente negli apici ecc.

for(var id=0;id<names.length;id++){
  var link=eval('function(){location.href="'+links[id]+'";}');
    values.push(
    {
      name: names[id],
      extension: ext[id],
      sizes: [80, 160],
      onclick: link
    }
  );
}

Sembra che non gli piaccia il 'function()' dentro 'eval' perchè togliendo quello non da errori.
Ho provato a mettere i caratteri di escape ma è anche peggio.

[artorius]

se lo vedi con Firefox che descrizione da all'errore?

[codesurfer]

Quella che ho postato è proprio presa dalla console di FF.
Da Chrome invece dice solo '1 Uncaught SyntaxError: Unexpected token ('

[artorius]

boh, prova a mettere degli spazi e a togliere il ; alla fine:

var link=eval('function(){ location.href="'+links[id]+'" }');

[codesurfer]

Risolto così:

    for(var id=0;id<names.length;id++){
        values.push(
        {
            name:      names[id],
            extension: ext[id],
            sizes:     [80, 160],
            onclick:  function(){
                location.href=this.id+'.php';
            }
        }
        );
    }

Assegno all'immagine come id il nome senza estensione e lo uso per creare il link.
Senza potevo pensarci prima

Grazie comunque dell'aiuto.

[codesurfer]

Risolto così:

    for(var id=0;id<names.length;id++){
        values.push(
        {
            name:      names[id],
            extension: ext[id],
            sizes:     [80, 160],
            alt:     links[id],
            onclick:  function(){
                location.href=this.alt;
            }
        }
        );
    }

Assegno all'immagine come alt il link.
Senza potevo pensarci prima

Grazie comunque dell'aiuto.

[artorius]

sarebbe meglio usare il rel piuttosto che l'alt....