JMiur [E]

Esta es una forma sencilla de crear pestañas en la sidebar utilizando jQuery.

Necesitamos, claro, la librería agregada antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
y debajo, el script en si mismo:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  var alltabs = $('div.tab');
  var tabs = $('#tabs');
  alltabs.first().show();
  tabs.find('li:first').addClass('on');
  tabs.find('a').on('click', function() {
    alltabs.hide()
    tabs.find('li').removeClass('on')
    $(this).parent().toggleClass('on')
    var tabref = $(this).attr('rel')
    $(tabref).fadeIn(500)
    this.blur()
    return false;
  })
})
//]]>
</script>
A eso, le agregamos el CSS que puede ser personal; en este ejemplo es algo así:
<style>
  /* el rectángulo contenedor */
  .tabber { width:400px; }
  #tabs { width:100%; }
  /* cada pestaña es un item de una lista */
  #tabs li {
    background-image: -moz-linear-gradient(100% 100% 90deg, #AAA, #FFF);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#AAA), to(#FFF));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFFFF", EndColorStr="#FFAAAAAA");
    -moz-border-radius: 10px 0 0 2px;
    -webkit-border-radius:10px 0 0 2px;
    border-radius:10px 0 0 2px;
    border-right: 2px solid #000;
    float: left;
    height: 2em;
    line-height: 2em;
    width: 75px;
  }
  /* esta es la pestaña activa */
  #tabs li.on {
    background-image: -moz-linear-gradient(100% 100% 90deg, #AA4, #FF8);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#AA4), to(#FF8));
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#FFFFFF88", EndColorStr="#FFAAAA44");
  }
  /* cada pestaña es un enlace */
  #tabs li a {
    color: #666;
    font-family: Verdana;
    font-size: 18px;
    padding: 0 0 0 15px;
    text-decoration: none;
  }
  /* el enlace activo */
  #tabs li.on a { color: #660; }
  /* efecto hover sobre las pestañas */
  #tabs li a:hover { color: #330;  }
  /* efecto hover sobre la pestaña activa */
  #tabs li.on a:hover { color: #000; }
  /* los contenidos ocultos */
  .tab {
    clear: both;
    display: none;
    font-size: 12px;
    padding: 5px;
  }
</style>
¿Cómo se utiliza? Colocando el HTML allí donde queremos mostrarlo. las pestañas son una lista ordenada donde cada item tiene un atributo rel específicoy debajo de esa lista, colocamos un div con el contenido de cada pestaña:
<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab3'> titulo 3 </a></li>
  </ul>
  <div class='tab tab1'>
    ....... el contenido de la pestaña 1 .......
  </div>
  <div class='tab tab2'>
    ....... el contenido de la pestaña 2 .......
  </div>
  <div class='tab tab3'>
    ....... el contenido de la pestaña 3 .......
  </div>
</div>
En Blogger, tenemos la posibilidad de agregar gadgets así que, si queremos que alguno de ellos quede dentro de una de las pestañas, lo que debemos hacer es colcoarlo dentro de una sección [ ver detalles 1 | 2 ]

Un ejemplo:
<div class='tabber'>
  <ul id='tabs'>
    <li><a href='#' rel='div.tab1'> titulo 1 </a></li>
    <li><a href='#' rel='div.tab2'> titulo 2 </a></li>
    <li><a href='#' rel='div.tab3'> titulo 3 </a></li>
  </ul>
  <div class='tab tab1'>
    <b:section class='tabs' id='pestania1' maxwidgets='1'/>
  </div>
  <div class='tab tab2'>
    <b:section class='tabs' id='pestania2' maxwidgets='1'/>
  </div>
  <div class='tab tab3'>
    <b:section class='tabs' id='pestania3' maxwidgets='1'/>
  </div>
</div>
De ese modo, creamos tres secciones a las que luego, desde Diseño | Elementos de la página, podemos agregar cualquier tipo de widget.

52 comentarios:

Σ=o) Pau  

