Topo

6 Dez

Paginação com Javascript

Postado por kaiserlino em: Recursos, Todos, Tutoriais.

Paginação Javascript

Neste tutorial iremos ensinar como criar uma simples paginação com javascript apenas usando um plugin da framework Jquery: Jquery Pager. O que o Jquery Pager fazer é simular uma paginação para elementos de sua página.

Faz um tempo atrás um amigo meu do Forumweb tinha me perguntado como ele poderia fazer a paginação de um Guestbook que ele tinha desenvolvido para um cliente, eu dei apenas a solução mais conhecida em PHP, a qual diversos sites utilizam-se sem problemas.

Navegando na internet nessa busca tinha encontrado este plugin para Jquery que faz exatamente isso, porém com uma forma bastante simples.

Pelo tutorial ser meio longo iremos colocá-lo após o link:

Enumerando páginas com Javascript

Inicialmente iremos precisar do Jquery em seu site.
E do plugin Jquery Pager desenvolvido por Rikrikrik.

Ambos estão disponíveis neste arquivo: Jquery Pager (326)

1o Passo Incluir entre as tags <head> e </head> o arquivos jquery.js e as funções jquerypager.js e também nossa folha de estilos styles.css.

PLAIN TEXT
HTML:
  1. <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery_pager.js" type="text/javascript"></script>

2o Passo Ainda entre as tags <head> e </head> anexar o seguinte código:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript"><!--
  2.    $(document).ready(function () {
  3.  
  4. $(\\\\'#example1\\\\').pager(\\\\'div\\\\');
  5.  
  6. $(\\\\'#example2\\\\').pager(\\\\'p\\\\', {       navId: \\\\'nav2\\\\',       height: \\\\'15em\\\\'     });
  7.  
  8. $(\\\\'#example3\\\\').pager(\\\\'p\\\\', {       navId: \\\\'nav3\\\\',       prevText: \\\\'Previous\\\\',       nextText: \\\\'Next\\\\',       linkText: [\\\\'Pagina 1\\\\', \\\\'Pagina 2\\\\', \\\\'Pagina 3\\\\', \\\\'Pagina 4\\\\']     });     $(\\\\'#example4\\\\').pager(\\\\'p\\\\', {       navId: \\\\'nav4\\\\',       navAttach: \\\\'after\\\\',       prevText: \\\\'Previous\\\\',       nextText: \\\\'Next\\\\',       linkText: [\\\\'Page 1\\\\', \\\\'Page 2\\\\', \\\\'Page 3\\\\', \\\\'Page 4\\\\'],       linkWrap: \\\\'
  9. <div></div>
  10. \\\\'     });   });
  11. // --></script>

3o Passo Dependendo do identificador "fechar" o conteúdo da página com div ou p

PLAIN TEXT
HTML:
  1. <p id="example1" class="examples"></p>
  2.  
  3. <h2>Lorem Ipsum</h2>
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non metus. Nunc pulvinar, felis sit amet nonummy pulvinar, lorem magna cursus elit, nec tristique tellus tellus id lectus. Quisque ut eros. Proin volutpat, augue eget vulputate ullamcorper, est neque posuere lectus, sit amet commodo tellus libero non mauris. Morbi pretium tellus at erat ornare euismod. Curabitur vitae purus non orci lacinia viverra. Duis vulputate tempor turpis. Maecenas hendrerit metus sodales erat. In ipsum justo, pulvinar sit amet, placerat et, mollis ac, magna. Nam vitae ipsum in sapien elementum porta. Proin porttitor, elit at aliquam ullamcorper, ipsum lorem tincidunt libero, et gravida metus velit et orci. Curabitur eleifend elit a leo. Sed blandit. Vestibulum porttitor congue urna. Mauris tempor dolor at leo. In eros. Suspendisse pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sem pede, aliquam at, tincidunt eu, hendrerit ac, nibh.
  5.  
  6. liquam in pede. Fusce libero diam, semper et, eleifend eu, dictum eget, arcu. Nunc condimentum massa laoreet massa. Morbi volutpat turpis ac diam.

Final do Tutorial

Paginação
Site do criador

Autor: kaiserlino

Administrador do Dk Design, estudante de design e trabalhando com SEO. Criei este blog com o intuito de ser uma fonte de referências e inspiração para todos iniciando na área. Mais

Assine agora nossos feeds RSS e acompanhe o blog com toda a praticidade.
Dk Design Rss Feeds

Leia mais:

1 Comentário no post.

  1. Rogerio's Gravatar

    Postado por Rogerio em 06.12.07 às 12:40 pm

    Show de bola…. muito bom

Deixe sua marca