Image Image Image Image Image
Scroll to Top

Topo

20

jan
2012

Sem Comentários

Em Blog
HTML

Por allison

Paginação em listas HTML com jQuery Quick Pagination

Em 20, jan 2012 | Sem Comentários | Em Blog, HTML | Por allison

Fonte: KaduNew


Com o plugin Quick Pagination você é capaz de criar paginações rapidamente em suas listas. Ótimo para converter listas extensas em listas menores. O plugin ainda permite ajustar alguns dos seus parâmetros adicionais. Você pode especificar a navegação na parte superior, inferior ou ambos, pode também especificar o número de itens a serem exibidos.

Lembrando que para usar esse plugin você deve fazer o download da biblioteca jquery, ou carregar o arquivo a partir do site do Google.

Como usar jQuery Quick Pagination

Exemplo de marcação HTML

    <ul class="pagination1">
        <li>1 - Item 1 de 25</li>
        <li>2 - Item 2 de 25</li>
        <li>3 - Item 3 de 25</li>
        <li>4 - Item 4 de 25</li>
        <li>5 - Item 5 de 25</li>
        <li>6 - Item 6 de 25</li>
    ....

Criando três exemplo de paginação

    <script type="text/javascript">
    $(document).ready(function() {
        $("ul.pagination1").quickPagination();
        $("ul.pagination2").quickPagination({pagerLocation:"both"});
        $("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
    });
    </script>

Primeiro exemplo

Opção padrão mostrando 10 itens da lista e navegação na parte inferior.

$(”ul.pagination1″).quickPagination();

Segundo exemplo

Mostrando 10 itens da lista e navegação na parte superior e inferior.

$(”ul.pagination2″).quickPagination({pagerLocation:”both”});

Terceiro Exemplo

Especificados 3 itens na lista e navegação na parte superior e inferior.

$(”ul.pagination3″).quickPagination({pagerLocation:”both”,pageSize:”3″});

Referências:


Redes Sociais

Tags | , , , ,

Enviar um Comentário