Siempre me han gustado las tabs y armarlas con jquery se ven geniales :) es una verdadera tentación probarlas ;) gracias nindo^^ feliz comienzo de semana

besos ronroneados en mi abrazo ^_^

Responder
Pedro Pablo  

Hola Jmiur, Me gustó mucho el articulo, lo ensayé en mi blog de prueba, me creó las pestañas pero no puedo agregar ningún widget.. no se en que estoy fallando ..gracias

Responder
Maite  

Llevo hora y pico leyendo por puro vicio jajaja, es una gozada como explicas las cosas aun para los que no vamos a ponerlas en práctica :D Estoy muy a gusto con cuanto me enseñaste pero me tienta venir por aqui de vez en cuando de bien que se está.
Solo dejarte un abrazo.

Responder
Tomate de Almería  

Hola, todo iba bien, pero desde hace unos días, al compartir un enlaces en las redes sociales, sólo me aparece el título del blog y la descripción y no el título de la entrada y la descripción breve de esta ¿os pasa?

Gracias

Responder
Graciela  

Rebonito, todo lo que explicás hace que una tenga ganas de probarlo, besos :P

Responder
Gem@  

Son muy útiles las pestañas y no sé por qué nunca las añadí a ningún blog :S

Responder
JMiur  

Hola Pau. Espero que el lunes no haya sido tan molesto comos iempre ... ya termina :-)

Pedro Pablo: No sé que es lo que has puesto en tu ejemplo; debería verlo.

Un abrazo, Maite. Es bueno tenerla otra vez "interneteando" :D

Tomate de Almería: Con los botones de Blogegr siempre pasó eso.

Pruebe, Graciela :D

Nunca es tarde para empezar Gem@ :D

Responder
Pliactom  

Vaya, me ha gustado tanto que ya lo he aplicado en una entrada :)

Gracias por compartir otras formas de usar jQuery.

:D

Responder
Tomate de Almería  

Hola, vi un artículo (creo que fué aquí) sobre los códigos que son necesarios en las plantillas y que por diversos motivos se borran, pero que recomiendas incluir, pero ahora no lo encuentro.. ¿tienes el enlace?

Creo que hay algo que he tocado y debería revertir, ya que el problema que te he comentado en un comentario más arriba, persiste.

Gracias

Responder
JAIME  

Hola JMiur, el codigo para la libreria q pones al principio es un poco diferente al actual y no esta en la lista de la pagina Google Libraries API. El actual es "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js", entonces... existen mas librerias de JQuery q no estan en la pagina de Google Libraries API??, gracias =)

PD: Te pregunto esto pues en otro post tu recomendaste de cuando en cuando actualizar las librerias.

Responder
JMiur  

Tomate de Almería:
No sé a cuáles te refiers con exactitud.

JAIME:
Lo que ves en Google Libraries API es la última versión que ellos han subido. Usando números genéricos se evita tener que establecer esa versión, cargando siempre la última disponible, sea esta la que sea. Fíjate en esta entrada.

Responder
JAIME  

ok, ya te entendi lo del "1", pero sigo con una duda... es sobre la parte ".../1.5.0/jquery.min.js" ... como ves hay un ".min." y esto esta asi en la pagina de Google Libraries API y tu no lo usas... hay alguna razon para eso??

Gracias nuevamente y disculpa, es q soy un pregunton...pero asi aprendo =)

Responder
JMiur  

Hay una versión de jQuery comprimida y otra sin comprimir, eso es lo que significa el min adosado.

la comprimida es esta y la que no lo está es esta.

Ambas son la misma.

Responder
JAIME  

clarisimo, muchas gracias, lo pondre a prueba, siempre quize tener la ventana activa distinta a las demas =)

Responder
m3nd3z  

Hola JMiur....

El script se puede usar si se cambia la lista por una serie de divs?

Responder
JMiur  

Para eso, tienes que cambiar el HTML, el CSS y el script mismo.

Responder
JAIME  

Hola, se puede hacer para q cada pestaña tenga una URL? como? gracias =)

Responder
JMiur  

