Plugin: Jquery Endless Page (Infinite scroll)

Um recurso muito utilizado na web 2.0 é permitir que o usuário ao clicar em um botão ou sempre que o scroll chegue ao fim de um conteúdo, possa ver mais resultados de uma busca, substituindo a paginação comum, este plugin permite trabalhar das duas formas.

Download: Jquery Endless Page

Utilizando um gatilho

A chamada do plugin baseado em um gatilho é bem simples, basta informar:

• O seletor utilizado para a chamada do plugin, que deverá ser a div onde o conteúdo será mostrado;
• Um arquivo backend com a lógica para mostrar o conteúdo
• O seletor do gatilho, que poderá ser: div/span/a, ou qualquer elemento onde o texto possa ser capturado com o método .text() do Jquery;

$('#Content').ep({
   'content'  : 'content.php',
   'trigger'  : '#More'
});

Exemplo de chamada do plugin utilizando um gatilho

Utilizando o scroll como gatilho

Por default, o plugin irá definir o gatilho como sendo o scroll, então se o parâmetro trigger for omitido na chamada do plugin, automáticamente o scroll será selecionado como gatilho.

$('#Content').ep({
   'content'  : 'content.php'
});

Para definir o scroll como o gatilho do plugin, basta omitir este parâmetro.

Outros parâmetros

Abaixo segue uma demonstração da utilização do plugin com todos os parâmetros disponíveis sendo declarados:

$('#Content').ep({
   'content'   : 'content.php',
   'trigger'   : '#More',
   'results'   : 10,
   'message'   : 'Loading...',
   'beforeLoad': function(){
      $('#Console').text('Carregando ...');
   },
   'onLoad'    : function(){
      $('#Console').text('');
   },
   'onEnd'     : function(){
      $('#Console').text('Fim dos resultados');
   }
});

Abaixo a função de cada parâmetro:

• String content:
  • Função: o arquivo backend, com a lógica para a visualização dos resultados;
  • Default: não há
• String trigger:
  • Função: O seletor do gatilho, que poderá ser: div/span/a, ou qualquer elemento onde o texto possa ser capturado com o método .text() do Jquery, para utilizar o scroll basta omitir este parâmetro;
  • Default: scroll
• Integer results:
  • Função: o número de resultados que deverão ser mostrados por requisição;
  • Default: 1
• String message:
  • Função: O texto alternativo que substituirá o texto original do trigger enquanto o conteúdo estiver sendo carregado;
  • Default: Carregando...
• Function beforeLoad:
  • Função: uma função para ser executada antes do conteúdo ser carregado;
  • Default: void(0)
• Function onLoad:
  • Função: uma função para ser executada após o conteúdo ser carregado;
  • Default: void(0)
• Function onEnd:
  • Função: uma função para ser executada quando não houver mais conteúdo a ser carregado;
  • Default: void(0)

Exemplos de utilização

Abaixo seguem dois exemplos, o primeiro mostra como fazer para carregar mais conteúdo em uma página e o outro mostra como carregar mais imagens para uma galeria, se quiser baixar os dois de uma vez só, utilize o terceiro link.

Download 1: Plugin EP - Exemplo conteúdo dinâmico
Download 2: Plugin EP - Exemplo galeria dinâmica
Download 3: Plugin EP - Exemplos

A lógica por traz do plugin

Para finalizar, é preciso entender uma pequena característica do plugin, cada vez que ele é chamado, um contador (counter) tem seu valor adicionado com o valor definido no parâmetro results, tanto o valor da variável counter quanto o valor da variável results são passados pelo plugin via GET, para o arquivo backend. Para que o conteúdo seja carregado da maneira correta você precisará trabalhar a lógica em cima destas duas variáveis. Nos exemplos disponibilizados acima, você verá com detalhes como pode fazer isso.

Licença de uso

O plugin esta sobre a licença MIT de uso.

Finalizando

É isto, espero que tenham apreciado, dúvidas e sugestões fique livre para comentar.

Até uma próxima!