Tabulous

Name: Tabulous
Brand: Jose Aguilar
SKU: joseaguilarblog-6633
Availability: InStock
Rating: 5 (2 reviews)

Tabulous.js es un plugin jQuery para crear tabs o pestañas que se puede utilizar con cualquier contenido disponiendo de efectos de transición bastante atractivos.

Una de las principales ventajas de este plugin es que es muy sencillo de instalar y personalizar para tu página Web.

Los archivos necesarios los puedes descargar de su página oficial.

En la página donde lo quieres utilizar tendrás que incluir la hoja de estilos que incluye el paquete dentro del <head>:

Source code

<link href='css/tabulous.css' rel='stylesheet' type='text/css'>

Seguidamente en el <body> de tu página deberás añadir allí donde quieras los tags HTML, como por ejemplo:

Source code

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="">Tab 1</a></li>
        <li><a href="#tabs-2" title="">Tab 2</a></li>
        <li><a href="#tabs-3" title="">Tab 3</a></li>
    </ul>
 
    <div id="tabs_container">
 
        <div id="tabs-1">
            <p>Your contente tab 1...</p>
        </div>
 
        <div id="tabs-2">
            <p>Your contente tab 2...</p>
        </div>
 
        <div id="tabs-3">
            <p>Your contente tab 3...</p>
        </div>
 
    </div><!--End tabs container-->
 
</div><!--End tabs-->

Ahora tan solo te queda incluir la librería jQuery si no la tuvieras, el plugin y su llamada antes de la etiqueta de cierre </body>:

Source code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tabulous.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
    $('#tabs').tabulous({
    	effect: 'scale'
    });
});
</script>