<html>
<head>
<script type="text/javascript">
var ns4 = (document.layers)? true:false
var ie4 = (document.all)? true:false
var ns6 = (document.getElementById)? true:false
var nivel = 1;
var PosElementoAlto = 0 ;
var Arr = [];
var info = {
captura_objeto : function(idnombre) {
if (ns6)
{
return document.getElementById(idnombre);
}
else if (ie4)
{
return document.all[idnombre];
}
else if (ns4)
{
return document.layers[idnombre];
}
else
{
return null;
}
},
Evento : function(elemento,nomevento,funcion) {
if (elemento.attachEvent)
{
var fct=function(){
funcion.call(elemento,window.event);
}
elemento.attachEvent('on'+nomevento,fct);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,false);
return true;
}
else
return false;
},
init: function(){
var ref = info.captura_objeto('lasLigas').getElementsByTagName('A');
for (var i = 0; i < ref.length; i++) {
var infodiv = info.captura_objeto('info_menu_'+ref[i].id);
if (document.Element || document.body) {
info.altura = infodiv.scrollHeight;
} else {
info.altura = infodiv.clientHeight;
}
infodiv.style.display = 'none';
infodiv.style.zIndex = 0;
info.Evento(ref[i], 'click', function() {info.efecto_largo(this.id)});
}
},
PosicionAbsolutaElemento: function(element) {
var window_height = parseInt(((screen.height) / 2) - info.altura);
var window_width = parseInt(((screen.width) / 2) - 150);
if (typeof element == "string")
element = info.captura_objeto(element)
if (!element) return { top:0,left:0 };
var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y, left:x, height:window_height, width: window_width};
},
efecto_largo: function(id){
if(info.captura_objeto('info_menu_'+id).style.display == 'none'){
clearInterval(info.intervalo);
info.despliega_largo(id);
info.abierto_largo = false;
//alert(info.abierto_largo);
}else{
clearInterval(info.intervalo);
info.recoge_largo(id);
info.abierto_largo = true;
//alert(info.abierto_largo);
}
},
despliega_largo: function(id){
Arr.unshift(id);
//alert(Arr);
for (var i = 0; i < Arr.length; i++) {
var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
var PosElemento = info.PosicionAbsolutaElemento(Arr[i]);
if (i == 0) {
PosElementoAlto = PosElemento.top;
infodiv.style.height = '1px';
infodiv.style.display = 'block';
infodiv.style.zIndex = nivel;
infodiv.style.left = parseInt(PosElemento.width) +'px';
infodiv.style.top = parseInt(PosElemento.height - PosElementoAlto) +'px';
info.intervalo = setInterval(function(){ info.redimenciona_largo(info.altura,id); }, 1);
nivel ++;
//alert(parseInt(PosElementoAlto))
} else {
var izq_arr = parseInt(20 * i)
infodiv.style.left = parseInt(PosElemento.width - izq_arr) +'px';
infodiv.style.top = parseInt((PosElemento.height) - (PosElementoAlto + izq_arr)) +'px';
}
}
},
recoge_largo: function(id){
//alert(id)
var infodiv = info.captura_objeto('info_menu_'+id);
var i, encaja;
for (i = 0; i < Arr.length; i++) {
if (Arr[i] == id) {
encaja = i;
break;
}
}
for (var j = 0; j < Arr.length; j++) {
if (j > encaja ) {
var infodiv2 = info.captura_objeto('info_menu_'+Arr[j]);
var PosElemento = info.PosicionAbsolutaElemento('info_menu_'+Arr[j]);
infodiv2.style.left = parseInt(PosElemento.left + 20) +'px';
infodiv2.style.top = parseInt(PosElemento.top + 20) +'px';
}
}
Arr.splice(encaja, 1);
infodiv.style.height = info.altura + 'px';
info.intervalo = setInterval(function(){ info.redimenciona_largo(0,id); }, 1);
},
redimenciona_largo: function(limite,id){
var infodiv = info.captura_objeto('info_menu_'+id);
inicial = parseInt(infodiv.style.height);
actual = Math.ceil((limite - inicial) / 4);
inicial += actual;
infodiv.style.height = inicial + 'px';
if (parseInt(inicial) >= (limite - 5) && parseInt(inicial) <= (limite + 5)) {
if (info.abierto_largo == false) {
infodiv.style.height = limite + 'px';
clearInterval(info.intervalo);
} else {
infodiv.style.height = '0px';
infodiv.style.display = 'none';
clearInterval(info.intervalo);
}
}
},
z_Index : function(id){
// RECOGER
var infodiv = info.captura_objeto('info_menu_'+id);
var i, encaja;
for (i = 0; i < Arr.length; i++) {
if (Arr[i] == id) {
encaja = i;
break;
}
}
//alert(encaja);
for (var j = 0; j < Arr.length; j++) {
if (j > encaja) {
var infodiv2 = info.captura_objeto('info_menu_'+Arr[j]);
var PosElemento = info.PosicionAbsolutaElemento('info_menu_'+Arr[j]);
infodiv2.style.left = parseInt(PosElemento.left + 20) +'px';
infodiv2.style.top = parseInt(PosElemento.top + 20) +'px';
}
}
Arr.splice(encaja, 1);
//MOSTRAR
Arr.unshift(id);
for (var i = 0; i < Arr.length; i++) {
var PosElemento = info.PosicionAbsolutaElemento(Arr[i]);
var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
//if (PosElemento.top == 0) PosElemento.top = 9;
if (i == 0) {
infodiv.style.zIndex = nivel;
infodiv.style.left = parseInt(PosElemento.width) +'px';
infodiv.style.top = parseInt(PosElemento.height - (PosElemento.top + PosElementoAlto)) +'px';
nivel ++;
//alert(parseInt(PosElementoAlto))
} else {
//var infodiv = info.captura_objeto('info_menu_'+Arr[i]);
var izq_arr = parseInt(20 * i)
infodiv.style.left = parseInt(PosElemento.width - izq_arr) +'px';
infodiv.style.top = parseInt(PosElemento.height - (PosElementoAlto + izq_arr)) +'px';
}
}
},
abierto_largo : true,
abierto_ancho : true
}
info.Evento(window, 'load', info.init);
function validaForm(f) {
var ok = f.campo1.value != "";
if (!ok) {
alert("El campo nombre no puede estar vacio")
return (false);
} else {
return (true);
}
}
</script>
</head>
<body>
<div id="lasLigas">
<a href="javascript:void(0);" id="1">APARTADO 1</a> ||
<a href="javascript:void(0);" id="2">APARTADO 2</a> ||
<a href="javascript:void(0);" id="3">APARTADO 3</a> ||
<a href="javascript:void(0);" id="4">APARTADO 4</a>
</div>
<FORM action="pagina.asp" method="get" onsubmit="return validaForm(this);">
<div id="info_menu_1" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(1)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(1)" title="Cierra">X</a></span>APARTADO 1<br /><br />
NOMBRE: <input type="text" value="" id="campo1" name="campo1" /><br />
APELLIDOS: <input type="text" value="" id="campo2" name="campo2" />
</div>
<div id="info_menu_2" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(2)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(2)" title="Cierra">X</a></span>APARTADO 2<br /><br />
ESTUDIOS: <input type="text" value="" id="campo3" name="campo3" /><br />
PROFESION: <input type="text" value="" id="campo4" name="campo4" />
</div>
<div id="info_menu_3" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(3)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(3)" title="Cierra">X</a></span>APARTADO 3<br /><br />
DOMICILIO: <input type="text" value="" id="campo5" name="campo5" /><br />
POBLACION: <input type="text" value="" id="campo6" name="campo6" />
</div>
<div id="info_menu_4" style="position:absolute; left:0px; top:0px; height:0px; width:400px; overflow:hidden; font:bold 10px Verdana, Helvetica, sans-serif; background-color:#FFFFFF; border: 1px solid #C9C9C9; border-width: 1px 1px 1px 1px;">
<span style="float:right;"><a href="#" onclick="info.z_Index(4)" title="Traer al Frente"><></a> || <a href="#" onclick="info.efecto_largo(4)" title="Cierra">X</a></span>APARTADO 4<br /><br />
ESTADO CIVIL: <br />
Casado <input type="radio" value="casado" id="campo7" name="campo7" /><br />
Soltero <input type="radio" value="soltero" id="campo7" name="campo7" />
</div>
<input type="submit" value="enviar" />
</FROM>
</body>
</html>
Formulario en Pestañas 
