Deprecated: Assigning the return value of new by reference is deprecated in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/post-series/post-series.php on line 841 Notice: is_feed was called incorrectly. Conditional query tags do not work before the query is run. Before then, they always return false. Please see Debugging in WordPress for more information. (This message was added in version 3.1.) in /home/summarg/domains/summarg.com/public_html/wp-includes/functions.php on line 3245 jQuery Quick Pagination, paginador de listas ultra liviano y simple | SummArg

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

Notice: Undefined variable: wp_sh_class_name in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1002 Notice: Undefined variable: wp_sh_class_name in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1002 Notice: Use of undefined constant XML - assumed 'XML' in /home/summarg/domains/summarg.com/public_html/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048