JMiur [E]

SimpleTabs es eso, un script para crear pestañas o solapas sencillas que no requiere ninguna otra librería externa. Tampoco requiere utilizar IDs diferentes para cada contenedor así que pueden agregarse varios en una misma página con mucha facilidad. Como incluye un control de cookies, se recordará la última solapa abierta así que, al recargar la página, se volverá a mostrar.

Hasta acá, todo bien pero, aunque aseguran que funcionará en cualquier navegador, en Internet Explorer no lo hace bien.

Descargamos el ZIP y allí tenemos los dos archivos necesarios: simpletabs_1.1.js y simpletabs.css. Podemos agregar ambas antes de </head>:
<script type="text/javascript" src="URL_simpletabs_1.1.js"></script>
<link rel="stylesheet" type="text/css" href="URL_simpletabs.css"/>
También es posible agregar el CSS directamente en la plantilla si es que se quiere personalizar.

div.simpleTabs {
padding: 10px;
}
ul.simpleTabsNavigation {
height: 24px;
line-height: 24px;
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
}
ul.simpleTabsNavigation li {
background-image: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.simpleTabsNavigation li a {
background-color: #1E252D;
border: 2px solid #3E454D;
color: #BBBBBB;
margin: 0 1px 0 0;
padding: 6px 10px;
text-decoration: none;
}
ul.simpleTabsNavigation li a:hover {
background-color: #3E454D;
text-decoration: none;
}
ul.simpleTabsNavigation li a.current {
background-color: #3E454D;
color: #FFFFFF;
}
ul.simpleTabsNavigation li a.current:hover {
cursor: text;
}
div.simpleTabsContent {
background-color: #3E454D;
display: none;
font-size: 12px;
margin-top: 1px;
padding: 10px;
}
div.simpleTabsContent.currentTab {
display: block;
}
El HTML lo insertamos donde queremos mostrar las pestañas, recordando que si es en un post, deberemos escribir todo en una sola línea:
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Pestaña 1</a></li>
<li><a href="#">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a></li>
</ul>
<div class="simpleTabsContent"> ... contenido Pestaña 1 ... </div>
<div class="simpleTabsContent"> ... contenido Pestaña 2 ... </div>
<div class="simpleTabsContent"> ... contenido Pestaña 3 ... </div>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

DOMtab es otra alternativa y funciona en IE7. Descargamos el ZIP y sólo necesitamos dos archivos: domtab.js y domtab.css.

Como en el caso anterior, agregamos ambos antes de </head>:
<script type="text/javascript" src="URL_domtab.js"></script>
<link rel="stylesheet" type="text/css" href="URL_domtab.css"/>
El código HTML elemental tendría esta estructura:
<div class="domtab doprevnext">
<ul class="domtabs">
<li><a href="#t1">Pestaña 1</a></li>
<li><a href="#t2">Pestaña 2</a></li>
</ul>
<div>
<h2><a name="t1" id="t1">La Pestaña 1</a></h2>
<p> ... contenido Pestaña 1 ... </p>
</div>
<div>
<h2><a name="t2" id="t2">La Pestaña 2</a></h2>
<p> ... contenido Pestaña 2 ... </p>
</div>
</div>
Cuando en el bloque principal se agrega la clase doprevnext, en la parte inferior de cada pestaña aparecerá un enlace para avanzar o retroceder.

En el sitio del autor hay muchos más detalles de cómo configurar el script y personalizarlo.


Pestaña 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Pestaña 2

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Pestaña 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


Por último, Tab View también es otro pequeño script que podemos descargar en formato ZIP

El proceso para utilizarlo es el mismo. Agregamos los dos archivos antes de </head>:
<script type="text/javascript" src="URL_tab-view.js"></script>
<link rel="stylesheet" type="text/css" href="URL_tab-view.css"/>
Como detalle extra, este script usa la imagen tab-view.png así que deberemos alojarla en alguna parte.

El código HTML a utilizar sería este:
<div class="TabView" id="TabView">
<div class="Tabs" style="width: anchopx;">
<a class="Current">Pestaña 1</a>
<a>Pestaña 2</a>
<a>Pestaña 3</a>
</div>
<div class="Pages" style="width: anchopx; height: altopx;">
<div class="Page" style="display: block;">
<div class="Pad"> ... contenido Pestaña 1 ... </div>
</div>
<div class="Page" style="display: none;">
<div class="Pad"> ... contenido Pestaña 2 ... </div>
</div>
<div class="Page" style="display: none;">
<div class="Pad"> ... contenido Pestaña 3 ... </div>
</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView');</script>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

67 comentarios:

Gem@  

Son unas tab muy elegantes, lástima que Internet Explorer no piense lo mismo.

Responder
JMiur  

La primera es imposible de solucionar (por lo menos, yo no he podido) . La segunda es dudosa (o caprichosa) depende del contexto. La tercer es la unica que funciona bien en todos.

Responder
MALINA  

Que maravilla! llevo tiempo queriendo estoooooooooooo

Gracias!

Mañana me pongo a ello

Responder
MALINA  

Una preguntita...
se puede colocar dentro las categorias del blog? y en caso positivo como se haria?

Responder
Pablo  

Holas , yo hace tiempo buscaba esos tabs , los encontraba pero nunca los podia poner en mi blog :S, hace poco de nuevo los quise utilizar y encontre esta pagina (http://www.sunsean.com/idTabs/) que tiene variedad de tabs :D , sigo los sencillos pasos que estan ahì pero no me salen las tabs =( , quisiera saber si falta algo en los pasos ahì indicados.Saludos y gracias!!

Responder
MALINA  

JMiur, tienes algo publicado de que es y como se usa el JQuery?

Responder
Graciela  

Así se llaman 'Caprichos' jajaja...
JM te hago una pregunta, te diré que definitivamente la tecnología me mata: es posible actualizar IE sin pagar???!!!, Mozilla se vá actualizando porque te lo indica.
No sé si es una pregunta obvia, pero para mi lo obvio es insoportable dado que 0 en tecno...buena semana y mis besos!!!

Responder
Dario  

Tu blog simplemente me esta ayudando muchisimo!! gracias!

Responder
Telexcope  

Hola!! tienes un premio en mi blog, puedes pasar a recogerlo en la siguiente dirección:

http://telexcope.blogspot.com/2009/03/muchisimas-gracias-por-volver-acordarte.html

Responder
JMiur  

Malina:
Eso de las categorías debería pensarlo. Creo haberlo hecho alguna vez pero no estoy seguro. De JQuery no se nada porque, como uso otro framework, nunca tuve la oportunidad de probarlo bien. El experto en el tema es Pizcos, tiene muchas entradas con distintos trucos para esa librería.

Pablo:
Lo miraré pero, usa JQuery lo que hace difícil que pueda probarlo.

Graciela:
Sí. IE es gratutito y la versión 7 que es la actual, puede descargarse sin restricciones de sde la web de Microsoft: AQUÍ.

Responder
castrobirdelo  

Hola JMIur.

Pero que elegancia, sin duda alguna se ve muy bien. No obstante la decepción mayor la tenemos siempre con IE, el malvado.

Saludines ;).

Responder
Graciela de Palomas  

pero mira lo que me estoy perdiendo, gracias precioso por tu ayuda!!!
Me olvidé de decir que las tabs están coquetas Muackkk

Responder
MALINA  

Gracias JMiur esperare a que mires eso de las categorias.

En cuanto a jQuery, le pregunté un par de veces a Pizcos pero no me explicó de forma sencilla, ósea que no me enteré de nada y sigo con esa asignatura pendiente.

Pizcos para vosotros que controlais perfecto, pero para los más ignorantes fatal porque se salta muchos pasos a la hora de explicar las cosas, da por echo que sabemos de lo que habla.

Gracias mil de nuevo.

Responder
Theemilio_crazy  

Gracias amigo lo voy a probar a ver que tal. :)

