.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

13/03/2003 - Chiudere in automatico le cartelle

In molti ci hanno chiesto come mai le cartelle principali aperte non si chiudono più quando se ne apre un'altra.
Purtroppo questa funzionalità è incompatibile con la colorazione delle cartelle interne. È on-line da oggi un nuovo archivio ZIP che contiene oltre all'esempio visualizzabile con la prova anche un altro file .js "menu_autoclose.js" che offre questa caratteristica, ma con le icone tutte uguali.
Per usare questa versione è sufficiente includere nelle vostre pagine il file "menu_autoclose.js" invece del "menu.js". Nessuna modifica è necessaria al file di configurazione "datimenu.js".

08/12/2002 - Nuova feature per lo script.

Nel file di configurazione (datimenu.js) è possibile ora, settando due parametri a true o a false avere una resa grafica diversa per le cartelle ed i links.
I due parametri sono tipocartelle e tipolinks: - settando a false verranno usate le stesse immagini (aperto/chiuso) sia per le icone principali che per quelle secondarie;
- settando invece a true le icone secondarie saranno differenti dalle principali (rosse nello script d'esempio).
Stesso discorso per i links. Sono stati separati i due componenti (cartelle e links) per una maggiore personalizzazione, gli script contenuti nell'archivio da scaricare sono gli stessi dell'esempio, con cartelle e links secondari diversificati.
NOTA BENE Sono stati cambiati i nomi delle immagini rispetto alle versioni precedenti del menu:
Per la versone "normale" vengono usate queste immagini:
- link.gif è l'icona associata ai links;
- cart_ch.gif è la cartella chiusa;
- cart_op.gif è la cartella aperta;

Per la versione nuova (con cartelle e link secondari di colore diverso) vengono usate queste immagini:
- link_alt.gif è l'icona associata ai links delle cartelle secondarie;
- cart_alt_ch.gif è la cartella secondaria chiusa;
- cart_alt_op.gif è la cartella secondria aperta;

Attenzione: tutte le sei immagini devono comunque essere presenti nella cartella images, anche quelle necessarie solo alla nuova versione. Lo script deve caricarle comunque anche se poi non vengono usate.

11/05/2002 - Modificato lo script.

Lo script è stato modificato per diversificare l'apertura dei link.
Ora invece che sceglere fra aprire tutti i links nella stessa pagina OPPURE aprirli tutti in un frame, è possibile gestire i links come se fossero dei normali <A HREF...> nel documento, quindi facendo CONTEMPORANEAMENTE aprire nella stessa pagina, in uno o più frame diversi, ed anche lanciare funzioni JavaScript (ad esempio pop-up).
Con l'occasione ho anche migliorato alcune cose, ad esempio per aprire le cartelle ora si può cliccare anche sul testo, ed ho aggiunto da script uno spazio davanti ai testi dei links per distanziarli. La funzione che apriva i links in frame ha cambiato nome e consente la gestione di più frames (duplicando la funzione stessa) ed ho implementato una pop-up direttamente nel codice per aprire alcuni dei vostri links in finestra.
Buona parte della scheda è stata riscritta (modifiche ed aggiunte sono evidenziate in blu), per commenti o suggerimenti scrivetemi.

08/02/2002 - Un errore imperdonabile!!!!.

Quando ho pubblicato lo script ho inavvertitamente messo on-line una versione non definitiva del menu, che una volta attivato in pratica copriva completamente il contenuto della pagina; cosa non visibile dall'esempio perché nella pagina di prova il documento non contiene nulla :-).
Da oggi è disponibile la versione perfettamente funzionante che ho provato su NN4.7, IE5 N6, mentre in OPERA non funziona (come non funzionava prima) per l'impossibilità in OPERA di scrivere dinamicamente in un livello: quindi correggo anche il BrowserCheck.
La scheda che segue è, adesso, corretta.

Grazie infinite a Mariangela per avermi segnalato l'errore...

      Se avete dato un'occhio al Menu Avvio noterete molte somiglianze sia nel codice che nell'implementazione del menu.
      Anche questa volta non commento lo script per la sua complessità fidiamoci di Fabiano ed andiamo a vedere come inserirlo nelle nostre pagine e personalizzarlo.
      Come per il Menu Avvio abbiamo due files da includere nel documento:

<HTML>
<HEAD>
   <TITLE>JsDir - Menu ad albero</TITLE>
   <SCRIPT SRC="datimenu.js"></SCRIPT>
   [ ... eventuali  META TAGS per il vostro sito ...]
</HEAD>
<BODY BGCOLOR="#ffffff" onResize="self.location.reload()">

[ ... il resto della vostra pagina HTML ...]

<SCRIPT SRC="menu.js"></SCRIPT>
</BODY>
</HTML>

      Il file che contiene i dati del menu (l'array delle voci) va inserito nella sezione <HEAD> ... </HEAD> del documento, mentre lo script vero e proprio conviene inserirlo alla fine del documento immediatamente prima del tag </BODY>, in modo che la scrittura del livello ed il suo riempimento con i dati non diano fastidio al browser per l'impaginazione della schermata.

      Per personalizzarlo dobbiamo editare il file datimenu.js andando a modificarne il sorgente come segue:
      Per prime abbiamo le variabili di stile:

top_pra	del menu dal margine superiore"

left_pra	Distanza del menu dal margine sinistro

width_pra	Larghezza dei livelli. Va modificata "a occhio" per renderla uguale alla voce più lunga.

fc_pra	Colore del testo

fs_pra	Dimensione del carattere

ff_pra	Font del menu

Segue la funzione (InFrame(url)) che serve per aprire alcune voci (o tutte) in un frame diverso da quello dov'è contenuto i menu. (v. sotto)

function InFrame(url)
	{
	top.frames.NOMEDELFRAME.location.href=url;
	}

      È sufficiente scrivere al posto di "NOMEDELFRAME" il nome del frame in cui si vuole aprire il link così com'è stato definito con l'attributo NAME nel <FRAMESET>.

      Vediamo ora l'array che specifica i livelli e quindi le voci del menu.
      Vale la raccomandazione fatta per il "Menu Avvio": sembra complicato a prima vista, ma la struttura dell'array segue una sua logica, basta stare attenti a non inciampare in qualche apice di troppo o di meno!
      Ogni riga dell'array ha questa struttura:

pr[c=c+1]=new Array('[testo del livello]','[posizione]','[tipo ([c]artella/[l]ink)]',{ '[link]' })

pr[c=c+1]
Questa parte è uguale per tutti, il contatore si incrementa da solo e tiene traccia di tutti i livelli del menu

[testo del livello]
Qui va scritto (fra apici singoli) il testo che verrà visualizzato nel livello.

[posizione]
[posizione] indica la distanza del livello corrente dal margine sinistro, va incrementato di 20 in 20 (o altro valore che deciderete voi) secondo la posizione nell'indentazione dell'array.
Preferisco non dilungarmi per evitare confusione, la logica è la stessa del Menu Avvio, ma qui indichiamo direttamente la distanza in pixel senza fare uso di un moltiplicatore.

[tipo ([c]artella/[l]ink/[ll]ink)]
In questa posizione (sempre fra apici singoli) metterete una 'l' o una 'c' per specificare se il livello è un link, oppure una cartella che contiene altri link e sottocartelle.
Soltanto se il link fa parte del menu principale metterete invece una doppia 'll'. Ovviamente potete inframmezzare un link fra le cartelle (v. riga 39 del "datimenu.js") sempre specificando [posizione] uguale a zero.

[link]
Quest'ultimo valore dell'array va incluso solo se il livello è un link, ed indica quale pagina HTML dev'essere aperta al click.
Se il livello è un link, qui può essere scritto:

direttamente il nome della pagina HTML che verrà aperta al click.
È assolutamente identico a scrivere un link <A HREF...> quindi analogamente ad <A HREF="pagina.html"> scriverete 'pagina.html' (apici compresi)ed il tag verrà creato dallo script.
la chiamata alla funzione InFrame() specificando il nome della pagina da aprire.
Attenzione in questo caso agli apici. Dato che lo script per il suo funzionamento usa sia gli apici singoli che l'apice doppio, gli apici attorno al nome della pagina dovranno essere specificati nella forma [ \' ] e DOVRANNO ESSERE USATI SOLO ED ESCLUSIVAMENTE APICI SINGOLI.
Ad esempio per aprire la pagina "offerte.html" nel frame del sito si dovrà scrivere 'javascript:InFrame(\'offerte.html\')': i due apici più esterni sono i delimitatori di stringa per il livello del menu, quelli interni preceduti dal backslash verranno passati alla funzione e diventeranno i delimitatori di stringa per il link, così otterremo un tag come: <A HREF="javascript:InFrame('offerte.html')">.
Se si ha la necessità di gestire più di un frame, sarà sufficiente creare un'altra funzione identica ad InFrame() semplicemente specificandogli un nuovo nome, ad es.InFrame2(), ed ovviamente indicando all'interno un diverso frame.
Analogamente alla funzione InFrame() possono essere specificate tutte le altre funzioni desiderate, basta che il nome della funzione sia preceduto da "javascript:" come (ripeto) fareste in un link: [ 'javascript:tuafunzione()' ]
Ad esempio si potrebbe voler aprire una pop-up e passargli i valori di larghezza ed altezza della finestra insieme alla pagina da aprire dentro la pop-up; riferendoci alla funzione:
```
	function popup(pagina,larga,alta)
	   {
	   fin=window.open(pagina,"","top=100,left=100,width="+larga+",height="+alta);
	   }
```
che ho incluso nello script, e nella quale vogliamo aprire la pagina "sconti.html" di dimensioni 400 (larghezza) per 300 (altezza) scriveremo:
'javascript:popup(\'sconti.html\',400,300)'
Attenzione sempre agli apici!!!
Qui ci servono per il nome della pagina perché è una stringa (ed abbiamo usato \' come scritto sopra), ma non sono necessari per le dimensioni.
L'ultimo link del menu principale ("pop-up") apre una finestra

      La logica come vedete è simile a quanto già visto per il Menu Avvio.
      Anche qui i livelli vanno scritti secondo l'ordine gerarchico. Se il primo elemento del nostro menu è una cartella, il prossimo elemento dell'array sarà il primo elemento di questa cartella; se quest'ultimo è a sua volta una cartella, il prossimo elemento sarà il primo di quest'ultima cartella... e così via.
      Infine anche qui vale il suggerimento dell'altra volta: usate l'indentazione! Guardate il menu di esempio che vi propone Fabiano, e tenete d'occhio lo script in funzione. Usando l'indentazione come ha fatto lui (abbiamo usato il tabulatore) ritroverete facilmente, nello script, la struttura che si apre man mano nell'esempio.

      Per commenti o suggerimenti a questa scheda scrivete a Riccardo.

      Per qualsiasi chiarimento sullo script in sè mandate invece una e-mail a Fabiano

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!