¿Y para qué hacer eso? Dejaría de ser lo que es para transformarse en un simple menú horizontal.

Responder
JAIME  

para llegar de manera directa a cualquier contenido desde otro menu, por ejemplo si quieres ver lo q esta en el tab 3, sin tener q ir primero al tab 1 y luego al tab 3.

Responder
JMiur  

No. Las pestañas no tienen URLs; si queres abrirlas desde otro lado debes darles un ID y de alguna manera crear un script que la muestre y te posicione allí.

Responder
JAIME  

entonces como hago para q en vez del tab 1 aparezca primero el tab 2 al cargar la pagina (o el tab de mi eleccion q no sea, ni este, en la primera posicion) gracias

Responder
JMiur  

Para eso debes modificar el script que usa el selector first() para mostrar la primera:

alltabs.first().show();

así que, en principio, deberás ver cuales selectors están disponibles y probar si alguno funciona.

Responder
JAIME  

y donde veo q selectors estan disponibles?? talvez recurriendo a tu amabilidad de siempre y con todos, podrias darme un ejemplo por favor?

Responder
JMiur  

Hay muchos selectores; esta es una lísta de los básicos. El resto es modificar el script, n osé si por completo o sólo una parte; es algo que habría que probar paso a paso y ver.

Esto muestra el contenido de la primera pestaña:
alltabs.first().show();
y esto busca la primera pestaña y le coloca la clase on
tabs.find('li:first').addClass('on');

Hasta ahí llego :-)

Responder
JAIME  

gracias JMiur, aunq no lo creas, ya lo consegui: http://piscosourtv.blogspot.com/#third =)

Responder
JAIME  

otra pregunta, la pestaña activa queda activa gracias al script, al codigo HTML o a ambos? Algun tutorial para hacer un menu simple con pestañas activas?? gracias =)

Responder
JMiur  

¿Y por qué no habría de creerlo?

Qué pestaña está activa es controlada por el script. No hay nada en el HTML que defina eso, son todas iguales.

Responder
JAIME  

ok, tienes algun tuto para un menu simple con pestañas activas? o sabes donde puedo buscar, gracias

Responder
JMiur  

No sabría decirte ya que no sé qué buscas con exactitud.

Responder
JAIME  

a ver te explico... me gustaria hacer un menu simple q cuando le des click a una pestaña y luego de cargar la ventana correspondiente, ese pestaña quede activa, algo parecido a lo q has puesto en este post, pero en un menu...

Responder
JMiur  

Eso dependerá de cuáles son esas páginas que se abren ya que en Blogger no es posible identificar algunas de ellas; deberían ser direcciones de entradas o direcciones de páginas estáticas; en ese caso, habría que utilizar JavaScript apra ller la URL donde estamos y establecer la clase de ese menú.

No, no recuerdo nada similar pero, el gadget de Páginas de Blogegr lo hace sin problemas.

Responder
JAIME  

dices: "deberían ser direcciones de entradas o direcciones de páginas estáticas; en ese caso, habría que utilizar JavaScript apra ller la URL donde estamos y establecer la clase de ese menú."

...y tienes algun tutorial para eso o sabes donde lo puedo encontrar?

Responder
JMiur  

Como se trata de algo muy específico, no recuerdo que haya nada similar.

Responder
JAIME  

ok gracias de todos modos, vere si el tutorial de este post lo puedo aplicar a lo q quiero =)

Responder
JAIME  

el gadget de paginas por si solo NO activa ninguna pestaña al vizualizarla, a no ser q haya algun codigo HTML para eso, si es asi, cual?? Gracias

Responder
JMiur  

El gadget de páginas si activa la pestaña de la página en que se encuentra, agregándole la clase selected y el código es parte del mismo gadget:

<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>

Responder
JAIME  

gracias...pero y cual seria el css para la clase selected??

Responder
JMiur  

Cualquiera, el que quieras, dependerá de cada plantilla y de cada diseño:
li.selected {}
li.selected a {}
li.selected a:hover {}

Responder
JAIME  