Responder
Carlos Ventura  

Hola JMiur.
¿Como se descomprime el archivo zip?
¿El archivo zip contiene las dos URLS que hay que agregar?
En Esto de descomprimir archivos zip soy un novato, siempre que hay un post donde hay que usar archivo zip nunca logra nada por que no se descomprimirlo.

Responder
JMiur  

En Windows, un archivo ZIP puede descomprimirse de forma directa. Se hace desde el Explorador de archivos o desde MiPc. Sino, puedes usar un programa como WinZip o cualquier otro.

Las URLs no están dentro del ZIP. Una URL es una dirección web http://algo Lo que hay dentro son archivos que deben alojarse en alguna parte de internet. Ese lugar, donde están alojados, es la URL.

Responder
Carlos Ventura  

Gracias JMiur por la informacion,ahora a trabajar con los archivos zip.

Responder
Jaime Trujillo Escobedo  

JMiur! un truco genial! me gusta la del medio, es muy buena :D Saludines ;)

Responder
Haîmat  

Ey pues cuando contestes a Malina puede que me sea útil. Yo querría saber si se puede utilizar esto para añadir elementos en la sidebar como las encuestas, un elemento javascrip, las etiquetas... es decir, añadir elementos por cada pestaña
Mira a ver si te es útil el ejemplo de esta página
http://zonaindraft.blogspot.com/
He intentado modificarlo yo pero no se tanto ^^'
Saludos

