tabulous.js un tab con efectos entre contenidos

DESCARGA : Tabulous.js

tabulous.js un tab con efectos entre contenidos,este plugin es muy interesante ya que podemos encontrar el uso de transiciones entre los contenidos de un tab, lo más interesante de este plugin es que podemos implementarlo de manera sencilla, este plugin tiene efectos como:

1.-  El de escala

2.- Efecto slider

3.- Efecto escala hacia arriba.

4.- Efecto de flip, muy llamativo.

Para implementar este plugin lo único que necesitamos hacer es:

1.- Incluir los archivos css y js incluyendo la librería jquery:

2.- Para crear los taps utilizamos el siguiente código html como ejemplo:

3.- También incluimos la parte de los scripts que le dan más funcionalidad al agregar efectos conocidos:

<link href='tabulous.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="tabulous.js"></script>
<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">
				<!--tab content-->
			</div>

			<div id="tabs-2">
				   <!--tab content-->

			</div>

			<div id="tabs-3">
				    <!--tab content-->
			</div>

		</div><!--End tabs container-->

	</div><!--End tabs-->
$(document).ready(function ($) {

    $('#tabs').tabulous({);	

});

Demostración: http://git.aaronlumsden.com/tabulous.js/#demo

 

You may also like...