COPPA ZEMAN - Gli Scoppiati

JavaScript -9
Esempi di Menù
Menu
 Ci
sono varie tecniche per costruire dei
menu. Tutte si basano sulla modifica di
proprietà CSS (e.g, top, left, z-index,
visibility) di alcuni elementi posizionati
 La
modifica di queste proprietà avviene
dopo che si è verificato un evento
– mouseover, mouseout, click, …
Tecnologie di Sviluppo per il WEB
2
Funzioni comuni: Libreria
 Introduciamo
ora alcune funzioni che
possono essere utili in una qualsiasi
gestione di menu
– getObj
• Restituisce un riferimento ad un oggetto
– getX, getY, getZ
• Restituiscono le coordinate di un elemento
posizionabile
– muoviA
• Sposta un elemento posizionato in una data
coordinata
Tecnologie di Sviluppo per il WEB
3
Libreria – 1: getObj
// restituisce un riferimento all’oggetto il cui ID è
// passato come input
function getObj(elementID){
if (typeof elementID == "string")
return document.getElementById(elementID);
else
return elementID;
}
Tecnologie di Sviluppo per il WEB
4
Libreria – 2
//muove un elemento alle coordinate (x,y,z)
//x ed y espresse in pixel, z in valore assoluto
function muoviA(elementID,x,y,z){
var elemento = getObj(elementID);
elemento.style.left = x + "px";
elemento.style.top = y + "px";
elemento.style.zIndex = z;
}
Tecnologie di Sviluppo per il WEB
5
Libreria – 3
//restituisce la coordinata x di un elemento posizionabile
//coordinata interpretata come pixel
function getX(elementID){
return parseInt(getObj(elementID).style.left); }
//restituisce la coordinata y di un elemento posizionabile
//coordinata interpretata come pixel
function getY(elementID){
return parseInt(getObj(elementID).style.top); }
//restituisce lo z-index di un elemento posizionabile
function getZ(elementID){
return parseInt(getObj(elementID).style.zIndex); }
Tecnologie di Sviluppo per il WEB
6
Libreria – 4
//setta la visibilità di un elemento a vis
function setVisibility(elementID,vis){
var elemento = getObj(elementID);
if (vis == true || vis=='visible')
elemento.style.visibility = "visible";
else
elemento.style.visibility = "hidden"; }
//restituisce la visibilità di un elemento
function isVisible(elementID) {
var elemento = getObj(elementID);
return (elemento.style.visibility == "visible") ? true: false; }
Tecnologie di Sviluppo per il WEB
7
Libreria – 5
//setta la regione ritagliata (clip region) di un elemento
function setClip(elementID,top,right,bottom,left){
var elemento = getObj(elementID);
var r = 'rect('+top+'px,'+right+'px,'+bottom+'px,'+left+'px)';
elemento.style.clip = r;
}
//cambia il tipo di cursore, secondo argomento opzionale
function setCursor(cursortype,elementID){
if (elementID==null)
document.body.style.cursor = cursortype;
else
getObj(elementID).style.cursor = cursortype;
}
esempio
Tecnologie di Sviluppo per il WEB
8
Libreria – 6
//restituisce la larghezza della finestra del browser
function getWidth(){
var larghezza=null;
//Netscape et al. usa window.innerWidth
if (window.innerWidth)
larghezza = window.innerWidth;
//IE usa document.body.clientWidth
if (document.body.clientWidth)
larghezza = document.body.clientWidth;
return larghezza;
}
Tecnologie di Sviluppo per il WEB
9
Libreria – 7
//restituisce l'altezza della finestra del browser
function getHeight(){
var altezza = null;
//Netscape et al. usa window.innerHeight
if (window.innerHeight)
altezza = window.innerHeight;
//IE usa document.body.clientHeight
if (document.body.clientHeight)
altezzza = document.body.clientHeight;
return altezza;
}
Tecnologie di Sviluppo per il WEB
10
Libreria – 8
//setta il colore di sfondo di un elemento
function setBackground(elementID, colore){
getObj(elementID).style.background = colore;
}
//setta il colore di primo piano di un elemento
function setColor(elementID, colore){
getObj(elementID).style.color = colore;
}
Tecnologie di Sviluppo per il WEB
11
Esempio menu
I
seguenti menu sono stati adattati da
esempi del capitolo 5 di
The Web Wizard’s Guide to
DHTML and CSS
Steven G. Estrella
Addison-Wesley
Tecnologie di Sviluppo per il WEB
12
Menu a scorrimento – 1
DIV slidemenu
link
DIV collegamenti
(175px)
DIV
controlloMenu
Tecnologie di Sviluppo per il WEB
13
Menu a scorrimento – 2
onmouseover
menuFocus()
onmouseout
menuFocus()
esempio
onclick
ApriChiudi()
Tecnologie di Sviluppo per il WEB
14
Menu a scorrimento – 3
var StatoMenu = "nascosto";
var menuleft = -175;
var x = -175;
//coordinate iniziali menu
var y = 0;
var z = 1;
var intervallo = 2; //intervallo di animazione
var deltaX = 20; //porzione di menu
//mostrata ogni 2 millisecondi
Tecnologie di Sviluppo per il WEB
15
Menu a scorrimento – 4
function menuFocus(elementID,stato){
if (stato=='over'){
setCursor("pointer",elementID);
setBackground(elementID,"yellow");
}
else{
setCursor("auto",elementID);
setBackground(elementID,"red");
}
}
In azzurro le funzioni di libreria
Tecnologie di Sviluppo per il WEB
16
Menu a scorrimento – 5
function ApriChiudi() {
menuFocus('controlloMenu','out');
if (StatoMenu =="nascosto"){
x=menuleft; //inizio animazione (x = -175)
MostraMenu();
}else{
x=0;
NascondiMenu();
}
}
Tecnologie di Sviluppo per il WEB
17
Menu a scorrimento – 6
function MostraMenu(){
if (x < 0){
x = (x + deltaX > 0) ? 0 : x + deltaX;
muoviA('slidemenu',x,y,z);
var
timerID=setTimeout('MostraMenu()',intervallo);
} else clearTimeout(timerID);
StatoMenu = "mostrato";
}
Tecnologie di Sviluppo per il WEB
18
Menu a scorrimento – 7
function NascondiMenu(){
if (x > menuleft){
x = (x - deltaX < menuleft) ? menuleft : x - deltaX;
muoviA('slidemenu',x,y,z);
var
timerID=setTimeout('NascondiMenu()',intervallo);
}
else
clearTimeout(timerID);
StatoMenu = "nascosto";
}
Tecnologie di Sviluppo per il WEB
19
Menu a discesa – 1
DIV barramenu
DIV titolo1/2
DIV menu1/2
150px
DIV scelte1/2
Tecnologie di Sviluppo per il WEB
20
Menu a discesa – 2
onmouseover
mostraMenu()
onmouseout
nascondiMenu()
link
esempio
Tecnologie di Sviluppo per il WEB
21
Menu a discesa – 3
<div id=”barramenu”>
<div id="menu1" onmouseover="mostraMenu('1')"
onmouseout ="nascondiMenu('1')">
<div id="titolo1" class="titolo">Risorse HTML</div>
<div id="scelte1" class="scelte">
<a class="menu" href="…">Specifica HTML </a>
<a class="menu" href=" …"> Validatore HTML </a>
<a class="menu" href="…">Corso HTML</a>
</div>
</div>
...ANALOGO PER MENU2...
</div>
Tecnologie di Sviluppo per il WEB
22
Menu a discesa – 4
#barramenu { position:relative; height:1.5em; }
.titolo {
text-align:center; font-family:sans-serif;
font-size:125%; font-weight:bold;
padding:0px; border: solid 1px;
color:navy; background:#66CCCC;
position:absolute; top:0px; left:0px;
width:150px; height:1.2em;
}
Tecnologie di Sviluppo per il WEB
23
Menu a discesa – 5
#menu1 { position:absolute; top:0px; left:0px; }
#menu2 { position:absolute; top:0px; left:150px; }
.scelte { color:navy; background:#66CCCC;
border: solid 1px;
position:absolute; top:1.5em; left:0px;
width:150px; z-index:8; visibility:hidden; }
a.menu { text-decoration:none; display: block;
text-indent:0.5em; color:navy; font-family:sans-serif;
font-weight:bold; width:150px; }
a.menu:hover { background:navy; color:#66CCCC; }
Tecnologie di Sviluppo per il WEB
24
Menu a discesa – 6
function mostraMenu(menuID){
setVisibility("scelte"+menuID,"visible");
menuFocus("titolo"+menuID,"over");
}
function nascondiMenu(menuID){
setVisibility("scelte"+menuID,"hidden");
menuFocus("titolo"+menuID,"out");
}
Tecnologie di Sviluppo per il WEB
25
Menu a discesa – 7
function menuFocus(elementID,stato){
if (stato=='over'){
setCursor("pointer",elementID);
setColor(elementID,"#66CCCC");
setBackground(elementID,"navy"); }
else{
setCursor("auto",elementID);
setColor(elementID,"navy");
setBackground(elementID,"#66CCCC"); }
}
Tecnologie di Sviluppo per il WEB
26
Librerie per animazioni
 Esistono
varie librerie JavaScript che
possono essere utilizzate per animare
elementi in una pagina HTML
 Ad
esempio Scriptaculous
– http://script.aculo.us/
È
intuitiva e facile da usare
– Leggetevi i sorgenti...
Tecnologie di Sviluppo per il WEB
27
Utilizzo


Per implementare un effetto è sufficiente
creare un oggetto di tipo Effect ed applicare il
metodo che corrisponde all’effetto desiderato
Il metodo prende in input
– L’ID dell’elemento che vogliamo animare (oppure
this)
– Opzionalmente dei parametri aggiuntivi per
controllare vari aspetti dell'animazione
Tecnologie di Sviluppo per il WEB
28
Esempio
Applicazione dell’effetto Shake ad un elemento
con ID uguale a container
– onClick = "new Effect.Shake('container');"
– onClick = "new Effect.Shake('container',
{duration: 3.0});"
 Oppure