Responder
JMiur  

Haîmat:
Creo que el ejemplo será útil. Lo miraré y trataré de explicarlo a la brevedad :)

Responder
GuillermoZ0009  

Donde esta lo de la imgan "tab-view.png", de donde la saco? y una evz que ya la aloje donde la pongo o como es eso?

SAludos

Responder
JMiur  

La imagen está en ZIP y una vez alojada en alguna aprte, se coloca la URL en la hoja de estilo que también está en el ZIP.

Responder
Enrique Carlos Ameijeiras  

Oh, my God, me salió. Me animé y le puse 4 cards en lugar de dos a la segunda, la que jmiur le tenía desconfianza. Lamentablemente es medio engorroso modificar los post periódicamente. Y el enconveniente es que me anula el color de la fecha del post y desconfigura otros colores. Que debería hacer para solucionar este problema? Enrique

Responder
JMiur  

Tendría que ver un ejemplo online para intentar saber de qué se trata.

Responder
Enrique Carlos Ameijeiras  

la dirección de este blog de pruebas es www.categorialibre.blogspot.com
enmarque el titulo y la fecha de la entrada para que se vean, pero el titulo del sidebar no se ve, está del mismo color del background que, también los modifique con anterioridad al tres tab. cambié el servidor por DROPBOX porque skydrive ya me mostró su lado oscuro. un abrazo

Responder
JMiur  

Eso es porque el CSS que estás usando (supongo que es el que viene con el demo) incluye definiciones extras que sobrescriben las de tu blog.

Estas son las ñúnicas necesarias y el resto peude eliminarse.

div.domtab
ul.domtabs
ul.domtabs li
ul.domtabs a:link, ul.domtabs a:visited, ul.domtabs a:active, ul.domtabs a:hover
ul.domtabs li.active a:link, ul.domtabs li.active a:visited, ul.domtabs li.active a:active, ul.domtabs li.active a:hover
div.domtab div
div.domtab h2
div.domtab p
ul.domtabs a:hover
ul.prevnext
ul.prevnext li
ul.prevnext li.prev
ul.prevnext li.next

Responder
jαvιєя_ɢ  

Hola JMiur,

(Espero que no salga repetido, pero al parecer en la otra ventana no funcionó)

Estuve probando el DOMTab en mi blog de pruebas, principalmente en la sidebar, sin embargo tengo un problema con la carga de las pestañas. Resulta que mientras no se termine de cargar la página completa, aparece el contenido de todas las pestañas. ¿Hay alguna forma de evitar eso? Algo así como ocultar el contenido hasta que cargue la página completa.

Encontré en Google una forma de ocultar todo el contenido de la página, pero yo sólo quiero ocultar las pestañas.

Saludos.

PD: este es el blog de pruebas:
http://mandarina-prueba.blogspot.com/

Responder
JMiur  

Pués, no veo ningún método sencillo para hacer eso.

Responder
Esteban  

Hola Jmiur!!

Te escribo para consultarte algo que al parecer es básico, pero no consigo hacerlo y es que implementé la primera opción de éste post y estoy tratando de que el ancho de las pestañas sea el mismo, independientemente del texto del título y sin embargo no lo consigo. Ya probé con width en el estilo de:

"ul.simpleTabsNavigation li"

Y también en:

"ul.simpleTabsNavigation li a"

Y no lo consigo.. Sé que es un detalle pero me está volviendo loco. Cómo podría conseguirlo??

Responder
JMiur  

Podrías intentar con el enlace:

ul.simpleTabsNavigation li a {}

colocar la propiedad width pero, tambien poner float:left;

Responder
Esteban  

Excelente JMiur!! Me funcionó a la perfección, sinceramente creo que el 90% de mi blog ha sido gracias a ti ya que utilicé tus posts de: 1) modificando la plantilla, 2) Tabs, 3)Formulario de contacto, 4) Aprendi de los scripts, 5) FloatBox, 6) El buscador y otros detalles que se me escapan...

