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