| ||||
|
|
|
|
|
|
| |||
|
| |||
| ||||
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5
Falso combo (V)
por Luciano Moreno, del departamento de diseño web de BJSParaRed.
Cierre automático.-
Ya tenemos casi listo nuestro falso combo, aunque nos falta un íltimo detalle importante: cerrar la cortinilla cuando el usuario pinche fuera del combo. Efectivamente, éste es un efecto propio de los combos estándar, cuya finalidad es que un combo no permanezca indefinidamente abierto si el usuario no selecciona alguna opción.
Vamos a simular pués dicho mecanismo, para lo cual capturaremos el evento click en el cuerpo del documento, llamando con él a una función que oculte la cortinilla en caso de que está abierta, poniendo a cero el contador de estado.
La forma de capturar el evento click en el documento es diferente para cada navegador, siendo directa en el caso de Internet Explorer, pero teniendo que activarla mediante código específico JavaScript de forma diferente en las versiones 4x y 6x de Netscape Navigator.
El código final del falso combo es el siguiente (lo nuevo, en azul):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<html>
<head>
<title>HTMLWeb - WebScript - Formularios - Falso combo
(V)</title>
<style type="text/css">
.comboCaja{background-color:#4c4c4c;layer-background-color:#4c4c4c;position:relative;width:100px;height:16px;clip:rect(0,100,16,0);z-index:1;}
.fondoCaja{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:14px;clip:rect(0,98,14,0);position:absolute;left:1px;top:1px;z-index:5;}
.flechaCaja{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:16px;height:14px;clip:rect(0,16,14,0);position:absolute;left:82px;top:1px;z-index:5;margin-left:1px;padding-left:1px;}
.faldaCaja{background-color:#4c4c4c;layer-background-color:#4c4c4c;width:100px;height:70px;clip:rect(0,100,70,0);position:absolute;top:16px;left:0px;z-index:10;visibility:hidden;}
.fondofaldaCaja{background-color:#FFFFFF;layer-background-color:#FFFFFF;width:98px;height:69px;clip:rect(0,98,69,0);position:absolute;top:0px;left:1px;z-index:10;padding-top:4px;}
</style>
<script language="JavaScript"
type="text/javascript">
if(document.layers)
{
document.write("<link rel='stylesheet' type='text/css'
href='css/estilos_nc_2.css'>");
}
else
{
document.write("<link
rel='stylesheet' type='text/css'
href='css/estilos_2.css'>");
}
var
permiso=false;
var
estado=false;
function
cambia(id)
{
if
(estado==false)
{
if (document.layers)
{
document.layers['seleccion1'].height="86";
document.layers['seleccion1'].clip.bottom="86";
document.seleccion1.document.layers[id].visibility =
"show";
}
else if (document.all)
document.all[id].style.visibility =
"visible";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"visible";
}
else
{
if
(document.layers)
{
document.layers['seleccion1'].height="16";
document.layers['seleccion1'].clip.bottom="16";
document.seleccion1.document.layers[id].visibility =
"hide";
}
else if (document.all)
document.all[id].style.visibility =
"hidden";
else
if(document.getElementById)
document.getElementById(id).style.visibility =
"hidden";
}
estado=(!estado)
setTimeout("permiso=false",500);
}
function cambiavalor(caja,
cadena)
{
if(document.all)
{
eval("document.all('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
else
if(document.layers)
{
with
(document.seleccion1.document.layers['fondocaja1'])
{
document.open();
document.write("<span
class='lista'>"+cadena+"</span>");
document.close();
eval("cambia('falda"+caja+"')");
}
document.forms.miform.combo1.value=cadena;
}
else
if(document.getElementById)
{
eval("document.getElementById('fondocaja"+caja+"').innerHTML='<span
class=lista>"+cadena+"</span>'");
eval("cambia('falda"+caja+"')");
document.forms.miform.combo1.value=cadena;
}
}
function
colores(celda,a)
{
var
strN=celda.substring(5,7);
if(document.all)
{
if(a==0)
{
document.all[celda].style.background='#663399';
eval("document.all['link"+strN+"'].className='linkOn'");
}
else
if(a==1)
{
eval("document.all['link"+strN+"'].className='linkOff'");
document.all[celda].style.background='white';
}
}
if(document.getElementById)
{
if(a==0)
{
document.getElementById(celda).style.background='#663399';
eval("document.getElementById('link"+strN+"').className='linkOn'");
}
else
if(a==1)
{
document.getElementById(celda).style.background='white';
eval("document.getElementById('link"+strN+"').className='linkOff'");
}
}
}
function oculta()
{
if
(permiso==false)
{
if(document.all)
document.all('falda1').style.visibility="hidden";
else
if(document.getElementById)
document.getElementById('falda1').style.visibility="hidden";
else
if(document.layers)
{
document.layers['seleccion1'].height="16";
document.layers['seleccion1'].clip.bottom="16";
document.seleccion1.document.layers['falda1'].visibility =
"hide";
}
}
}
function
inicializa(e)
{
if((document.getElementById) &&
(!document.all))
document.addEventListener("click", oculta, false);
}
</script>
</head>
<body
bgcolor="#ffff99" onclick="oculta()"
onload="inicializa()">
<form name="miform" action="laquesea"
method="post">
<input type="hidden" name="combo1"
value="seleccione">
<div id="seleccion1"
class="comboCaja">
<div id="fondocaja1"
class="fondoCaja"><span
class="lista">seleccione</span></div>
<div
id="flechaCapa" class="flechaCaja"><a href=
"#"onclick="permiso=true;cambia('falda1')"><img name="flecha1"
src="images/flecha.gif" width="15" height="14" border="0"
alt="flecha"></a></div>
<div id="falda1" class="faldaCaja">
<div id="fondofalda1"
class="fondofaldaCaja">
<layer
name="fondoLayer1" onmouseout="oculta();">
<table cellpadding="0" cellspacing="0" border="0"
width="100%">
<tr>
<td
id="celda10" width="100%" onmouseover="colores('celda10',0);"
onmouseout="colores('celda10',1);" onclick="cambiavalor('1','seleccione');return
false;"><layer bgcolor="red" width="100"
onmouseover="oscura('celda10',1);" onmouseout="oscura('celda10',0)"><a
id="link10" href="#" onclick="cambiavalor('1','seleccione');return false"
class="linkOff">seleccione</a></layer></td>
</tr>
<tr>
<td
id="celda11" width="100%" onmouseover="colores('celda11',0);"
onmouseout="colores('celda11',1);" onclick="cambiavalor('1','uno');return
false;"><layer bgcolor="red" width="100"
onmouseover="oscura('celda11',1);" onmouseout="oscura('celda11',0)"><a
id="link11" href="#" onclick="cambiavalor('1','uno');return false;"
class="linkOff">uno</a></layer></td>
</tr>
<tr>
<td
id="celda12" width="100%" onmouseover="colores('celda12',0);"
onmouseout="colores('celda12',1);" onclick="cambiavalor('1','dos');return
false;"><layer bgcolor="red" width="100"
onmouseover="oscura('celda12',1);" onmouseout="oscura('celda12',0)"><a
id="link12" href="#" onclick="cambiavalor('1','dos');return false;"
class="linkOff">dos</a></layer></td>
</tr>
<tr>
<td
id="celda13" width="100%" onmouseover="colores('celda13',0);"
onmouseout="colores('celda13',1);" onclick="cambiavalor('1','tres');return
false;"><layer bgcolor="red" width="100"
onmouseover="oscura('celda13',1);" onmouseout="oscura('celda13',0)"><a
id="link13" href="#" onclick="cambiavalor('1','tres');return false"
class="linkOff">tres</a></layer></td>
</tr>
</table>
</layer>
</div>
</div>
</div>
<br><br><br><br>
<a
href="#" onclick="alert(document.forms.miform.combo1.value);return
false;">valor
campo</a>
</form>
</body>
</html>
El resultado final lo tenéis en esta ventana.
Y aquí, un zip con los diversos ficheros del falso combo.
 |
Home - HTMLWebScript - Formularios - Falso combo - 1 - 2 - 3 - 4 - 5