semplice linkbar in javascript e xml

[cyd]

Ciao, ho dovuto creare una linkbar per un progettino che sto sviluppando,
l'ho scritta in js con un xml come sorgente per i link, niente di speciale, anzi ..ma magari a qualcuno alle prime puo servire un esempio di come usare l'XMLDOM per gestire gli xml con javascript:
ESEMPIO: [QUI]

codice js:

function linkbar_new(){
document.write("\n<div style=\"background-color:#cccccc\" id=\"linkBar\">\n</div>\n\n");
var obj=document.getElementById('linkBar')
obj.innerHTML=linkbar_build();
}



function linkbar_build(){

var error="Error loading the xml file: "
var rxml=null;

try {
rxml=new ActiveXObject("Microsoft.XMLDOM");
}
catch(e){
try{
rxml=document.implementation.createDocument("","",null);
}catch(e) {
return '<center>[ '+error+e.message+' ]</center>'
}
}

try{
rxml.async=false;
rxml.load('linkbar.xml');
}
catch(e) {return '<center>[ '+error+e.message+' ]</center>'}

var x=rxml.documentElement;
var r="<table id=\"linkBarTable\" width=\"100%\">";


var counter=0;
for(var i=0;i<x.childNodes.length;i++) if(x.childNodes[i].nodeType==1) counter++;
var cell_width=100/counter;

for(var i=0;i<x.childNodes.length;i++) {
if(x.childNodes[i].nodeType==1){
r+="\n<td width=\""+cell_width+"%\" align=\"center\">\n";
r+="<a href=\""+x.childNodes[i].getElementsByTagName('url')[0].childNodes[0].nodeValue+"\">";
r+=x.childNodes[i].getElementsByTagName('name')[0].childNodes[0].nodeValue+"</a>\n</td>\n";
}
}

return r+"</table>\n";

}

il file xml deve avere la seguente struttura:

<linkbar>

<link>
<name>NOME DEL LINK</name>
<url>URL DEL LINK</url>
</link>

</linkbar>

si include ovunque cosi:

<script>
linkbar_new();
</script>

Commento e post originale: [QUI]

cia'

 

[yeat]

Veramente carino +1

 

[fojeaf]

ehm, l'esempio ha un problema

[ Error loading the xml file: ]

cmq sebbene nn possa vederla credo sia buona... complimenti

 

[cyd]

ehm, l'esempio ha un problema

[ Error loading the xml file: ]

cmq sebbene nn possa vederla credo sia buona... complimenti

pazzo invece a me funzia tranquillamente, c'è ancora l'errore??

 

[imported_lepa]

no, a me funziona bene

 

[fojeaf]

a me lo da ancora...... forse è un problema di chrome ma dubito....

 

[imported_lepa]

@malex: prova con un altro browser.....

@GrayFox: bellina, questa linkbar

 

[fojeaf]

per qualche misterioso motivo firefox nn va, quindi ho dovuto verificare con ie7, e con quello funziona.......... evidentemente è un problema del browser..............

cmq bella la barra.......

 

[cyd]

@malex: si mi sa che è chrome, ho testato e ritorna lo stesso errore e in piu senza il codice dell'errore.... magari è una questione di sicurezza..anche se ne dubito... in ogni caso puoi caricare l'xml con una richiesta http in ajax, sempre non sia un problema di supporto del DOM xML... ci lavorero'!

---

gia che sono qui posto il corrispondente in php, cosi evitiamo il fattore browser:

<?php

function linkbar_build($width=false){
$r='<div id="linkbar" style="background-image:url(cbar.png)">'; //inizializzo il risultato
//se non riesce a caricare linkbar.xml ritorna errore.
if(!$x=simplexml_load_file('linkbar.xml')) return $r."[ Error loading the XML file ]</div>";
$c=0;
//prelevo il numero di links
foreach($x->link as $ln) $c++;
//setto la lunghezza di ogni <td/>
$relat_w=$width?((string)($width/$c))."px":((string)(100/$c)).'%';
//inizializzo la tabella
$r.='<table width="'.($width?(string)$width.'px':'100%').'" >';
//aggiungo i links
foreach($x->link as $lnk) $r.='<td width="'.$relat_w.'" align="center"><a href="'.(string)$lnk->url[0].'">'.(string)$lnk->name.'</a></td>';
echo $r."</table></div>";
}

?>

la funzione riceve come parametro facoltativo un intero che corrsponde alla lunghezza della barra in pixel, in caso non li venga passato niente lavora in percentuali.

 

[fojeaf]

ho segnalato il bug, vediamo cosa mi rispondono......

 

[imported_n1ghtmare]

Bella pero' io preferiro' sempre un buon utilizzo dei CSS che semplificano il source e siano piu' "leggeri" per il browser.

 

[cyd]

si ma cosa centra... i css li usi per lo stile

 

[imported_n1ghtmare]

Gia' in questo caso ho detto una cazzata xD, intedevo dire se vuoi utillizare semplici box colorati senza inserire sotto immagini.

 

[cyd]

beh... l'immagine l'ho inserita con la stessa definizione che usi nei css: background-image:url(..)
è uguale scrivere le definizioni dentro l'attributo style o scriverle in un file css esterno

 

[Mathetios]

allora molto molto carino, però avrei una domanda(anche un pò niubba considerate le mie conoscenze praticamente nulle di js)
Qual'è l'utilità di richiamare un pagina esterna per una linkbar?

 

[cyd]

pagina esterna??
se intendi l'xml beh...sicuramente per una cosa cosi semplice se ne puo fare a meno, ma l'utilita sta nella possibilità di modificare il contenuto del controllo piu facilmente sia a mano che runtime a seconda delle scelte dell'utente...poi un file xml puo essere letto anche in altre parti della pagina e anche server side e puo essere dinamicamente modificato secondo le esigenze...è una questione di dinamicità, inoltre prendilo come un esempio su come interpretare l'xml con js

 

[Mathetios]

Si infatti, l'ho preso subito come esempio, e mi ci sto racapezzando con un pò di calma...
La mia non voleva essere una critica, ma solo una semplice richiesta di chiarimento

 

[cyd]

sisi lo so tranquillo..
se puo servirti:http://www.w3schools.com/dom/default.asp

 

[Mathetios]

Grazie, molto interessante come link.... appena esco fuori da questo mese d'inferno mi ci metto

 

[biotek_]

Innanzi tutto complimenti GreyFox , poi , ci tengo a dire che il link che hai segnalato e molto utile ti meriti veramente un +1 complimenti continua cosi =)