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>
