Pestañas con contenido ya cargado antes de visualizarlas.

IMAC/ · #1 (**permalink**) 19/10/2008, 05:10

Buenas

Quiero hace un sistema de pestañas donde el contenido de cada pestaña esté ya cargado desde un comienzo, de modo que para pasar de una pestaña a otra la página no tenga que recargar nada, simplemente dejar mostrarlo.
De este modo se facilitaría la navegación, y visto que no tengo problemas de transferencia de datos, no me importa cargar toda la información a priori.

Para que os hagáis una idea más gráfica, algo parecido a lo que tiene esta web en el margen derecho donde dice "Top 10", "lo + votado", "lo + leido"...etc.
http://www.applesfera.com/

Supongo que es javascript, pero mirando el código no he conseguido sacar nada.

Gracias de antemano.

ZiTAL · #2 (**permalink**) 19/10/2008, 06:13

el truco esta en jugar con la visibilidad, ocultas todos y muestras la pestaña que quieras. Se puede hacer tanto añadiendo quitando clases mediante javascript, como aplicando los estilos directamente desde javascript.

jaspito · #3 (**permalink**) 19/10/2008, 06:27

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.

IMAC/ · #4 (**permalink**) 19/10/2008, 11:14

Gracias por las respuestas, pero agradecería algo más preciso, puesto que no ando muy bien con javascript.

Respecto a tu código jaspito, pues a mi no me funciona tal y como me lo has puesto.
He sustituido el contenido de los iframes para probar, pero lo único que hace es cargar un iframe tras otro en una página. Pero vamos, nada de pestañas :)