Muchas Gracias!!!

Responder
JMiur  

Me alegro que resultara, Esteban :D

Responder
Yuly  

No, no pude...la tecnologia no es mi amiga!! :(

Responder
JMiur  

Paciencia, Yuly, paciencia :)

Responder
@rielCastellanos  

Hola amigo, gracias por las referencias, ya aplike este efecto en mi blog, solo q me gustaria saber como hacer para que el alto se ajuste al contenido q esta dentro de la solapa y no sea un alto estatico predefinido. Gracias

Responder
JMiur  

No sé cuál de los métodos has usado. Los dos primero se adaptan al tamaño por defecto.El tercero requiere que la altura sea fija.

Responder
@rielCastellanos  

Si, en efecto, es el tercero, osea q no hay manera de hacerlo agraegando alguna linea de codigo? otra pregunta, como puedo hacer para ubicarlo en cualquier parte de la sidebar? como por ejemplo en medio, solo logro ponerlo arriba, pero no es el lugar donde me gustaria q estuviera, de antemano gracias, salu2

*Blog de Pruebas: http://webprosperity-negocio.blogspot.com/

Responder
JMiur  

Puede colocarlo en cualquier parte de la sidebar, l oque no peudes tener es dos que tengan el mismo ID: TabView

Responder
Pozo+10™  

Hola como descargo el ZIP de la primera tab??? lo podrias arreglar asi lo descargo???
Muchas gracias!!!

Responder
JMiur  

Fíjate en la página de los desarrolladores: ACÁ

Responder
CHiCken  

ola JMiur tengo un problema con SimpleTabs, estas pestañas ya las tengo desde hace mucho pero apenas hace 2 dias me paso el problema de que al estar en una entrada individual las tabs no se abren, no he modificado nada del blog, solamente el cbox (book-visit) pero de ai nadamas, sabes el problema?. lo puedes ver en mi blog.

MYESTILODEYO.BLOGSPOT.COM

Responder
JMiur  

No veo que ocurra eso. En este momento se abren normalmente.

Responder
CHiCken  

