DonnieTabs, plugin simple de pestañas para jQuery

El plugin DonnieTabs, a cargo del menda, está disponible con licencia MIT en GitHub para que lo utilicéis, modifiquéis y forkeéis a vuestro gusto.

Su uso es simple:

Añades en tu web la librería jQuery, el archivo .js de DonnieTabs y el archivo CSS (y si necesitas el CSS extra para IE también viene).

Luego para crear las pestañas y el contenido simplemente tenéis que usar unas clases y nomenclatura concretos en el marcado HTML y punto:

<!-- Para las pestañas una lista y dentro cada elemento así-->
<ul class="simpletabs">
    <li>
	<a href="#tab1">Tab1</a>
    </li>
    <li>
	<a href="#tab2">Tab2</a>
    </li>
    <li>
	<a href="#tab3">Third tab</a>
    </li>						
</ul>
<!-- La lista debe ser la clase SimpleTabs, y la referencia del enlace debe ser al Id de la pestaña de contenido-->

Con eso tenéis las pestañas de navegación, la parte del contenido irá así:

<!-- Todo el contenido irá dentro un div de la clase tab_container -->
<div class="tab_container">
<!-- Y dentro, el contenido va en divs de la clase tab_content-->
    <div id="tab1" class="tab_content">
	<h3>titulo</h3>
	<p>Contenido</p>	
    </div>
    <div id="tab2" class="tab_content">
	<h3>titulo</h3>
	<p>Contenido</p>
    </div>
    <div id="tab3" class="tab_content">
	<h3>titulo</h3>
	<p>Contenido</p>
    </div>			
</div>	

Con esto ya tenéis vuestra página con navegación por pestañas. Podéis aportar todo lo que queráis a este proyecto. Yo intentaré meterle más cosas, por ahora es algo muy básico y ya tengo alguna idea.

Anuncios

2 comentarios en “DonnieTabs, plugin simple de pestañas para jQuery

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s