pestañas dinámicas usando jquery

[Dosjota]

encontré este tutorial http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx lo único, que no he podido cargar contenido de otra pagina, si alguien me pudiese ayudar, encantado! gracias!

[Mr. Crowley]

Que tal si le coloca la ruta de la pagina al enlace?? En lugar de # le coloca mipagina.html o lo que sea.

Con JQuery debe bloquear el comportamiento normal del enlace con preventdefault, toma el contenido del href y lo carga con $('micapa').load('mipagina.html');

Saludo

[Dosjota]

no aun no puedo el código es este...

Código (javascript) [Seleccionar] Expandir


$(document).ready(function() {
$("#documents a").click(function() {
addTab($(this));
});

$('#tabs a.tab').live('click', function() {
var contentname = $(this).attr("id") + "_content";

$("#content p").hide();
$("#tabs li").removeClass("current");

$("#" + contentname).show();
$(this).parent().addClass("current");
});

$('#tabs a.remove').live('click', function() {

var tabid = $(this).parent().find(".tab").attr("id");

var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();

if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {

var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");

var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
});
});
function addTab(link) {
if ($("#" + $(link).attr("rel")).length != 0)
return;

$("#tabs li").removeClass("current");
$("#content p").hide();

$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'><img src='css/img/x.png' /></a></li>");

               // aqui carga el contenido, extrayendo el atributo titulo como contenido de la pestaña correspondiente
$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
$(link).attr("title") + "</p>");

$("#" + $(link).attr("rel") + "_content").show();
}


Código (html4strict) [Seleccionar] Expandir


<div class="menu">
<ul id="documents">
<li id="btn_menu"><a href="#" rel="uno" title="uno, uno, uno">pestaña uno</a></li>
<li id="btn_menu"><a href="#" rel="dos" title="dos, dos, dos">pestaña dos</a></li>
<li id="btn_menu"><a href="#" rel="tres" title="tres, tres, tres">pestaña tres</a></li>
<li id="btn_menu"><a href="#" rel="cuatro" title="cuatro, cuatro, cuatro">cuatro</a></li>
<li id="btn_menu"><a href="#" rel="cinco" title="cinco, cinco, cinco"> pestaña cinco</a></li>
</ul>
</div>
<div class="cuerpo">
<ul id="tabs">
</ul>
<div id="content">

</div>



al poner la pagina de destino en href me carga completa, declarando event.preventDefault(); previamente

[Mr. Crowley]

Hola, copie el codigo del tutorial pero por alguna razon me da un error y no cierra el tab que se crea... El asunto es que si me funciono el cambio que hice. Espero le sirva.

Ejemplo de los tabs (donde dice hola.html, nada.html los reemplaza por sus paginas):

Código [Seleccionar] Expandir


       <ul id="documents">
           <li><a href="hola.html" rel="Document1" title="This is the content of Document1">Document1</a></li>
           <li><a href="nada.html" rel="Document2" title="This is the content of Document2">Document2</a></li>
       </ul>


Recuerde que debe utilizar unicamente paginas alojadas en el mismo server... Osea, no puede decirle al metodo load que le cargue elhacker.net, etc.

La parte de JQuery quedaria asi (unicamente pongo las secciones que modifique):

Código [Seleccionar] Expandir


           $("#documents a").click(function(event) {
            event.preventDefault();
               addTab($(this));
           });


La parte que dice:

Código [Seleccionar] Expandir


$("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
               $(link).attr("title") + "</p>");


La reemplaza por esto (edito, este codigo corresponde a la funcion addTab):

Código [Seleccionar] Expandir


$("#content").load($(link).attr("href"));


Bueno mi estimado, cualquier cosa me avisa. Saludos.

[Dosjota]

si, algo asi, pero, la pagina cargada queda visible en todas las demás pestañas y claro, no se cierra el contenido al cerrar la pestaña