Foros del Web » Programando para Internet » Jquery »

Bucle con Tabs JQUERY

Estas en el tema de Bucle con Tabs JQUERY en el foro de Jquery en Foros del Web. Buenas Noches foristas, veo k en equipo resuelven muchas dudas, espero la mia no sea una excepcion, bien pasa k uso tabs - ajax de ...
  #1 (permalink)  
Antiguo 27/06/2010, 20:34
Avatar de enricosh  
Fecha de Ingreso: junio-2010
Mensajes: 2
Antigüedad: 13 años, 9 meses
Puntos: 0
Busqueda Bucle con Tabs JQUERY

Buenas Noches foristas, veo k en equipo resuelven muchas dudas, espero la mia no sea una excepcion, bien pasa k uso tabs - ajax de jquery, hasta ahi facil, mi problema es ya cuando deseo crear un bucle repitiendo en cada una los tabs:

Registro 1:
Tab1, Tab2, Tab3

Registro 2:
Tab1, Tab2, Tab3

....

Me completa a la hora de llamar los eventos en el javascript. Alguien tiene un ejemplo con las caracteristicas que les mencione?, espero me puedan ayudar... gracias..

Este es el codigo:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tabs Demo</title>
<style type="text/css">
BODY {
margin: 20px;
padding: 20px;
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
#page {
margin: auto;
width: 500px;
}
UL.mytabs {
position: relative;
z-index: 2;
}
UL.mytabs, UL.mytabs LI {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
float: left;
padding: 7px;
border: 1px solid #CCCCCC;
border-bottom: 1px solid #E0E0E0;
background: #F0F0F0;
text-decoration: none;
color: #333333;
height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
background: #FFFFFF;
}
UL.mytabs LI.current A {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
position: relative;
z-index: 1;
clear: both;
border: 1px solid #E0E0E0;
padding: 10px;
top: -1px;
}

</style>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//for(var i = 0; i <= 1; i++) {
var containerId = '#tabs-container';
//var containerId = '#tabs-container+i';
//}
var tabsId = '#tabs';


$(document).ready(function(){
// Preload tab on page load
if($(tabsId + ' LI.current A').length > 0){
loadTab($(tabsId + ' LI.current A'));
}

$(tabsId + ' A').click(function(){
if($(this).parent().hasClass('current')){ return false; }

$(tabsId + ' LI.current').removeClass('current');
$(this).parent().addClass('current');

loadTab($(this));
return false;
});
});

function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');

$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
}
</script>
</head>
<body>
<div id="page">
<? for($i=0; $i<=1; $i++){

echo "<ul class='mytabs' id='tabs'>";
//echo "<li class='current'><a id='more".$i."' href='./tabs/tab-1.html'>More</a></li>";
//echo "<li><a id='photos".$i."' href='./tabs/tab-2.html'>Photos</a></li>";
//echo "<li><a id='map".$i."' href='./tabs/tab-3.html'>Map</a></li>";
echo "<li class='current'><a href='./tabs/tab-1.html'>More</a></li>";
echo "<li><a href='./tabs/tab-2.html'>Photos</a></li>";
echo "<li><a href='./tabs/tab-3.html'>Map</a></li>";
echo "</ul>";
echo "<div class='mytabs-container' id='tabs-container'>";
echo "Loading. Please Wait...";
echo "</div>";
}
?>
</div>
</body>
</html>

Última edición por enricosh; 27/06/2010 a las 20:49
  #2 (permalink)  
Antiguo 28/06/2010, 01:53
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Tema movido desde Ajax
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: bucles, tabs
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:40.