SummArg | Cursos y recursos para webmasters

25/03/2012

jQuery Quick Pagination, paginador de listas ultra liviano y simple

jQuery Quick Pagination es un excelente recurso para paginar listas en poco tiempo y con un script ultraliviano (3kb). Permite colocar la paginación al inicio de la lista, al final o en ambas posiciones, sólo debemos indicarle que cantidad de elementos li queremos que se muestren por página y el plugin hará el resto.

Para aplicarlo a un proyecto primero vinculamos el archivo JS y jQuery desde el <head> de nuestro documento.

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.quick.pagination.min.js"></script>

Establecemos la estructura de la lista que deseamos paginar, le colocamos clase “pagination”.

<ul class="pagination">
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
<li>Elemento</li>
</ul>

Al final del documento, relacionamos nuestro paginador a la lista correspondiente.

<script type="text/javascript">
 $(document).ready(function() {
 $("ul.pagination").quickPagination();
 });
 </script>

Y si deseamos darle estilo, estas son las clases que el script nos genera y nosotros podemos utilizar a conveniencia.

ul.simplePagerNav li{
 display:block;
 float: left;
 padding: 10px;
 margin-bottom: 10px;
 font-family: georgia;
 font-size:14px;
 }
 ul.simplePagerNav li a{
 color: #333;
 text-decoration: none;
 }
 li.currentPage {
 background: red;
 background: #FF9500;
 }
 ul.simplePagerNav li.currentPage a {
 color: #fff;
 }

Demo | Descargar

Dejar un comentario

  1. excelente tutorial bro corto y conciso, tal como debe de ser

Dejar un comentario