elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  pestañas dinámicas usando jquery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: pestañas dinámicas usando jquery  (Leído 5,558 veces)
Dosjota

Desconectado Desconectado

Mensajes: 190


Mas Chileno que los porotos con longaniza...


Ver Perfil
pestañas dinámicas usando jquery
« en: 1 Agosto 2010, 20:45 pm »

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!


En línea

Mr. Crowley


Desconectado Desconectado

Mensajes: 343


Costa Rica


Ver Perfil WWW
Re: pestañas dinámicas usando jquery
« Respuesta #1 en: 3 Agosto 2010, 21:04 pm »

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


En línea

Mi blog personal: www.calirojas.com
Dosjota

Desconectado Desconectado

Mensajes: 190


Mas Chileno que los porotos con longaniza...


Ver Perfil
Re: pestañas dinámicas usando jquery
« Respuesta #2 en: 4 Agosto 2010, 04:30 am »

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

Código
  1. $(document).ready(function() {
  2. $("#documents a").click(function() {
  3. addTab($(this));
  4. });
  5.  
  6. $('#tabs a.tab').live('click', function() {
  7. var contentname = $(this).attr("id") + "_content";
  8.  
  9. $("#content p").hide();
  10. $("#tabs li").removeClass("current");
  11.  
  12. $("#" + contentname).show();
  13. $(this).parent().addClass("current");
  14. });
  15.  
  16. $('#tabs a.remove').live('click', function() {
  17.  
  18. var tabid = $(this).parent().find(".tab").attr("id");
  19.  
  20. var contentname = tabid + "_content";
  21. $("#" + contentname).remove();
  22. $(this).parent().remove();
  23.  
  24. if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
  25.  
  26. var firsttab = $("#tabs li:first-child");
  27. firsttab.addClass("current");
  28.  
  29. var firsttabid = $(firsttab).find("a.tab").attr("id");
  30. $("#" + firsttabid + "_content").show();
  31. }
  32. });
  33. });
  34. function addTab(link) {
  35. if ($("#" + $(link).attr("rel")).length != 0)
  36. return;
  37.  
  38. $("#tabs li").removeClass("current");
  39. $("#content p").hide();
  40.  
  41. $("#tabs").append("<li class='current'><a class='tab' id='" +
  42. $(link).attr("rel") + "' href='#'>" + $(link).html() +
  43. "</a><a href='#' class='remove'><img src='css/img/x.png' /></a></li>");
  44.  
  45.               // aqui carga el contenido, extrayendo el atributo titulo como contenido de la pestaña correspondiente
  46. $("#content").append("<p id='" + $(link).attr("rel") + "_content'>" +
  47. $(link).attr("title") + "</p>");
  48.  
  49. $("#" + $(link).attr("rel") + "_content").show();
  50. }
  51.  
Código
  1. <div class="menu">
  2. <ul id="documents">
  3. <li id="btn_menu"><a href="#" rel="uno" title="uno, uno, uno">pestaña uno</a></li>
  4. <li id="btn_menu"><a href="#" rel="dos" title="dos, dos, dos">pestaña dos</a></li>
  5. <li id="btn_menu"><a href="#" rel="tres" title="tres, tres, tres">pestaña tres</a></li>
  6. <li id="btn_menu"><a href="#" rel="cuatro" title="cuatro, cuatro, cuatro">cuatro</a></li>
  7. <li id="btn_menu"><a href="#" rel="cinco" title="cinco, cinco, cinco"> pestaña cinco</a></li>
  8. </ul>
  9. </div>
  10. <div class="cuerpo">
  11. <ul id="tabs">
  12. </ul>
  13. <div id="content">
  14.  
  15. </div>
  16.  


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

Mr. Crowley


Desconectado Desconectado

Mensajes: 343


Costa Rica


Ver Perfil WWW
Re: pestañas dinámicas usando jquery
« Respuesta #3 en: 4 Agosto 2010, 04:54 am »

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:
        <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:
            $("#documents a").click(function(event) {
             event.preventDefault();
                addTab($(this));
            });

La parte que dice:
Código:
$("#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:
$("#content").load($(link).attr("href"));

Bueno mi estimado, cualquier cosa me avisa. Saludos.
« Última modificación: 4 Agosto 2010, 04:56 am por Mr. Crowley » En línea

Mi blog personal: www.calirojas.com
Dosjota

Desconectado Desconectado

Mensajes: 190


Mas Chileno que los porotos con longaniza...


Ver Perfil
Re: pestañas dinámicas usando jquery
« Respuesta #4 en: 4 Agosto 2010, 06:01 am »

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
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
FEATURED Slideshow en wordpress usando JS o Jquery?
Desarrollo Web
XXXXXX 2 4,277 Último mensaje 27 Enero 2011, 16:10 pm
por XXXXXX
Combinar consultas dinámicas jQuery <Fácil>
Desarrollo Web
the_sheriff_pino 0 2,560 Último mensaje 9 Mayo 2013, 13:01 pm
por the_sheriff_pino
[Resuelto] configurar jquery datatables en client side usando enteros en la db
Desarrollo Web
gAb1 5 5,267 Último mensaje 16 Enero 2016, 02:22 am
por gAb1
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines