jueves, 20 de agosto de 2015

Libreria Tabulous.js

Posted on 4:52by with No comments


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>:
<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:
<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>:
<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>

0 comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)