– <div onMouseOut="new Effect.Shake(this)">
………
</div>

ESEMPIO
Tecnologie di Sviluppo per il WEB
29
Altro tipo di menu
SPAN CLASS=titolo
DIV CLASS=riquadro
DIV CLASS=contenuto ID=c1
CODICE HTML
<div class="riquadro">
<span class="titolo" onMouseOver="over(this);"
onMouseOut="out(this);"
onClick="ApriChiudi('c1');">
TITOLO RIQUADRO </span>
<div style="display:none;" id="c1">
CONTENUTO
</div>
</div>
Tecnologie di Sviluppo per il WEB
31
CSS
.riquadro {
border: solid blue 1px;
position: relative;
width:70%; left:15%; right:15%;
margin-bottom:20px;
font-family:Arial, sans-serif; text-align:justify;
background:white; color:black;
}
.titolo {
font-family:Arial, sans-serif;
font-weight:bold;
padding:1px 3px 1px 3px;
border: solid 1px blue;
background:blue; color:white;
position: relative; top:-10px; left:10px;
}
Tecnologie di Sviluppo per il WEB
32
Codice Javascript
function out(elem) {
elem.style.color="white"; elem.style.background="blue";
elem.style.cursor="auto";
}
function over(elem) {
elem.style.color="blue"; elem.style.background="white";
elem.style.cursor="pointer";
}
function ApriChiudi(contenuto) {
elem=document.getElementById(contenuto);
if(elem.style.display=="none")
elem.style.display="block";
else
elem.style.display="none";
}
Esempio
Tecnologie di Sviluppo per il WEB
33
Menù sovrapposti
Esempio
Tecnologie di Sviluppo per il WEB
34
Menù sovrapposti
<DIV id="contenitoreMenu">
<div style="left: 0px; top: 0px; z-index:4;"
class="menu" id="menu1">
<ul><li> Link 1
<li> Link 2
<li> Link 3
</ul>
<span class="titolo"
onclick="mostra(this.parentNode.id)">
Titolo 1</span>
</div>
Tecnologie di Sviluppo per il WEB
35
Menù sovrapposti
<div style="left: 30px; top: 30px; z-index:3;"
class="menu" id="menu2">
<ul><li> Link 1
<li> Link 2
<li> Link 3
</ul>
<span class="titolo"
onclick="mostra(this.parentNode.id)">
Titolo 2</span>
</div>
Tecnologie di Sviluppo per il WEB
36
Menù sovrapposti
<div style="left: 60px; top: 60px; z-index:2;"
class="menu" id="menu3">
<ul><li> Link 1
<li> Link 2
<li> Link 3
</ul>
<span class="titolo"
onclick="mostra(this.parentNode.id)">
Titolo 3</span>
</div>
Tecnologie di Sviluppo per il WEB
37
Menù sovrapposti
<div style="left: 90px; top: 90px; z-index:1;"
class="menu" id="menu4">
<ul><li> Link 1
<li> Link 2
<li> Link 3
</ul>
<span class="titolo"
onclick="mostra(this.parentNode.id)">
Titolo 4</span>
</div>
</div>
Tecnologie di Sviluppo per il WEB
38
Menù sovrapposti: CSS
li {list-style:none;}
#contenitoreMenu { position:relative;
top:30px; left:30px;}
div.menu { position: absolute; width:150px; height:200px;
font-family:Arial, sans-serif; font-weight:bolder;
font-size:14pt; color: white;}
span.titolo { position: absolute; bottom:0px; left:0px;
right: 0px; width: 150px; height: 25px;
padding:1px; padding-left:5px; text-align:left;
color:black;}
span.titolo:hover { color: white; cursor: pointer; }
Tecnologie di Sviluppo per il WEB
39
Menù sovrapposti: Javascript
var menuAttivo = "menu1";
var ZIndexMenuAttivo = 4;
function mostra(menuClick ) {
var menu = document.getElementById(menuClick);
if (menuAttivo != menuClick) { // stringhe
var elem = document.getElementById(menuAttivo);
elem.style.zIndex = ZIndexMenuAttivo;
menuAttivo = menuClick;
ZIndexMenuAttivo = menu.style.zIndex;
menu.style.zIndex = "4";
}
}
Tecnologie di Sviluppo per il WEB
40
Possibile modifica: 1
L’oggetto
associato a
<span class="titolo"
SPAN ha il
onclick="mostra(this.parentNode.id)">
metodo mostra
Titolo 1</span>
sostituito da
<span class="titolo" onclick="mostra()">
Titolo 1</span>
------------------------------------------------------------------------function mostra(menuClick) {…}
sostituito da
function mostra() {
var menuClick = this.parentNode.id;
…}
Esempio
Tecnologie di Sviluppo per il WEB
41
Possibile modifica: 2 Registrazione eventi
<body onload= " registraEventiSpan();
settaStileMenu(4,0,0,30,30);">
function registraEventiSpan() {
var span =
document.getElementsByTagName("span");
var numSpan = span.length;
for(var i=0; i<numSpan; i++)
if(span[i].className == "titolo")
span[i].onclick = mostra;
}
Esempio
Tecnologie di Sviluppo per il WEB
42
Registrazione stile
function settaStileMenu(numMenu,
origineX, origineY, dx, dy) {
var posizioneX = origineX;
var posizioneY = origineY;
for(var i=1; i<=numMenu; i++) {
var div = document.getElementById("menu"+i);
div.style.zIndex = numMenu - i + 1;
div.style.left = posizioneX + "px";
div.style.top = posizioneY + "px";
posizioneX += dx;
posizioneY += dy;
}
}
Eliminiamo style="left: 0px; top: 0px; z-index:4;"
Tecnologie di Sviluppo per il WEB
43
Scambio menù
var menuAttivo = "menu1";
function mostra() {
var menuClick = this.parentNode.id;
if (menuAttivo != menuClick) {
tmpMenu = menuAttivo;
menuAttivo = menuClick;
var menu = document.getElementById(menuClick);
var zIndexMenuClick = menu.style.zIndex; //salviamo i dati
var leftMenuClick = menu.style.left;
//del menu su cui
var topMenuClick = menu.style.top;
//abbiamo cliccato
menu.style.zIndex = "4";
//spostiamo il menu su
menu.style.left = "0px";
//cui abbiamo cliccato
menu.style.top = "0px";
//come primo menu
Tecnologie di Sviluppo per il WEB
44
Scambio menù
// il menu che compariva al primo posto adesso deve comparire
// al posto di quello su cui abbiamo cliccato
var menuDaSpostare = document.getElementById(tmpMenu);
menuDaSpostare.style.zIndex = zIndexMenuClick;
menuDaSpostare.style.left = leftMenuClick;
menuDaSpostare.style.top = topMenuClick;
}
}
Tecnologie di Sviluppo per il WEB
45

Download Report