| ||||||||||||||||
 StaffScripts Menu AVVIO stile Windows | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Autore: Fabiano | Data: 04/08/2001 | Downloads: 5236 | Voto: 2.5/5 | Download | P r o v a | |||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Menu AVVIO stile Windows® 04/04/2004 - È disponibile da oggi una versione alternativa del menu con il pulsante posizionato al top della pagina che consente di aprire il menu verso il basso. L'anteprima della versione modificata è accessibile dal solito preview. Le modifiche da fare allo script sono pochissime, ma richiederebbero un intervento esperto all'interno del codice, nell'archivio ZIP è dunque presente un file .js alternativo che potrà essere semplicemente sostituito al file principale per cambiare la modalità di funzionamento del menu. Nessuna modifica è necessaria invece al file id configurazione (datimenu.js) che quindi potrà essere riutilizzato senza alcun problema. Un ulteriore aggiunstamento consente al menu di rimanere fisso nella pagina riposizionandosi in automatico mentre la pagina viene scrollata. Il 22 Maggio 2001 su i.c.l.j. Quicker pubblicò questo messaggio:
Come tutti i post più interessanti catturò l'attenzione dei Guru del gruppo (quelli presenti almeno), e sia Fabiano che Zer0 risposero all'appello. Dal thread che ne nacque, sono venute fuori due soluzioni, la prima, quella di Quicker, l'ha pubblicata lui stesso negli UserScripts il 4 giugno con il nome di Magic Menu, l'altra Fabiano me la mandò qualche giorno dopo, e solo adesso (è il 2 agosto!) riesco a trovare il tempo di scriverne la scheda e pubblicarla (sorry Fabiano, non succederà più :-). Commentare lo script sarebbe impresa ardua, dirò solo che si basa, come quasi tutti i menu presenti in rete, sul posizionamento di livelli (<DIV>...</DIV>) e sulla modifica della proprietà di visibilità. Preferisco dilungarmi invece sulla personalizzazione, che, essendo un po' complicata, richiede un po' di lavoro ed un bel po' di commento. Innanzitutto: il menu si compone di due distinti files ".js", che vanno caricati con un preciso ordine: datimenu.js e menu.js Il primo (datimenu.js) contiene le variabili di stile del menu (tipo e colore del font, colore delle voci, ecc.) e l'array delle voci e cartelle del menu; il secondo (menu.js) contiene invece lo script che visualizza e fa funzionare il menu. L'ordine di inserimento nella pagina HTML, va rigorosamente rispettato, in quanto lo script deve ovviamente lavorare sui dati che gli vengono dalla parte editabile. La sintassi è la solita di inclusione di un file JavaScript all'interno di un documento HTML; il sorgente della pagina che vi consente di provarlo dal link in alto è il seguente: <HTML> <HEAD> <TITLE>JsDir - Menu AVVIO stile Windows</TITLE> <SCRIPT SRC="datimenu.js"></SCRIPT> [ ... eventuali META TAGS per il vostro sito ...] </HEAD> <BODY BGCOLOR="#ffffff" onResize="self.location.reload()"> <SCRIPT SRC="menu.js"></SCRIPT> [ ... il resto della vostra pagina HTML ...] </BODY> </HTML> Noterete che i due script li abbiamo messi nella sezione <HEAD> ... </HEAD> sempre per garantirci che il browser li scarichi dal server con priorità rispetto al resto della pagina. Non fate caso al BGCOLOR che ho dato alla pagina, ma ricordate di inserire l'event-handler onResize="self.location.reload() per mantenere la compatibilità con Netscape 4, che, com'è noto, distrugge i livelli al ridimensionamento della pagina. L'uso dell'event-handler obbliga il browser a ricaricare la pagina dal server e quindi a ricreare il menu. E veniamo alla personalizzazione. Nella prima parte abbiamo il preload delle immagini usate nel menu. Potete ovviamente personalizzarle e spostarle nella vostra cartella preferita. Probabilmente vorrete cambiare "titolo.gif" per intonarla al layout grafico del vostro sito. Inoltre tenete presente fin d'ora la struttura di questa parte: potete inserire quante immagini volete (che fungeranno da icone), e riutilizzarle nei vari livelli del menu (v. alla fine: gli array dei livel). //--------preload------------------ imm0=new Image();imm0.src="images/ne.gif"; imm1=new Image();imm1.src="images/camn.gif"; imm2=new Image();imm2.src="images/titolo.gif"; imm3=new Image();imm3.src="images/cams.gif"; imm4=new Image();imm4.src="images/camcp.gif"; imm5=new Image();imm5.src="images/camp.gif"; imm6=new Image();imm6.src="images/winp.gif"; Subito dopo abbiamo una funzione (dove(url)) che serve al menu per aprire le pagine relative alle voci cliccate: //------------------target-------
function dove(url){
self.location=url;
}
"url" sarà il link HTML che metterete come ultimo elemento degli array (v. sempre alla fine la descrizione dei livelli). Così come la vedete, la funzione apre il link nella stessa finestra dov'è contenuto il menu. Approfitto per dire subito una cosa: questo menu NON si presta ad essere usato in siti con frames perché si sviluppa velocemente sia in orizziontale che in verticale. Dato che il livelli sono oggetti del documento, e che diversi frames contengono diversi documenti, i livelli del menu (contenuto in uno solo dei frames) non risulterebbero visibili sui frames adiacenti, quindi il menu... non funzionerebbe. Segue la sezione di personalizzazione dei font e dei colori; il significato delle variabili è il seguente:
Segue l'array che specifica i livelli del menu. Anche se a prima vista può sembrare complicato, vi assicuriamo che in effetti non lo è, basta entrare un pò nella logica. Ogni riga dell'array ha questa struttura: pr[c=c+1]=new Array([immagine],'[testo del livello]','[tipo ([c]artella/[l]ink)]','[posizione]','[link]')
Ormai abbiamo finito! Era ora eh?!!! [^_^] Rimane un'ultima cosa da dire ed un suggerimento. L'ordine in cui vanno specificati gli array dei livelli, è un po' particolare. In vari script di solito, si specificano prima le voci del menu principale, poi le voci dei vari sottomenu, poi i sottomenu dei sottomenu, eccetera. Qui invece 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 (e siamo a tre, quindi "pr_left*2") sarà il primo di quest'ultima cartella... e così via. E se ora dovessimo specificare una seconda voce per la prima cartella? Semplice: scriveremo un altro livello, ma questa volta daremo "pr_left*2" così questo livello si sposterà indietro di una lunghezza... Abbiamo dunque una struttura nella quale dobbiamo solo dire allo script "quanto dista dal margine" un livello per poterlo posizionare nella giusta cartella. E se domani vogliamo aggiungere un link (o una cartella) ad una qualsiasi delle cartelle, non dobbiamo far altro che creare lo spazio FRA LE RIGHE DEGLI ARRAY ed aggiungere quello che desideriamo. Lo script capirà (dalla distanza "pr_left..." e dal valore che assume la variabile "c" che si autoincrementa) come e dove posizionare il livello. Credetemi: è più facile a farsi che a dirsi! Il suggerimento è: 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. Preferisco fermarmi qui... e prendere un'aspirina! :-) Ho impiegato due giorni per scrivere questa scheda, e ne ho ricavato un bel mal di testa... se guardo lo script mi chiedo quanti giorni di riposo si è preso Fabiano dopo averlo terminato! :-) Fateci sapere se ne è valsa la pena (^_^), ma sopratutto scrivetemi per commenti o suggerimenti su questa scheda. Riccardo Per qualsiasi chiarimento sullo script mandate una e-mail a Fabiano
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
