Ancora uno script semplice che può essere utile se il vostro sito presenta delle pagine che si susseguono sequenzialmente, ad esempio un articolo molto lungo, o una relazione.
La pagina è strutturata a frame (due verticali nel mio esempio) e per la navigazione si usano solo due pulsanti [Avanti] e [Indietro].
Lo script è molto semplice ed è posizionato nella pagina principale, quella che contiene il frameset:
<SCRIPT>
<!--
var c=0,p=-1;
var pagine = new Array();
pagine[c++]="testi.html";
pagine[c++]="prova.html";
pagine[c++]="terza.html";
pagine[c++]="pippo.html";
pagine[c++]="euro.html";
function page(s){
eval("p"+s+s);
p<0?p=c-1:p==c?p=0:null;
parent.contenuto.location.href=pagine[p];}
//-->
</SCRIPT>
I links invece hanno questa sintassi:
<A HREF="javascript:top.page('+')">Avanti</A> - <A HREF="javascript:top.page('-')">Indietro</A>
e sono posizionati del frame di sinistra ("sequencer").
Ed a proposito di frames, vediamo l'ultimo mattone di questo script:
<FRAMESET COLS="20%,*" onLoad="page('+')">
<FRAME NAME="sequencer" SRC="sequencer.html" ... >
<FRAME NAME="contenuto" SRC="about:blank" ... >
</FRAMESET>
Cominciamo proprio dal frameset: come vedete nel mio esempio ho due frames verticali, uno a sinistra che contiene i due links, e quello a destra nel quale vengono visualizzate le pagine scelte. Il tag <FRAMESET> contiene un event-handler che comunemente vediamo nel <BODY>: "
onLoad" e che qui ci serve per presentare la prima pagina, infatti il frame di destra ("contenuto") è inizialmente vuoto dato che carica una pagina bianca.
Ovviamente se nel vostro sito avete già una pagina nel frame dei contenuti toglierete l'onLoad dal FRAMESET.
Veniamo allo script: all'inizio troviam due variabili:
-
c è un contatore e serve per incrementare l'array che contiene i nomi delle pagina:
-
p è invece un indice usato dalla funzione per caricare l'n-esima pagina nel frame dei contenuti, se volete invece eliminare una pagina togliete semplicemente la riga, la variabile
c che si autoincrementa terrà ordinato l'array.
Per aggiungere links dovete semplicemente aggiungere righe all'array lasciando invariata la parte a sinistra del segno "
=" e specificando il nome della pagina HTML da caricare.
La funzione principale è anche l'unica presente: riceve un parametro (
"s") che di volta in volta sarà il segno meno o più seconda del link cliccato.
La prima riga della funzione serve ad incrementare o decrementare la variabile
p: ad "
eval()" passiamo infatti un parametro che assumerà valore "
p++" o "
p--" cioè la concatenazione della stringa
"p" e di
s che vale "+" o "-".
eval() esegue l'istruzione e noi ci ritroveremo la variabile modificata.
La riga successiva serve a controllare che "p" non sia minore di zero (primo elemento dell'array) o uguale a "c" che equivale a scrivere
pagine.length.
p diventa minore di zero (cioè
-1) quando premiamo più volte il link [Indietro]: in questo caso gli viene assegnato il valore "c-1" che è l'ultimo elemento dell'array.
Nel caso invece sia
p=c facciamo ripartire la visualizzazione dal primo elemento dell'array settando
p=0. L'ultimo valore ("
null") serve solo a completare la sintassi del secondo
?:. I due operatori
?: nella seconda riga della funzione equivalgono a:
if (p<0)
{
p=c-1;
}
else
{
if (p==c)
{
p=0;
}
}
L'ultima riga della funzione termina lo script.
Non fa altro che caricare nel frame dei contenuti la p-esima pagina dell'array.