Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Tab y subtab con ajax

Estas en el tema de Tab y subtab con ajax en el foro de Frameworks JS en Foros del Web. Quisiera poner en un sitio noticias generadas por otros sitios en xml. Para esso quiero crear tabs con lo siguiente Actualidad | Deportes | Mundo ...
  #1 (permalink)  
Antiguo 12/10/2009, 11:57
 
Fecha de Ingreso: septiembre-2009
Mensajes: 108
Antigüedad: 14 años, 7 meses
Puntos: 1
Tab y subtab con ajax

Quisiera poner en un sitio noticias generadas por otros sitios en xml.
Para esso quiero crear tabs con lo siguiente

Actualidad | Deportes | Mundo | Tecnologia |


y dentro de estos poder poner otros tabs

Pagina 1 | Pagina 2 | Pagina 3 |
Estas estarian dentro de cada Categoria Primaria, y cuando el usuario elija q noticia ver recian ahi pedir los datos del xml

Lo tengo echo con css y javascript, pero esto me genera q carguen todos los xml q hay y no los q el usuario elije.

adjunto Foto

hxxp://s4.subirimagenes.com/otros/previo/thump_3366458noti.jpg

Tambien tengo algo q encontre en la red, pero no me deja la opcion de las sub categorias o subtabs.

ahahLib.js
function callAHAH(url, pageElement, callMessage, errorMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
req = false;
}
}
}
req.onreadystatechange = function() {responseAHAH(pageElement, errorMessage);};
req.open("GET",url,true);
req.send(null);
}

function responseAHAH(pageElement, errorMessage) {
var output = '';
if(req.readyState == 4) {
if(req.status == 200) {
output = req.responseText;
document.getElementById(pageElement).innerHTML = output;
} else {
document.getElementById(pageElement).innerHTML = errorMessage+"\n"+output;
}
}
}


<script language="JavaScript" type="text/javascript" src="ahahLib.js"></script>
<script language="JavaScript" type="text/javascript">
function makeactive(tab) {
document.getElementById("tab1").className = "";
document.getElementById("tab2").className = "";
document.getElementById("tab3").className = "";
document.getElementById("tab4").className = "";
document.getElementById("tab5").className = "";
document.getElementById("tab6").className = "";
document.getElementById("tab"+tab).className = "active";
callAHAH('contenido.php?content= '+tab, 'content', 'getting content for tab '+tab+'. Wait...', 'Error');
}
</script>
<style type="text/css">
pre {text-indent: 30px}
#tabmenu { color: #000; border-bottom: 1px solid black; margin: 12px 0px 0px 0px; padding: 0px; z-index: 1; padding-left: 10px }
#tabmenu li { display: inline; overflow: hidden; list-style-type: none; }
#tabmenu a, a.active { color: #aaaaaa; background: #295229;font: normal 1em verdana, Arial, sans-serif; border: 1px solid black; padding: 2px 5px 0px 5px; margin: 0px; text-decoration: none;cursor:hand; }
#tabmenu a.active { background: #ffffff; border-bottom: 3px solid #ffffff; }
#tabmenu a:hover { color: #fff; background: #ADC09F; }
#tabmenu a:visited { color: #E8E9BE; }
#tabmenu a.active:hover { background: #ffffff; color: #DEDECF; }
#content {font: 0.9em/1.3em verdana, sans-serif; text-align: justify; background: #ffffff; padding: 20px; border: 1px solid black; border-top: none; z-index: 2; }
#content a { text-decoration: none; color: #E8E9BE; }
#content a:hover { background: #aaaaaa; }

</style>
<head>

<ul id="tabmenu" >
<li onclick="makeactive(1)"><a class="" id="tab1">First Page</a></li>
<li onclick="makeactive(2)"><a class="" id="tab2">Second Page</a></li>
<li onclick="makeactive(3)"><a class="" id="tab3">Third Page</a></li>
<li onclick="makeactive(4)"><a class="" id="tab4">Third Page</a></li>
<li onclick="makeactive(5)"><a class="" id="tab5">Third Page</a></li>
<li onclick="makeactive(6)"><a class="" id="tab6">Third Page</a></li>
</ul>
<div id="content"></div>


content.php
if ($_GET['content'] == 1) {
echo 'Content for Page 1';
}

if ($_GET['content'] == 2) {
echo 'Content for Page 2';
}

if ($_GET['content'] == 3) {
echo 'Content For Page 3';
}

Alguien puede darme una mano

Gracias

Última edición por davchi; 12/10/2009 a las 12:04
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 18:45.