SliderNav, lista tus datos de forma elegante. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

SliderNav, lista tus datos de forma elegante

SliderNav es un plugin para Jquery que permite mediante una barra de desplazamiento vertical, desplazarse por todo el contenido.

Esta librería puede ser muy útil para utilizarlas en grandes listas de datos que se presenten ordenadas alfabéticamente, para poder moverse por los distintos datos, aunque también puede ser utilizada para cualquier cosa que se os pueda ocurrir.

Su funcionamiento es muy sencillo, y lo primero que habrá que hacer será añadir la llamada a los ficheros de las funciones.

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

El siguiente paso consiste en crear la sección donde estarán los datos que queramos que utilice esta librería. En este caso, son listas en html.

<div id="slider">
<div class="slider-content">
<ul>
<li id="a"><a name="a" class="title">A</a>
<ul>
<li><a href="/">Adam</a></li>
<li><a href="/">Alex</a></li>
<li><a href="/">Ali</a></li>
<li><a href="/">Apple</a></li>
<li><a href="/">Arthur</a></li>
<li><a href="/">Ashley</a></li>
</ul>
</li>
<li id="b"><a name="b" class="title">B</a>
<ul>
<li><a href="/">Barry</a></li>
<li><a href="/">Becky</a></li>
<li><a href="/">Biff</a></li>
<li><a href="/">Billy</a></li>
<li><a href="/">Bozarking</a></li>
<li><a href="/">Bryan</a></li>
</ul>
</li>
etc...
</ul>
</div>
</div>

Por último nos falta hacer la llamada a la función que nos proporcionará el efecto deseado.

<script type="text/javascript">
$(document).ready(function(){
$('#slider').sliderNav();
});
</script>

Esta librería tiene una serie de opciones que te permiten cambiar la apariencia. Puedes darle la altura que desees utilizando la propiedad height. Otra cosa que se puede modificar es la aparición de los elementos de navegación. Por defecto aparecen las letras del alfabeto inglés, pero si necesitáramos otro tipo de elementos, también se los podemos añadir. La forma de hacerlo sería la siguiente.

$('#slider').sliderNav({items:['item1','item2','item3'], height:'200'});

De esta forma le indicamos que la altura sea 200 px y que en vez de que aparezca las letras del alfabeto, que pongan como enlaces lo que hayamos indicado dentro de items.

Vía: craftyman.net