SummArg | Cursos y recursos para webmasters

04/02/2011

Paginación animada con jPaginate

jPaginate es un plugin para jQuery que nos permite obtener una paginación animada, de modo que al presionar el link para ir a determinada página, los números se desplazan hacia un lado u otro dejando al link activo siempre en el medio.

Entre sus opciones podemos enumerar:

    • count: El número total de páginas
    • start: Número de páginas que debe mostrar al iniciarse
    • display: Cuantos números deben ser visibles.
    • border: Si debe haber un borde, admite: true o false
    • border_color: Color del borde
    • text_color: Color del texto y de los números
    • background_color: Color del fondo
    • border_hover_color: Color del borde al pasar el puntero del mouse
    • text_hover_color: Color del texto al pasar el puntero del mouse
    • background_hover_color: Color del fondo al pasar el puntero del mouse
    • images: Si las flechas deben ser imágenes, admite: true o false
    • mouse: Con el valor “press” el usuario puede mantener el botón del mouse presionado y las páginas seguirán pasando. Con el valor “slide” los números de página pasarán una vez por click.
    • onChange: La función al clickear en una página. El número de página clickeada puede ser usado como argumento.

      Para implementarlo, en cualquier parte dentro de podemos colocar:

      <div id="demo1"></div>
      

      Y antes del cierre de linkeamos jQuery y jPaginate.js (opcionalmente podemos utilizar el CSS que viene en el demo). Inicializamos el script con algunas opciones:

      <script src="jquery-1.3.2.js" type="text/javascript"></script>
      <script src="jquery.paginate.js" type="text/javascript"></script>
      <script type="text/javascript" src="jquery-1.3.2.js"></script>
      <script src="jquery.paginate.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(function() {
      $("#demo1").paginate({
      count         : 100,
      start         : 1,
      display     : 8,
      border                    : true,
      border_color            : '#fff',
      text_color              : '#fff',
      background_color        : 'black',
      border_hover_color        : '#ccc',
      text_hover_color          : '#000',
      background_hover_color    : '#fff',
      images                    : false,
      mouse                    : 'press'
      });
      });
      </script>
      

      Para pasar una URL de página con la nueva numeración, se podría utilizar algo como:

      onChange     : function(page){
       location = ‘page.php?=’+page; }

      Descargar | Demo

      Dejar un comentario