 |
Andrés Fernández |
 |
23/8/2008 |
 |
466 |
 |
0 |
 |
|
 |
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Con un poco de css y javascript podemos crear cajas que se expandan o colapsen de manera gradual, como las de este ejemplo.
La mayor parte del código tiene que ver con el registro de eventos para prevenir memory leaks en explorer 6 ó -. Lo verdaderamente relevante es el registro de la propiedad overflow de las capas a expandir cuando carga la página, ya que usaremos esa propiedad para determinar en qué momento detendremos la ejecución de la función que incrementa el estilo height de dichas capas. El mecanismo es el siguiente:
1)cuando carga la página, se registra la altura máxima a la que deben llegar las capas expansibles
2)se fuerza el height de esas capas a 0px luego de hacer ese registro.
3)se le asigna al evento click de los títulos de los boxes una función de incremento o decremento de altura de la capa expansible que le corresponde a dicho título. La función mencionada es llamada secuencialmente con un temporizador (setInterval) hasta que la altura es igual a la que registramos al cargar la página (altura máxima del elemento) o hasta que la altura es igual a cero.
El código del ejemplo es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style>
.titulo{ background-color:#CCC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold; padding:5px; cursor:pointer;border:1px solid #CCC}
.contenido{
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; padding:0; overflow:hidden; padding:0 5px; 0 5px; margin:5px 0 5px 0;}
#container{visibility:hidden;}
.box{ border:1px solid #FFF; margin:3px 0 3px 0;}
</style>
<script>
function $(id){return document.getElementById(id);}
function getElementsByClassName(rel){
var col=[];
var tCol=document.getElementsByTagName('*');
for(var ii=0;ii<tCol.length;ii++)
if(tCol[ii].className==rel)
col.push(tCol[ii])
return col;
}
var EvRegister=[];
function addEvent(obj, evType, fn, useCapture){
if(obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
}else if(obj.attachEvent){
obj.attachEvent("on"+evType, fn);
}else{
obj['on'+evType]=fn;
}
var ev={_obj:obj,_evType:evType,_fn:fn,_useCapture:useCapture};
EvRegister.push(ev);
}
function removeEvent(obj, evType, fn, useCapture){
if (obj.removeEventListener){
obj.removeEventListener(evType, fn, useCapture);
} else if (obj.detachEvent){
obj.detachEvent("on"+evType, fn);
} else {
obj['on'+evType]=function(){};
}
var ii,l;
for ( ii= 0, l=EvRegister.length; ii < l ; ii++) {
if (EvRegister[ii]._evType== evType && EvRegister[ii]._obj==obj && EvRegister[ii]._fn==fn && EvRegister[ii]._useCapture==useCapture) {
EvRegister.splice(ii, 1);
break;
}
}
}
function unregisterAllEvents() {
while (EvRegister.length > 0) {
removeEvent(EvRegister[0]._obj,EvRegister[0]._evType,EvRegister[0]._fn,EvRegister[0]._useCapture);
}
}
function efecto(e){
var e=e || window.event;
var obj=e.srcElement || e.target;
var obj2=obj.parentNode.getElementsByTagName('div')[1];
if(obj2.intervalo)return;
if(parseInt(obj2.style.height)<obj2.fin){
obj.style.borderColor='#CCC';
obj.parentNode.style.borderColor='#CCC';
obj2.style.height='1px';
obj2.intervalo=setInterval(function(){obj2.style.height=parseInt(obj2.style.height)+2+'px';if(parseInt(obj2.style.height)>=obj2.fin){clearInterval(obj2.intervalo);obj2.intervalo=null;}},5);
}else{
obj2.style.height=obj2.fin+'px';
obj2.intervalo=setInterval(function(){obj2.style.height=parseInt(obj2.style.height)-2+'px';if(parseInt(obj2.style.height)<=1){clearInterval(obj2.intervalo);obj2.intervalo=null;obj.parentNode.style.borderColor='#FFF';obj.style.border='1px solid #CCC';}},5);
}
}
window.onload=function(){
var bots=getElementsByClassName('titulo');
for(var ii=0;ii<bots.length;ii++){
addEvent(bots[ii], 'click', efecto, false);
bots[ii].parentNode.getElementsByTagName('div')[1].fin=bots[ii].parentNode.getElementsByTagName('div')[1].offsetHeight;
bots[ii].parentNode.getElementsByTagName('div')[1].style.height=0;
}
$('container').style.visibility='visible';
}
window.onunload=function(){
unregisterAllEvents();
var bots=getElementsByClassName('titulo');
for(var ii=0;ii<bots.length;ii++){
bots[ii].parentNode.getElementsByTagName('div')[1].fin=null;
}
}
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="titulo">Título</div>
<div class="contenido">Lorem Ipsum is simply dummy text of the printing typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div>
<div class="box">
<div class="titulo">Título</div>
<div class="contenido">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div></div>
</div>
</body>
</html>
|
|
|
volver |
|
|
|
|
