19/10/2008, 06:27
|
 | | | Fecha de Ingreso: agosto-2007
Mensajes: 34
Antigüedad: 16 años, 9 meses Puntos: 0 | |
| Respuesta: Pestañas con contenido ya cargado antes de visualizarlas.
Hola compañero aqui te paso un codigo que ami me funciona bastante bien!
Código:
<?php
includes....
?>
<head>
<script language="javascript" type="text/javascript">
/*
Cambia las variables que aparecen a continuacion para adaptar el aspecto visual de las pestañas
*/
var rows = new Array;
var num_rows = 2; //numero de filas
var top = 2; //posicion de las pestañas con respecto al borde superior
//OJO, si cambia, hay que cambiar tambien el atributo top de tab-body del CSS
var left = 2; //posicion de las pestañas con respecto al borde izquierdo
var width = 585; //anchura
var tab_off = "#e0e0e0"; //color pestaña no seleccionada
var tab_on = "silver"; //color pestaña seleccionada
// ¡¡ no edites o cambies esta linea !!
for ( var x = 1; x <= num_rows; x++ ) { rows[x] = new Array; }
/*
Define tantas filas como quieras en el bloque a continuacion.
Observa que cada fila debe corresponderse con una etiqueta "DIV"
en el codigo HTML, y que esta etiqueta debe tener como identificador
T seguido de los numeros que indican fila y columna
Por ejemplo: row[1][5] necesita un div con un id igual a "T15"
Observar los ejemplos que se muestran en los comentarios:
*/
rows[1][1] = "<? echo __('provincias');?>"; // Requiere: <div id="T11" class="tab-body"> ... </div>
rows[1][2] = "<? echo __('comarcas');?>"; // Requiere: <div id="T12" class="tab-body"> ... </div>
rows[1][3] = "<? echo __('poblaciones');?>"; // Requiere: <div id="T13" class="tab-body"> ... </div>
rows[1][4] = "<? echo __('partidas');?>"; // Requiere: <div id="T14" class="tab-body"> ... </div>
/* No cambies nada a partir de aqui */
var NS4 = (document.layers) ? 1 : 0;
var IE = (document.all) ? 1 : 0;
var DOM = 0;
if (parseInt(navigator.appVersion) >=5) {DOM=1};
var lastHeader;
var currShow;
function changeCont(tgt,header) {
target=('T' +tgt);
if (DOM) {
// Esconde el ultimo y cambia el color de la pestaña al valor original
currShow.style.visibility="hidden";
if ( lastHeader ) {
lastHeader.style.background = tab_off;
lastHeader.style.fontWeight="normal";
}
// Muestra este y cambia el color de la pestaña a color de seleccionada
var flipOn = document.getElementById(target);
flipOn.style.visibility="visible";
var thisTab = document.getElementById(header);
thisTab.style.background = tab_on;
thisTab.style.fontWeight = "bold";
// Guarda para la proxima vez
currShow=document.getElementById(target);
lastHeader = document.getElementById(header);
return false;
}
else if (IE) {
// Esconde el ultimo y cambia el color de la pestaña al valor original
currShow.style.visibility = 'hidden';
if (lastHeader) {
lastHeader.style.background = tab_off;
lastHeader.style.fontWeight="normal";
}
// Muestra este y cambia el color de la pestaña a color de seleccionada
document.all[target].style.visibility = 'visible';
document.all[header].style.background = tab_on;
document.all[header].style.fontWeight = 'bold';
// Guarda para la proxima vez
currShow=document.all[target];
lastHeader=document.all[header];
return false;
}
else if (NS4) {
// Esconde el ultimo y cambia el color de la pestaña al valor original
currShow.visibility = 'hide';
// if (lastHeader) { lastHeader.bgColor = tab_off; }
// Muestra este y cambia el color de la pestaña a color de seleccionada
document.layers[target].visibility = 'show';
// document.layers[header].bgColor = tab_on;
// Guarda para la proxima vez
currShow=document.layers[target];
// lastHeader=document.layers[header];
return false;
}
// && (version >=4)
else {
window.location=('#A' +target);
return true;
}
}
function DrawTabs() {
var output = '';
for ( var x = 1; x <= num_rows; x++ ) {
if( x > 1 ) {
top = top + 20;
left = left - 15;
width = width + 15;
}
output += '<div id="tabstop" style="position:absolute; ';
output += 'left:' + left + 'px;';
output += 'top:' + top + 'px; ';
output += 'width:' + width + 'px; z-index:1;">\n';
output += '<table border="0" cellpadding="0" cellspacing="1">\n';
output += '<tr valign="top">\n';
for ( var z = 1; z < rows[x].length; z++ ) {
var tid = "tab" + x + z;
var did = x + z;
output += '<td id="' + tid +'" class="tab-button"><a class="menuEncima" href="#" onClick="changeCont(\'' + x + z + '\', \'' + tid + '\'); return false;" onFocus="if(this.blur)this.blur()">' + rows[x][z] + '</a></td>\n';
}
output += '</tr>\n';
output += '</table>\n';
output += '</div>\n\n';
}
self.document.write(output);
}
function IniciaTabs() {
if (DOM) { currShow=document.getElementById('T11');}
else if (IE) { currShow=document.all['T11'];}
else if (NS4) { currShow=document.layers["T11"];};
changeCont("11", "tab11");
}
window.onload = IniciaTabs;
if (document.captureEvents) { //N4 requiere invocar la funcion captureEvents
document.captureEvents(Event.LOAD)
}
</script>
<style type="text/css">
<!--
a.menuEncima:hover{
color: #FF0000;
}
-->
</style>
</head>
<body id='admin2'>
<script type="text/javascript" language="javascript"> DrawTabs(); </script>
<div id="T11" class="tab-body">
<iframe src="verProvincias.php" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
</div>
<div id="T12" class="tab-body">
<iframe src="verComarcas.php" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
</div>
<div id="T13" class="tab-body">
<iframe src="verPoblaciones.php" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
</div>
<div id="T14" class="tab-body">
<iframe src="verPartidas.php" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
</div>
</body>
Espero que a ti tambien.
Un saludo. |