Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Chromeless in javascript

Chromeless in javascript


Lo script è formato principalmente da due porzioni di codice che, per comodità, verranno inclusi in file esterni .js (in questo modo il sorgente delle pagine sarà più ordinato).

Il primo file l'ho chiamato codicecrome.js. Contiene la parte più complessa del codice e, fortunatamente per noi, non va personalizzato. Potete scaricarlo direttamente da qui.

Il secondo javascript, invece, l'ho nominato come cromeless.js. Vediamo in dettaglio com'è strutturato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function saibcrom (titolo_finestra, urlPop, lungX, altY) {
title=titolo_finestra;
W=lungX;
H=altY;
windowCERRARa 		= "img/close_a.gif"
windowCERRARd 		= "img/close_d.gif"
windowCERRARo 		= "img/close_o.gif"
windowNONEgrf 		= "img/none.gif"
windowCLOCK		= "img/clock.gif"
windowREALtit		=  title
windowTIT 	    	= "<font face=verdana size=1> "+ title +"</font>"
windowBORDERCOLOR   	= "#ff0000"
windowBORDERCOLORsel	= "#c6c6c6"
windowTITBGCOLOR    	= "#c6c6c6"
windowTITBGCOLORsel 	= "#ff0000"
 
openchromeless(urlPop, title, W, H, windowCERRARa, windowCERRARd, windowCERRARo, windowNONEgrf, windowCLOCK, windowTIT, windowREALtit , windowBORDERCOLOR, windowBORDERCOLORsel, windowTITBGCOLOR, windowTITBGCOLORsel)
 
}

La funzione saibcrom contiene i parametri che verranno passati dai link presenti nella pagina; ogni collegamento che aprirà una chromeless, quindi, conterrà: il titolo della finestra, l'url della finestra da aprire, le misure che tale finestra dovrà avere.

Le righe di codice:

1
2
3
4
5
windowCERRARa 		= "img/close_a.gif"
windowCERRARd 		= "img/close_d.gif"
windowCERRARo 		= "img/close_o.gif"
windowNONEgrf 		= "img/none.gif"
windowCLOCK		= "img/clock.gif"

fanno riferimento alle immagini presenti sul bordo superiore delle chromeless. Le immagini standard sono comprese nel file zip che avete scaricato prima. Si trovano nella cartella img che dovrà essere uploadata insieme agli altri file ma volendo potete cambiare tranquillamente il percorso delle gif.

La stringa sottostante:

1
windowTIT = "<font face=verdana size=1> "+ title +"<font>"

riguarda il titolo che avranno le chromeless; possiamo modificare sia il tipo che la grandezza del font.

I colori della barra superiore, invece, possono essere modificati agendo su questi quattro parametri:

1
2
3
4
windowBORDERCOLOR   	= "#ff0000"
windowBORDERCOLORsel	= "#c6c6c6"
windowTITBGCOLOR    	= "#c6c6c6"
windowTITBGCOLORsel 	= "#ff0000"

i valori esadecimali indicano rispettivamente: il colore del bordo, il colore del bordo quando selezionato, il colore della barra del titolo, il colore della barra del titolo quando selezionata.

Vediamo come costruire un esempio pratico per aprire una chromeless. Avremo bisogno di due documenti: una index.htm (che "lancerà" lo script) e una pagina chiamata pop.htm (che sarà appunto la nostra chromeless).
La index contiene i richiami ai due file .js esterni e il link che richiama la funzione saibcrom. Vediamo nel dettaglio il codice:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>Index</title>
<SCRIPT language="JavaScript" SRC="cromeless.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="codicecrome.js"></SCRIPT>
</head>
<body>
 
<div align="center"><a href="javascript:saibcrom(&#039;Prova&#039;, &#039;pop.htm&#039;,250,250)">Apri la chromeless di prova</a></div>
 
</body>
</html>

Tra i tag <head> sono contenuti i richiami ai due file .js esterni. Nel <body>, invece, è presente il link che fa riferimento alla funzione saibcrom passando i parametri di cui avevamo parlato prima: titolo della pop up ('Prova'), URL della pop up ('pop.htm'), lunghezza (250) e altezza (250).
Nel caso volessimo aprire più di una chromeless nella stessa pagina basterà usare un link simile a quello analizzato adesso avendo cura di cambiare i parametri ovviamente.

La pop up, invece, è una normalissima pagina html… ci penserà lo script a darle l'effetto orignale.
Dobbiamo solo inserire una piccola stringa nel tag <body> per essere sicuri che la chromeless stia sempre in primo piano rispetto alla index; ecco, quindi, come sarà strutturata la finestra:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>Pop up chromeless</title>
</head>
<body <strong>onload="top.window.focus()"</strong>>
<div align="center"><font face="verdana" size="2">Questa è una pop up chromeless di prova.
 
Potete guardare il sorgente delle due pagine per capire come sono strutturate.
 
Le chromeless possono essere spostate sullo schermo tenendo premuto il tasto sinistro del mouse sulla barra grigia.</font></div>
 
</body>
</html>

Pagina: 1 [2]

link sponsorizzati

Consiglialo su Facebook

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,188 secondi dopo aver eseguito ben 74 query. Wordpress... prestazioni da urlo!