yo tatavia veo el problema, en la pagina principal se abren normalmente pero cada ves que entro a una entrada individual la barra de arriba dice cargando... y en la sidebar no se abren las tabs :( sera algo de mi equipo o de mi navegador, en vdd no se que sea.

Responder
JMiur  

Eso ya no puedo responderlo. No veo problemas de ninguna clase.

Responder
nakahito  

han salido nuevas versiones de simpletabs y domtab, el dilema es cúal sera mas rápido no quiero mas carga en mi blog :((

Responder
LukenfeR  

Soy novato ,Lo intente y no pude pasa que cuando hago click en las otras pestañas no funcionan o me mandan a otra parte de mi blog no entiendo :( te agradeceria si me ayudas aqui la entrada donde estoy intentando

http://lukenfer.blogspot.com/2011/05/tabs.html

Responder
JMiur  

Por l oque veo, has escrito esto:

<script type='https://sites.google.com/site/lukenfer/fuck-1/simpletabs_1.3.js'/>

y deberías escribir esto:

<script type='text/javascript' src=''https://sites.google.com/site/lukenfer/fuck-1/simpletabs_1.3.js'/>

por eso, el script no se carga ya que no tiene fuente de dónde cargarse.

Responder
LukenfeR  

Gracias por la respuesta, perdona que sea persistente pero ya cambien a lo que me diste y sigue el problema tiene que ver algo con mi plantilla?

Responder
JMiur  

Ahora, el script esta bien colocado. Lo que ocurre es que no se está ejecutando.

Lo que yo veo, son errores en otros y sería bueno saber porque se producen ya que cualquier error en un script puede afectar a otro.

Estos dos archivos no se cargan:
http://pmsc.free.fr/gb/J/1039115625.js
http://pmsc.free.fr/gb/J/1039115553.js
aparentemente, son privados y por lo tanto, inaccesibles a cualquiera salvo que se encuentre logueado en ese servicio; deberían ser públicos. No sé si esos archivos contienen los scripts que se muestran con error que, fundamentalmente es uno que genera un carousel en alguna parte,

Responder
LukenfeR  

Si efectivamente son de un carrusel de imágenes en mi pagina principal puede de que haya códigos de mas, veré que puedo hacer, gracias por todo :)

Responder
Jocy  

Hola, una consulta, la idea de las panel tabs es q al cambiar de pestaña la pantalla se mantega en la misma posicion. Tengo un sistema implementado aqui: http://clinicadelapielperu1.blogspot.com/2012/03/infecciones-de-transmision-sexual-its.html donde al cambiar de pestaña la pantalla se sube. Limpie todo el codigo fuente de scripts, de css, de html y solo deje lo q corresponde al panel tab e igual, se va para arriba...lo probe en otro blog: http://killariperu24.blogspot.com/2012/03/1.html y ahi no se mueve y en otro mas y tampoco, solo sucede en el primero, q es en donde necesito funcione correctamente...ya no se q hacer, tengo varios dias buscando la solucion y no doy...q crees q pueda ser, muchas gracias JMiur!!

JMiur  

Pués no sabría decirte el motivo por el cual ocurre eso, Jocy.

Jocy  

Entonces al menos dame un termino de busqueda para googlearlo, ya q no se como se llama ese problema, lo he buscado con diferentes terminos pero no encuentro nada al respecto. No se si importe, creo q da igual, pero soy Jaime y te escribo con alguna regularidad, sino q a veces estoy logeado con el pass de un cliente y me da flojera cambiar al mio, saludos y ojala me des algun tip q de seguro lo tienes en mente, gracias!!

JMiur  

No. No tengo idea de por qué ocurre eso en un sitio y en otro no. Obviamente, debe havber alguna diferencia entre ellos peor, no sabria decirte cuál o por dónde empezar a buscar. Trata de igualarlos lo más posible.

Jocy  

Gracias!! =)

Responder
animeshentai  

Hola soy nuevo por aqui hace mucho tiempo busco uno como esto pero veo que los comentarios son algo viejitos y noce si llegue este mensaje pero necesito ayuda con un truco de estos bueno con dos porque los probe todos y en todos me da el mismo problema y el problema es que en cada pestana en contenido se baja dentro del marco por ejemplo si pongo 5 pestanas y si boy seleccionando desde la primer pestana en el primer pestana el contenido esta en el top perfecto asta ahi pero el problema es cuando ya paso a la pestana dos desde ahi empiesa a bajar el contenido y asi consecutivamente ba bajando para abajo es como si las pestanas las alineara en colunnas acia abajo pero las pestanas todo bien solo es ese el problema.

ayuda please si resibes el mensaje me gustaria saber tu opinion por que quiero usar uno de estos porque si funcionan pero quisiera solucionar ese problema gracias..http://animeshentai-sd.blogspot.com/

JMiur  

No sé cual es tu ejemplo y qué quieres decir con eso de "se bajan los contenidos" Si te refieres a que en lugar de verse como pestañas, se van abriendo una debajo de la otra, revisa el CSS porque algo debe estar equivocado.

Responder
Andréa Pereira  

cómo ocultar el índice con efecto similar al de wikipedia.org de usar dentro del mensaje. No sé el nombre de la que se hará aquí que se me ayude por favor?
Andrea, RJ Brasil ..
Felices fiestas a Vagabundia

JMiur  

No sé a que te refieres con exactitud ni cuál es el script que quieres modificar aunque, en general, es difícil hacerlo.

Andréa Pereira  

gostaria de saber se você tem o efeito similar ao que tem na postagem do wikepédia. aquele que quando clica no titulo do índice ele corre( ele vai, até o titulo da postagem correspondente abaixo na mesma postagem)

I wonder if you have the similar effect that has on the posting of Wikepedia. one that when you click on the title of the index he runs (he goes up to the title of the post corresponding to the same post below)

're the picture of what I'm talking about if you do not understand


[veja]

JMiur  

Eso se obtiene utilizando anclajes.

Andréa Pereira  

Muito obrigada estou para arrumar minhas postagem
JMiur...está de parabéns ^-^.\0/.

Responder
Andréa Pereira  

Olá feliz 2003! Agradeço pelo efeito Parabéns é muito obrigada
o efeito está [No meu blog que estou a arrumar]

JMiur  

Feliz Año, Andréa :D

Andréa Smirna  

sim menos de uma semana
me ajuda no efeito de texto

Responder
Andréa Smirna  

fiquei Gostei pela orientação JMiur.
Mais teria como orientar colocar essa pestana da postagem na vertical... me ajudaria muito! Obrigada

JMiur  

Trata de explicar un poco más porque no comprendo a qué pestaña te refieres.

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