ok, vamos a probar a ver q sale, echando a perder se aprende, gracias =)

Responder
JAIME  

Hola de nuevo JMiur, una consulta: hice un prueba con pestañas con la libreria de jquery Tools: script src='http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js' en la misma plantilla donde tengo la libreria normal: script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' y deja de funcionar la de Jquery Tools... siempre sera asi a pesar q ambas son de jquery?? o hay un truquillo por ahi??? Gracias =)

Nota: esta aca http://piscosourtv.blogspot.com/

Responder
JMiur  

Si es un plugin, debería funcionar, lo desconozco por completo ya que nunca lo he utilizado.

Responder
JAIME  

Ya me funciono usando condicionales para la respectiva entrada, parece ser q no son compatibles, aunq en algunos casos tambien he probado y depende si los pones uno arriba de otro, es cuestion de ir probando con cada plantilla. Gracias por tus aportes ;)

Responder
John Mistery Doe  

Hola JMiur, hace tiempo coloque en mi blog de pruebas este gadget de pestañas y funciona perfectamente, pero hoy al colocar un segundo gadget de pestañas dejan de funcionar correctamente. Hay alguna forma de que puedan coexistir estos dos gadgets y además que cada uno tenga un CSS diferente? :o
Saludos!!!

Responder
JMiur  

Para poder colocar un segundo, deberías modificar varias cosas como los IDs y duplicar todo con otros nombres.

Responder
Amiitha -chan  

Hola JMiur ^^ lo probé y funciona perfectamente! ahora solo tengo un problemita... Me sale un punto delante de las palabras en cada pestaña y no sé como hacer para quitarlos, ¿me puede echar una manito? este es el blog de pruebas→ http://yaoi-pervert-lover.blogspot.com.ar/

JMiur  

En la regla de estilo #tabs li {} agrega esta propiedad:

list-style-type: none;

Amiitha  

Quedó perfecto, muchas gracias ^^

Responder
Ensalada Verde  

Hola! Tengo una consulta!
En una pestaña puse un reproductor de audio y en otra uno de video, para que los usuarios puedan seleccionar lo que quieran.
El problema es que cuando cambio de pestaña (de audio a la de video) se sigue escuchando el reproductor! No quiero que lo haga!

Hay alguna forma de decirle a la pestaña que se desactive completamente cuando NO esta seleccionada?
Aquí les paso el blog donde estoy haciendo las pruebas:
http://testeandoensaladaverdeaverqueonda.blogspot.com.ar/

Saludos!
Espero que puedan ayudarme!

JMiur  

El audio es un iframe por lo tanto, no tienes ninguna opción que permita controlarlo con JavaScript ya sea que esté en una pestaña o no. Tampoco los archivos SWF como es el reproductor de video, pueden ser manejados con JavaScript a menos que quien los haya creado, así lo permita.

No existe tal cosa como habilitar o deshabilitar una etiqueta; estas, existen o no existen.

Lo único que podrías hacer es generar el código de esos dos objetos con JavaScript y escribirlos y borrarlos según se vea o no se vea la pestaña. Pero no es simple y no creo que tenga mucho sentido.

Responder
Amiitha  

Buen día JMiur~!! ^^ Quería preguntarle... ¿Dejó de funcionar el script? porque tengo colocadas estas pestañas en mi blog y hace unos días ya no funcionan, cuando doy clic en otra pestaña para que se cambie, no lo hace... En su ejemplo tampoco puedo cambiarlas >.< ¿Hay alguna forma de arreglarlo? por favor ilumíneme con su sabiduría (ノ_ _)ノ彡☆ le agradecería su ayuda.

JMiur  

Dependerá de la versión de jQuery que se use. Si es la más reciente, deberá cambiarse:

tabs.find('a').live('click', function() {
por
tabs.find('a').on('click', function() {

http://vagabundia.blogspot.com/2013/01/actualizacion-de-jquery-y-posibles.html

Amiitha  

Muchas gracias, ahora volvieron a funcionar (✿◠‿◠)/

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR