jPaginate Plugin para paginar con jQuery

jPaginate Plugin para paginar con jQuery

jPaginate es un plugin de jQuery para paginación que viene con una peculiaridad: números de página animados. El usuario puede deslizarse a través de los números de las páginas disponibles haciendo clic o simplemente flotando sobre las flechas de avanzar. Los links a la página inicial y final también están disponibles.

Para hacer la llamada al plugin es de la siguiente manera

$(elementID).paginate()

Puedes configurar las siguientes propiedades del plugin:

  1. count: el número total de páginas
  2. start: ¿En qué número de las páginas visibles deben comenzar la navegación?
  3. display: ¿Cuántos números de página van a verse en la navegación?
  4. border: Si debe haber un borde (true / false)
  5. border_color: El color del borde
  6. text_color: Color del texto y los números
  7. background_color: Color de fondo
  8. border_hover_color: Color del contorno, cuando pasa por encima el mouse.
  9. text_hover_color: El color del texto cuando pasa por encima el mouse
  10. background_hover_color: Color de fondo cuando pasa por encima el mouse
  11. images: Si las flechas deben ser imágenes o no (true / false)
  12. mouse: esta propiedad puede tener dos valores.
    1. “press” con este valor cuando el usuario mantiene pulsado el ratón, los números de página seguirá deslizándose.
    2. "slide" los números de página se deslice una vez con cada clic.
  13.  onChange: Es el evento que se dispara cuando se hace clic en una página. Si llamamos una función podemos pasar como argumento el número de la página se hace clic.
     

En seguida el código para crear la paginación.

<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/style.css" rel="stylesheet" />
    <style>            
            a img{
                border:none;
                outline:none;
            }
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }            
            .demo{
            width: 580px;
            padding: 10px;
            margin: 10px auto;
            border: 1px solid #fff;
            background-color: #00AEEF;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 30px;
        }
                .demo h1 {
                    color:#CCC;
                }
        .pagedemo{
            border: 1px solid #CCC;
            width: 90%;
            margin: 2px;
            padding: 50px 10px;
            text-align: center;
            background-color: white;
            
            font-size: 50px;
        }
        </style>
    <script src="javascript/jquery-1.3.2.js"></script>
    <script src="javascript/jquery.paginate.js"></script>
</head>
        <div class="content">
            <div id="paginationdemo" class="demo">
                <h1>Demo Paginación</h1>
                <div id="p1" class="pagedemo _current" style="">Page 1</div>
                <div id="p2" class="pagedemo" style="display: none;">Page 2</div>
                <div id="p3" class="pagedemo" style="display: none;">Page 3</div>
                <div id="p4" class="pagedemo" style="display: none;">Page 4</div>
                <div id="p5" class="pagedemo" style="display: none;">Page 5</div>
                <div id="p6" class="pagedemo" style="display: none;">Page 6</div>
                <div id="p7" class="pagedemo" style="display: none;">Page 7</div>
                <div id="p8" class="pagedemo" style="display: none;">Page 8</div>
                <div id="p9" class="pagedemo" style="display: none;">Page 9</div>
                <div id="p10" class="pagedemo" style="display: none;">Page 10</div>
                <div id="demo5">
                </div>
            </div>
        </div>
    <script type="text/javascript">
        $(function () {            
            $("#demo5").paginate({
                count: 10,
                start: 1,
                display: 7,
                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',
                onChange: function (page) {
                    $('._current', '#paginationdemo').removeClass('_current').hide();
                    $('#p' + page).addClass('_current').show();
                }
            });
        });
		</script>

Compartir

Comentarios (2)

  • Juan Vivas Responder

    Es posible añadir un botón que lleve a la última pagina y otro a la primer página?

    Wednesday, May 3, 2017 2:29 PM
  • Juan Vivas Responder

    Es posible añadir un botón que lleve a la última pagina y otro a la primer página?

    Wednesday, May 3, 2017 2:37 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com