Anima contenido con jQuery y el plugin Ascensor. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Anima contenido con jQuery y el plugin Ascensor

Ascensor es un plugin para jQuery que permite moverse por distintas pantallas de navegación de forma muy sencilla, de la misma forma que funcionan los sistemas ascensores de cualquier edificio convencional.

Para poder hacer uso del plugin Ascensor, es necesario utilizar también la librería jQuery y otro plugin muy utilizado para desarrollar slide con contenido como es scrollTo.

Su uso es muy sencillo, ya que con una única línea de código, podemos crear la estructura de navegación. Además, este plugin permite la navegación por medio de las flechas del teclado, lo que nos permitirá saltar de un contenido a otro sin la necesidad de utilizar el ratón.

Como hemos comentado anteriormente, para poder hacer uso del plugin, debemos de utilizar también jQuery y el plugin scrollTo, por lo que primero debemos de hacer es añadir estas librería a nuestro proyecto.



<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

A continuación, lo que debemos de hacer, es pensar la estructura que tendrá nuestra navegación. Cada etapa de la navegación consinstirá en un DIV que tendrá la información correspondiente. Un ejemplo podría ser el siguiente caso:



<div id="house">
<div><!-- Etapa 1-->
<div id="ContentName"></div><!-- Contenido de la etapa 1-->
</div>
<div><!-- Etapa 2-->     
<div id="ContentName"></div><!-- Contenido de la etapa 2-->
</div>
<div><!-- Etapa 3-->
<div id="ContentName"></div><!-- Contenido de la etapa 3-->
</div>  
<div><!-- Etapa 4-->
<div id="ContentName"></div><!-- Contenido de la etapa 4-->
</div>
<div><!-- Etapa 5-->
<div id="ContentName"></div><!-- Contenido de la etapa 5-->
</div>
</div>

A continuación, ya sólo nos haría falta hacer la llamada de la librería. Para ello sería suficiente incluir la siguiente línea de código.



$('#house').ascensor();

Además de la forma comentada anteriormente, el plugin permite configurar algunas opciones:



$('#house').ascensor({                                

AscensorName:'house',

//Indicamos el nombre que definiremos para el ID y la Clase. Por defecto 'maison' 

WindowsFocus:true,

// Indica si empezamos en el primer contenido de la estructura

WindowsOn:'0',

//Indicamos en el contenido exacto donde queremos empezar 0,1,2,3,....

Direction:'y',

//Se le indica la dirección que utilizará el ascensor, vertical u horizontal

NavigationDirection:'xy',

//Cual será la dirección de su navegación, por defecto 'xy'

});

También nos encontramos con la posibilidad de configurar otras opciones como es la creación de navegación, desactivar ciertas teclas...



$('#content').ascensor({                                                        

Navig:true,

//Si necesitas un sistema de navegación

Link:true,

//Si necesitamos un link por página para la seguiente página

PrevNext:true,

//Para indicar si necesitamos botones prev/next para navegar

KeyArrow:false,

//Desactiva las teclas flechas del teclado

keySwitch:false,

//Desactiva la navegación por medio de las teclas flechas del teclado

CSSstyles:true,

//Si necesitas el default CSS plugin

ReturnURL:true,

//Si necesitas una URL por página

ReturnCode:true,

//Devuelve el id y class del navig/link/content               

});

Hay opciones más complejas para hacer uso del plugin, que nos permite indicar ciertas coordenadas hacia donde se tienen que ir moviendo la estructura. La forma de trabajar con esto sería la siguiente:



$('#content').ascensor({                                                         

ChocolateAscensor:true,

//if you need to place yourself all the stage

AscensorMap: '4|3',

//Define el tamaño del Map

ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'

//Indicamos una por una las distintas etapas, indicando su posición X e Y     

});

Pueden ver un ejemplo de uso en el siguiente enlace

Vía: Sitio oficial