| Ver tema anterior :: Ver siguiente tema |
| Autor |
Mensaje |
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
 Jue Jul 26, 2012 10:49 pm
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
_________________
[Firma editada por Link externo]
Ultima edición por buzzdungeon el Mie Nov 21, 2012 4:43 pm; editado 1 vez |
|
| Volver arriba |
|
 |
radiovijaer
radiovijaer.es.tl
Offline
Semi-Experto
Ubicación: Web
=> Enviar mensaje
|
Vie Jul 27, 2012 5:08 pm
Título del mensaje: |
|
|
Excelente, hace un tiempo buqué un código similar hazta en la web, gracias por compartirlo. 
_________________
 Pooferswebmetoons
 @pooferswebmetoo |
|
| Volver arriba |
|
|
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
Sab Jul 28, 2012 11:20 am
Título del mensaje: |
|
|
Muchas gracias :D
_________________
[Firma editada por Link externo]
|
|
| Volver arriba |
|
|
design-pwg
design-pwg.es.tl
Offline
Moderador
Ubicación: Santa Cruz - Argentina
=> Enviar mensaje
|
Sab Jul 28, 2012 4:56 pm
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.
_________________
 |
|
| Volver arriba |
|
|
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
Sab Jul 28, 2012 9:12 pm
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 
_________________
[Firma editada por Link externo]
|
|
| Volver arriba |
|
|
mortal-crew
mortal-crew.es.tl
Offline
Nuevo
Ubicación: Mexico
=> Enviar mensaje
|
Dom Jul 29, 2012 2:56 am
Título del mensaje: |
|
|
| Muchas gracias buscaba esto con muchas ansias. |
|
| Volver arriba |
|
|
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
Dom Jul 29, 2012 1:16 pm
Título del mensaje: |
|
|
genial, si tienen problema usándolo solo avisen
_________________
[Firma editada por Link externo]
|
|
| Volver arriba |
|
|
enriquerr
enriquerr.es.tl
Offline
Nuevo
=> Enviar mensaje
|
Dom Jul 29, 2012 1:58 pm
Título del mensaje: |
|
|
| Muchas gracias la utilizare |
|
| Volver arriba |
|
|
mortal-crew
mortal-crew.es.tl
Offline
Nuevo
Ubicación: Mexico
=> Enviar mensaje
|
Dom Jul 29, 2012 2:09 pm
Título del mensaje: |
|
|
| MP |
|
| Volver arriba |
|
|
abstract-design
abstract-design.es.tl
Offline
Nuevo
=> Enviar mensaje
|
Dom Jul 29, 2012 10:49 pm
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. |
|
| Volver arriba |
|
|
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
Dom Jul 29, 2012 11:47 pm
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
_________________
[Firma editada por Link externo]
|
|
| Volver arriba |
|
|
mundo-pgd
mundo-pgd.es.tl
Offline
Semi-Experto
Ubicación: San Francisco
=> Enviar mensaje
|
Vie Ago 03, 2012 6:28 pm
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 :-( |
|
| Volver arriba |
|
|
buzzdungeon
buzzdungeon.es.tl
Offline
Destacado
=> Enviar mensaje
|
Sab Ago 04, 2012 6:10 pm
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
_________________
[Firma editada por Link externo]
|
|
| Volver arriba |
|
|
design-pwg
design-pwg.es.tl
Offline
Moderador
Ubicación: Santa Cruz - Argentina
=> Enviar mensaje
|
Mar Ago 14, 2012 5:58 am
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.
_________________
|
|
| Volver arriba |
|
|
|
