Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje27-07-2012, 02:49 (UTC)    
Título del mensaje: Jquery tabs

Aquí les dejo un code de tabs en jquery que hice hace tiempo:

Vista previa:


Vista previa online:
http://buzzdungeon.es.tl/demo-tabs.htm

Texto por encima de la pagina:
Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
/*buzzdungeon.es.tl*/
$(document).ready(function(){
   $(".cont:first").show();
   $(".tabs li a").click(function(){
      $(".cont").hide();
      $(".tabs li").not(this).removeClass("active");
      $(this).parent().addClass("active");   
      $($(this).attr("href")).fadeIn(250);
      return false;
   });
});
</script>


Donde quieras que aparezcan:
Código:
<!--buzzdungeon.es.tl-->
<div class="contenedor">
   <ul class="tabs">
      <li class="active"><a href="#tab1">Tab 1</a></li>
      <li><a href="#tab2">Tab 2</a></li>
      <li><a href="#tab3">Tab 3</a></li>
   </ul>
   <div id="tabs">
      <div id="tab1" class="cont">contenido del tab 1</div>
      <div id="tab2" class="cont">contenido del tab 2</div>
      <div id="tab3" class="cont">contenido del tab 3</div>
   </div>
</div>


Código Css:
Código:
/*buzzdungeon.es.tl*/
.cont{
   display: none;
   padding:8px;
   color:#444;
}
.tabs{
   margin:0;
   padding:0;
   list-style: none;
}
.tabs li{
   padding:8px;
   float: left;
   border-right:1px solid #ddd;
}
.tabs li a{
   color:#666;
   text-decoration: none;
}
.active{
   color:#000!important;
   background: #fefefe!important;
   font-weight: bold;
}
#tabs{
   border-top:1px solid #ddd;
   clear: both;
}
.contenedor{
   background:#f6f6f6;
   border: 1px solid #ddd;
   width:500px;
}


saludos

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */


Ultima edición por buzzdungeon el Mie Nov 21, 2012 4:43 pm; editado 1 vez
Mensaje27-07-2012, 21:08 (UTC)    
Título del mensaje:

Excelente, hace un tiempo buqué un código similar hazta en la web, gracias por compartirlo.
______________


https://radiovijaer.es.tl/
Mensaje28-07-2012, 15:20 (UTC)    
Título del mensaje:

Muchas gracias :D
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje28-07-2012, 20:56 (UTC)    
Título del mensaje:

Hola!,

Este tema será movido a su respectivo Foro de selección próximamente.

Gracias por el aporte!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mensaje29-07-2012, 01:12 (UTC)    
Título del mensaje:

design-pwg escribió:
Hola!,

Este tema será movido a su respectivo Foro de selección próximamente.

Gracias por el aporte!
Moderador Design-PWG.


Excelente, muchas gracias
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje29-07-2012, 06:56 (UTC)    
Título del mensaje:

Muchas gracias buscaba esto con muchas ansias.
Mensaje29-07-2012, 17:16 (UTC)    
Título del mensaje:

genial, si tienen problema usándolo solo avisen
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje29-07-2012, 17:58 (UTC)    
Título del mensaje:

Muchas gracias la utilizare
Mensaje29-07-2012, 18:09 (UTC)    
Título del mensaje:

MP
Mensaje30-07-2012, 02:49 (UTC)    
Título del mensaje: Re: jQuery tabs by Buzzdungeon

Dado a mi amplio conocimientos en JS y CSS, me atrevo a decirte que este codigo no ah sido credo por vos, si no una editacion de uno de los conjunto de librerias creadas por Twitter: http://twitter.github.com/bootstrap/javascript.html

Si ustedes llegan hasta la parte donde dice Togglable tabs bootstrap-tab.js podran ver que es e mismo efecto.

¿Por que lo dijo? por el simple echo que tu estas usando en conjunto todos los recursos que nos ofrece github.

A lo mejor no estoy en lo cierto, pero a mi me parecio eso.
______________
Código eliminado por Design-PWG.
Mensaje30-07-2012, 03:47 (UTC)    
Título del mensaje: Re: jQuery tabs by Buzzdungeon

abstract-design escribió:
Si ustedes llegan hasta la parte donde dice Togglable tabs bootstrap-tab.js podran ver que es e mismo efecto.

Mismo efecto, claro, gracias a jQuery.show(), es el efecto predefinido de jquery.js, no podría usar otro sin usar algún plugin de easing.

abstract-design escribió:
¿Por que lo dijo? por el simple echo que tu estas usando en conjunto todos los recursos que nos ofrece github.

Bootstrap es de Twitter (GitHub solo hostea el proyecto), lo uso para la estructura de la web, nada que ver con las tabs.

No estas en lo cierto, pero gracias por opinar
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje03-08-2012, 22:28 (UTC)    
Título del mensaje:

Hola,

gracias por el codigo, estaba buscando algo similar, con tu permiso le hare unas pequeñas ediciones pronto
______________
We miss you Cliff Burton :-(
Mensaje04-08-2012, 22:10 (UTC)    
Título del mensaje:

mundo-pgd escribió:
Hola,

gracias por el codigo, estaba buscando algo similar, con tu permiso le hare unas pequeñas ediciones pronto


no hay problema, gracias
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje14-08-2012, 09:58 (UTC)    
Título del mensaje:

Este tema ha sido promovido, ya que cumple las características para ello.

Información sobre promoción de temas a zonas dedicadas:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177
(Los diseños o artículos, serán movidos a la zona de selección, si el moderador así lo considera)

Saludos!
Moderador Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group