O Load More é um plugin que permite simplificar vários conteúdos, usando JSON e um botão para carregar mais.
Com ele é possível criar estruturas HTML e usar variáveis para serem substituídas por algo que esteja dentro dados que foram carregados.
O plugin não necessita do Jquery. E não pode ser chamado usando um elemento Jquery.
Para o seu uso é necessário as seguintes linhade comando.
É necessário uma estrutura HTML, onde conterá as variáveis que seram substituídas posteriormente.
Exemplo:
<!--Base Element-->
<div id="noticias">
<div id="baseElement">
<h1>{{@title}}</h1>
<img data-src="{{@img}}"/>
<p>{{@description}}</p>
<article>{{@news}}</article>
<span>{{@date}}</span>
</div>
</div>
Obs.: Para usar o atributo src nos elementos, ao invés de usá-lo, use data-src, pois ao usar o atributo src, o navegador vai escrever erros 404 no console. dizendo que não existe o caminho.
É possível chamar a variável mais de uma vez.
No javascript, para chamar na sua forma mais básica use:
//Obtem o elemento
var news = document.querySelector('#noticias');
var content = news.loadMore({
config: {
object: 'json/data.json' //local onde estão os dados em JSON
},
baseElement: '#baseElement' //elemento de estrutra base
});
#baseElement {
display: none;
}
//Exemplo
[
{
"title" : "Noticia 1",
"description" : "Descrição da notícia 1",
"img" : "img/1.jpg",
"date" : "19 de Janeiro de 2015",
"news" : "Lorem ipsum dolor.",
"author" : "Igor Fernandes"
},
{
"title" : "Noticia 2",
"description" : "Descrição da notícia 2",
"img" : "img/2.jpg",
"date" : "19 de Janeiro de 2015",
"news" : "Lorem ipsum dolor.",
"author" : "Igor Fernandes"
}
]
O que é plugin fará é pegar o JSON e substuir suas chaves com as variáveis na estrutura HTML escolhida em Base Element
.
*As propriades que tiverem em possuírem um * * são obrigatórias
Objeto que conterá todos as propriedades para obter o JSON seja externo ou interno.
Propriedades: object, method, requestData.
Caminho (URL) onde está localizado o JSON. O máximo de dimensões que JSON deve possuir é 3.
Tipo: string
.
Default:
config: {
object: '' //este propriedade é obrigatório para o uso do Load More
}
Método de requisição do JSON. Podendo ser: GET ou POST.
Tipo: string
.
Default:
config: {
method: 'GET'
}
Se for necessário o envio de algum parâmetro use está propriedade.
Tipo: object
.
Default:
config: {
requestData: {}
}
Quantidade de itens que o Load More vai começar carregando.
Tipo: natural number
.
Default:
itemsInit: 1
Quantidade de itens à ser carregado, quando a função loadMore
for chamada.
Tipo: natural number
.
Default:
itemsPerLoad: 1
Elemento estrutural para para substituíção das variáveis.
Tipo: string selector
, ou element
.
Default:
baseElement: '' //Está propriedade é obrigatória para o uso do Load More
Elemento que receberá a função loadMore
, quando for clicado.
Tipo: string selector
, ou element
.
Default:
buttonToLoadMore: 1
Opção de chamar a função loadMore
, ao descer scroll até o final do elemento prinpal.
Tipo: boolean
.
Default:
scrollToLoadMore: false
Adicionar efeitos para quando for ser inserido os novos itens carregados pelo loadMore
. Caso não usar efeitos, use false
.
Efeitos: fadeIn, zoomIn.
Tipo: string
, boolean
.
Default:
effectOnLoadItems: false
Caso o JSON, seja divido de forma diferente exemplo:
{
"corporativo": [
{
"title": "Corporativo 1",
"desc": "Descrção 1",
"img": "img/1.png"
},
{
"title": "Corporativo 2",
"desc": "Descrção 1",
"img": "img/2.jpg"
},
],
"shows": [
{
"title": "Shows 1",
"desc": "Descrção 3",
"img": "img/3.png"
},
{
"title": "Shows 2",
"desc": "Descrção 4",
"img": "img/4.jpg"
},
]
}
É possível usar somente por exemplo o array corporativo, usando: [corporativo]
.
Tipo: string
.
Default:
specificObject: null
Tempo mínimo para mostrar novos itens.
Tipo: miliseconds
.
Default:
minDelay: 0
Ao terminar a função loadMore
, descer automaticamente o scroll para onde estão os elementos recém carregados.
Tipo: boolean
.
Default:
autoScroll: false
Esperar o término das transições antes de ser permitido ser chamada a função loadMore
novamente.
Tipo: boolean
.
Default:
waitLoadMore: true
Este callback será chamado quando terminar a requisição do JSON. Ele retorna o objeto obitido, como parâmetro.
Tipo: function
.
Default:
onLoadData: function(object) {
void(0);
}
Este callback será chamada antes de mostrar os novos itens na tela. Ele retorna o número de vezes chamado a função loadMore
-1.
Tipo: function
.
Default:
beforeLoadMore: function(loadMoreTimes) {
void(0);
}
Este callback será chamada depois de mostrar os novos itens na tela. Ele retorna o número de vezes chamado a função loadMore
, e os itens adicioandos.
Tipo: function
.
Default:
afterLoadMore: function(items, loadMoreTimes) {
void(0);
}
Este callback será chamada depois de mostrar os últimos itens na tela. Ela retorna os itens adicionados.
Tipo: function
.
Default:
lastLoadMore: function(items) {
void(0);
}
Esta callback será chamado quando o botão declarado em buttonToLoadMore
.
Tipo: function
.
Default:
clickButtonLoadMore: function() {
void(0);
}
Este callback será chamado sempre quando não houver mais itens para carregar.
Tipo: function
.
Default:
alwaysEndLoadMore: function() {
void(0);
}
Ao chamar o plugin loadMore
, será retornado uma classe, permitindo a dinamicidade do mesmo. Ele possui funções que podem melhorar o seu uso.
É possível obtê-los ou alterar-los.
- autoScroll
- effectOnLoadItems
- itemsPerLoad
- loadMoreTimes
- minDelay
- scrollToLoadMore
- specificObject
- waitLoadMore
Alterar ou chamar o callback afterLoadMore.
Alterar ou chamar o callback alwaysEndLoadMore.
Alterar ou chamar o callback beforeLoadMore.
Alterar ou chamar o callback clickButtonLoadMore.
Alterar ou chamar o callback lastLoadMore.
Alterar ou chamar o callback onLoadData.
Todos os itens adicionados será apagado e será colocado de volta o baseElement
.
Obtém o valor do specificObject
, sem os []
.
Função principal do plugin, ele responsável por carregar e mostrar novos itens na tela.
- specificLoad
- itemsToLoad
- specificObject
Carrega itens com uma chave em comum, exemplo:
content.loadMore({author: 'Igor Fernandes'});
Número de itens para carregar, ao ser declarado, este parâmetro ignorará a propriedade itemsToLoad
declarada antes. Exemplo:
content.loadMore(null, 3);
Especifica antes de carregar mais itens, o valor de specificObject
, ao ser declarado, este parâmetro ignorará a propriedade specificObject
declarada antes. Exemplo:
content.loadMore(null, null, '[corporativo]');
Reinicia o LoadMore, fazendo com que o próximo item a ser carregado, seja o primeiro do objeto novamente, e seguirá a partir daí.
Ou seja apagar apaga da memória os itens já carregados.
Exemplos: http://igorxp5.github.io/LoadMore/.
Obs.: Para vê o código, use o Ctrl+U no Chrome para vê o código fonte.
Igor Fernandes
2.1
LCS