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.
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
- Função: O seletor do gatilho, que poderá ser:
- 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 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!