Tra gli elementi centrali di un buon sito Internet, la navigabilità è uno dei più importanti. Un sito facilmente navigabile è un sito che prevede un menu di risorse facile ed intuitivo. In altre parole il visitatore deve essere nella condizione di arriavare subito alla pagina che desidera senza troppi passaggi intermedi. Da questo punto di vista la soluzione ottimale appare quella dei sistemi Windows, che attraverso menu espandibili riescono ad indicizzare ordinatamente un gran numero di risorse.
Con gli strumenti di HTML non è possibile ottenere un risultato del genere, che si raggiunge invece con l'uso di sintassi JavaScript. In questo esempio, viene spiegato nei dettagli come creare un menu espandibile all'interno di una pagina Web.
L'esempio si compone di 4 file:
- esempio.htm è la pagina HTML dell'esempio
- collapsd.gif è l'icona che indica le voci principali del menu, quando queste non sono espanse
- exploded.gif è l'icona che indica le voci principali del menu, quando queste sono espanse
- child.gif è l'icona che indica le voci minori del menu, che in questo caso rappresentano link a risorse esterne
Per una più semplice comprensione di questo script è utile fare riferimento a questi file, verificando le procedure e i dati. In questo modo, con un continuo confronto, è più semplice comprendere le peculiarità di questo Javascript.
Il file HTML contiene tutto il codice necessario al corretto funzionamento dello script. Nel tag <head> abbiamo definito il codice Javascript vero e proprio, e nel <body> quello relativo ai necessari richiami.
Codice da inserire nel tag <head>
<script language="javascript">
<!--
var caution = false;
function setcookie(name, value, expires, path, domain, secure)
{
var curcookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.togmtstring() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
if (!caution || (name + "=" + escape(value)).length <= 4000)
document.cookie = curcookie;
else
if (confirm("cookie exceeds 4kb and will be cut!"))
document.cookie = curcookie;
}
function getcookie(name)
{
var prefix = name + "=";
var cookiestartindex = document.cookie.indexof(prefix);
if (cookiestartindex == -1) return null;
var cookieendindex = document.cookie.indexof(";", cookiestartindex + prefix.length);
if (cookieendindex == -1) cookieendindex = document.cookie.length;
return unescape(document.cookie.substring(cookiestartindex + prefix.length, cookieendindex));
}
function deletecookie(name, path, domain)
{
if (getcookie(name))
{
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=thu, 01-jan-70 00:00:01 gmt";
}
}
function fixdate(date)
{
var base = new date(0);
var skew = base.gettime();
if (skew > 0) date.settime(date.gettime() - skew);
}
function item(parent, text, depth)
{
this.parent = parent;
this.text = text;
this.depth = depth;
}
function makearray(length)
{
this.length = length;
}
function makedatabase()
{
outline = new makearray(10);
outline[0] = new item(true, 'html.it', 0);
outline[1] = new item(false, '<a href="https://www.html.it/jscript">320 javascript</a>', 1);
outline[2] = new item(true, 'graficà, 1);
outline[3] = new item(false, '<a href="https://www.html.it/grafica/gif.htm">gif animate</a>', 2);
outline[4] = new item(false, '<a href="https://www.html.it/grafica/sfondi.htm">background</a>', 2);
outline[5] = new item(false, '<a href="https://www.html.it/java">200 applet java</a>', 1);
outline[6] = new item(true, 'informatica italianà, 0);
outline[7] = new item(false, '<a href="http://www.hwupgrade.it">hardware upgrade</a>', 1);
outline[8] = new item(false, '<a href="http://www.in-it.com">sito ufficiale</a>', 1);
outline[9] = new item(false, '<a href="http://www.freeonline.org">free on line</a>', 1);
setstates();
setimages();
}
function setstates()
{
var storedvalue = getcookie("outline");
if (!storedvalue)
{
for (var i = 0; i < outline.length; ++i)
{
if (outline[i].depth == 0)
outline[i].state = true;
else
outline[i].state = false;
}
} else {
// extract current states from cookie (0 => false, 1 => true)
for (var i = 0; i < outline.length; ++i)
{
if (storedvalue.charat(i) == '1')
outline[i].state = true;
else
outline[i].state = false;
}
}
}
function setimages()
{
for (var i = 0; i < outline.length; ++i)
{
if (outline[i].state)
if (outline[i].parent)
if (outline[i + 1].state) // outline[i] is exploded
outline[i].pic = '<a href="javascript:toggle(' + i + ')"><img src="exploded.gif" border=0></a>';
else
outline[i].pic = '<a href="javascript:toggle(' + i + ')"><img src="collapsd.gif" border=0></a>';
else // outline[i] is only a child (not a parent)
outline[i].pic = '<img src="child.gif" border=0>';
}
}
function toggle(num)
{
for (var i = num + 1; i < outline.length && outline[i].depth >= outline[num].depth + 1; ++i)
{
if (outline[i].depth == outline[num].depth + 1)
outline[i].state = !outline[i].state; // toggle state
}
setstorage();
history.go(0);
}
function setstorage()
{
var text = "";
for (var i = 0; i < outline.length; ++i)
text += (outline[i].state) ? "1" : "0";
setcookie("outline", text);
}
makedatabase();
// -->
</script>
La riga di codice:
outline = new makeArray(10);
è di fondamentale importanza in quanto stabilisce il numero di elementi del menu, che in questo caso è pari a 10. Questo numero include sia le voci principali del menu, sia quelle minori. Nel caso in cui al numero di voci non corrispondesse il valore stabilito come new makeArray, la pagina darebbe messaggio di errore e lo script non potrebbe funzionare.
Ogni elemento è accompagnato da un valore "outline" progressivo, che da 0 arriva a 9. Le voci principali del menu sono contrassegnate da un valore logico true pari a 0.
outline[0] = new item(true, 'HTML.it', 0); outline[6] = new item(true, 'INFORMATICA ITALIANA', 0)
Mentre le voci minori annidate all'interno di quelle principali sono contrassegnate da un valore logico false pari a 1.
outline[1] = new item(false, '<a href="https://www.html.it/jscript">320 Javascript</a>', 1); outline[2] = new item(true, 'GRAFICA', 1); outline[7] = new item(false, '<a href="http://www.hwupgrade.it">Hardware Upgrade</a>', 1); outline[8] = new item(false, '<a href="http://www.in-it.com">Sito ufficiale</a>', 1); outline[9] = new item(false, '<a href="http://www.freeonline.org">Free On Line</a>', 1);
Per annidare ulteriori voci principali all'interno di quelle visualizzate all'apertura della pagina è necessario assegnare un valore logico false pari a 2:
outline[3] = new item(false, '<a href="https://www.html.it/grafica/gif.htm">GIF animate</a>', 2); outline[4] = new item(false, '<a href="https://www.html.it/grafica/sfondi.htm">Background</a>', 2);
In altre parole queste due voci non vengono annidate all'interno di quella principale "HTML.it" ma all'interno della voce "GRAFICA".
Impostato il codice nel tag <head> è necessario inserire il seguente codice nel punto della pagina dove si vuole visualizzare il menu:
Script da inserire nel <body> al posto del menu
<script language="javascript">
<!--
document.write('<pre><h4>');
for (var i = 0; i < outline.length; ++i)
{
if (outline[i].state)
{
for (var j = 0; j < outline[i].depth * 3; ++j)
document.write(' ');
document.write(outline[i].pic, ' ', outline[i].text, '');
} else {
var previous = i;
for (var k = i + 1; k < outline.length && outline[k].depth>= outline[previous].depth; ++k)
++i;
}
}
document.write('</h4></pre>');
// -->
</script>
