«

»

ago 07 2012

avatar

Imprimir esta Entrada

Tutorial en Español HTML5: Ejemplo Tabs con JQuery – Vanity

HTML5: Ejemplo Tabs con JQuery – Vanity

Si queremos tener un componentes web 2.0 de forma rápida, eficiente y que sea atractiva visualmente librerias como la de Vanity nos permite lograrlo.  En este artículo vamos a desarrollar el componente Tabs (pestañas).

Implementar los componentes de Vanity, es realmente muy fácil. Crearemos una página web donde haremos referencia a las librerias que nos proporcionan, escribiremos el codigo html y lo que necesitemos de css. Luego referenciaremos la funcionalidad del Tab a través de una sola línea y ya tenemos nuestro ejemplo implementado.

Ver Ejemplo Online

 

Código HTML

Lo único que tenemos que tener en cuenta en este caso es que debemos crear tantos divs como imágenes querramos mostrar.

<ul class="tabs">
	<li class="active"><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul>
<div class="clear"></div>
<div class="tabs_content">
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.</div>
<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
</div>
<!-- contenido pestañas-->

Javascript

$(document).ready(function(){
$("ul.tabs").jTabs({content: ".tabs_content"});
});

 

CSS

Ingresamos el código css para acomodar el JTab.

ul.tabs {list-style:none; width:500px;}
ul.tabs li:first-child {border-left:1px solid #ccc;}
ul.tabs li {float:left; border-right:1px solid #ccc; border-top:1px solid #ccc; background-color:#eee;}
ul.tabs li.active {border-bottom:1px solid #fff; background-color:#fff; margin-bottom:-1px;}
ul.tabs li a {display:block; padding:5px 10px; color:#777; letter-spacing:-1px; outline:none; text-decoration:none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
ul.tabs li.active a {font-weight:600; color:#000;}
div.tabs_content {width:500px; border:1px solid #ccc;}
div.tabs_content &gt; div {padding:20px; display:none;}

Parámetros

Estos son los parámetros que podemos configurar para nuestro Tab:

content = el elemento que va a contenter los divs con el contenido de cada tab

equal_height = verdadero o falso para poner enabled las columnas y encontrar el tab mas alto y setear esa altura a los demas tabs.

cookies = verdadero o falso para setear que el browser guarde en las cookies sobre que tab esta parado el usuario

animate = verdadero o falso si queremos usar una animación cuando cambiamos entre los tabs

effect = que efecto de animación queremos usar, por default es fade.

speed = la velocidad de la animación

Esto ha sido todo el Tutorial en Español HTML5: Ejemplo Tabs con JQuery – Vanity

Be Sociable, Comparte a SurPatterns!

Acerca del autor

avatar

Emmanuel

Ingeniero en Sistemas. Amante de la programación. Tiene conocimientos de: Java, Visual .Net, C#, Adobe Flex, HTML5, JavaScript, ORMs como Hibernate y las principales bases de datos. También trabajó con otras tecnologías como: People Soft y SAP. Actualmente también escribe artículos para su sitio personal SurPatterns. Pueden seguirlo en twitter a traves de @SurPatterns.

Enlace permanente a este artículo: http://surpatterns.com/sitio/html5-en-espanol-surpatterns/tutorial-en-espanol-html5-ejemplo-tabs-con-jquery-vanity/

3 comentarios

  1. avatar
    Julio

    Hola….. Como puedo ubicar las pestañas en la parte inferior? muchas gracias de antemano

  2. avatar
    cesar

    muy buenos tutoriales :D felicidades y gracias por las aportaciones

    1. avatar
      Emmanuel

      es un orgullo que haya gustado

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Puedes utilizar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>