Lo script che presentiamo è un particolare gestore di news. Ovviamente, parlando di javascript che è un linguaggio lato client, non potremo inserire o levare news dinamicamente ma potremo comunque mostrare delle notizie predefinite in base al giorno, con in più la possibilità di associare un link per ogni messaggio.
L'esempio si compone di 7 file:
- esempio.htm
- installazione.htm
- popup.js
- resize.gif
- close.gif
- max.gif
- min.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi.
Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto un'avvertenza: le immagini allegate dovranno essere messe nella stessa cartella della pagina che conterrà il DIV. Se invece volete spostarle dovrete cambiare il percorso delle gif nel file "popup.js".
Basterà aprirlo con un qualsiasi editor di testo (il notepad è perfetto) ed editare le righe con il tag <img src="...">
Un'operazione fondamentale da compiere è richiamare il javascript esterno nella pagina interessata. Tra i tag <head> della pagina, quindi, inseriamo questa stringa:
<script language="javascript" src="popup.js"></script>
A questo punto utilizziamo il file "installazione.htm". Questo documento contiene il modulo che, una volta compilato con i nostri parametri, ci fornirà il codice da incollare nella nostra pagina.
Tutti i campi richiesti sono forniti di una descrizione chiara che non dovrebbe creare confusione. Per sicurezza, però, ripeto alcune cose fondamentali:
- La lunghezza del DIV non può essere inferiore a 100 pixel
- L'altezza del DIV non può essere inferiore ad 80 pixel
- Il nome del DIV deve essere univoco. Ciò vuol dire che, se decideremo di mettere più di un livello nella stessa pagina, dovremo usare nomi diversi. Inoltre il nome scelto non dovrà contenere spazi ma dovrà essere una parola unica
- Il contenuto del DIV potrà essere sia testo semplice che codice html.
L'unica accortezza da seguire, nell'inserire l'html nell'apposita textarea, sarà quella di far precedere un backslash () ai doppi apici. Es: <img src="foto.jpg">
Se non rispettiamo quanto detto lo script non funzionerà.
- TRUE equivale a VERO mentre il corrispettivo è FALSE (FALSO). Se ad esempio vogliamo che il DIV non sia trascinabile cambieremo la voce "DIV trascinabile?" da "true" a "false"
Una volta compilato tutto il modulo, possiamo vedere un'anteprima del risultato cliccando sul bottone "ANTEPRIMA"; se il lavoro ci soddisfa clicchiamo su "CREA CODICE" e, nella textarea sottostante, vedremo il codice che ci interessa.
Ecco un esempio di quanto apparirà:
window.onload=function(){
new popUp(200, 100, 300, 175, "Div", "Inserite il contenuto che preferite.
È possibile utilizzare anche codice HTML. L'importante è mettere dei backslash () prima degli eventuali doppi apici (")", "white", "black", "bold 12px verdana", "Titolo", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);
}
A questo punto torniamo nella pagina in cui abbiamo incluso il javascript esterno.
In un qualsiasi punto del <body> incolliamo il codice appena creato, inserendolo tra i tag <script language="javascript">...</script>.
Esempio:
<script type="text/javascript" language="javascript">
window.onload=function(){
new popUp(200, 100, 300, 175, "Div", "Inserite il contenuto che preferite.
È possibile utilizzare anche codice HTML. L'importante è mettere dei backslash () prima degli eventuali doppi apici (")", "white", "black", "bold 12px verdana", "Titolo", "navy", "white", "#dddddd", "gray", "black", true, true, true, true, false);
}
</script>
Prima di concludere un piccolo suggerimento. Possiamo far scomparire o far riapparire il DIV cliccando su un link.
Per nascondere il DIV utilizziamo questa riga di codice:
<a href="javascript:hidebox('NOME_DEL_DIV')">Nascondi</a>
Per mostrare il DIV utilizziamo questa riga di codice:
<a href="javascript:showbox('NOME_DEL_DIV')">Mostra</a>
Ovviamente, al posto di "NOME_DEL_DIV", dovrete inserire il nome che avete dato al vostro livello.
Altre modifiche non sono necessarie.
