Criando elementos deslizantes com o jQuery Sliding

Este post é um tutorial completo sobre como usar o  jQuery sliding plugin. Leia a documentação e exemplos em funcionamento para maiores detalhes.

O que o plugin faz?

Este plugin tem o propósito de criar elementos deslizantes, com uma navegação em uma coleção de elementos. Para uma coleção pequena, use o sliding padrão. Para uma coleção maior, use o sliding remoto, que carrega elementos sob demanda e armazena localmente. Desta forma o plugin não fará nenhuma requisição que já foi feita antes.

Onde é usado

Este plugin foi desenvolvido para o site do Globo.tv na listagem de vídeos.

The use of sliding plugin at Globo.tv

Um exemplo simples

Primeiro, nós chamamos o plugin com suas dependências e um markup simples de uma div e uma lista não ordenada. Isto é a  marcação padrão, mas você pode mudar via opções, para ver diferentes opções, acesse a documentação.

Então nós chamamos o plugin com as opções básicas e os seguintes estilos básicos:

E temos o seguinte resultado:

Sliding remoto

Quando você escolhe a opção url, você irá ativar o slide remoto. Além disto, você pode especificar uma opção urlFormat, em que é possível escolher um padrão de url. Isto é útil quando você tem url’s como ‘yourdomain/page/2/’.

Nós usaremos uma url de exemplo que retorna a listagem de html. Então o código completo abaixo:

Nós passamos no request o conteúdo a ser exibido.

Temos que manualmente declarar a opção setTotalPages, desta forma o plugin sabe o máximo de requests que precisam ser feito. Geralmente esta informação vem de um request ajax, mas é necessário de qualquer forma caso contrário o plugin irá permitir que seja paginado eternamente e isto não desabilitará os botões quando necessário.

Eu usei params para passar o conteúdo, mas é só um exemplo que podemos usar o params para enviar dados extras.

Com o callback onAppend você pode modificar o retorno de dados a ser renderizado, desta forma você pode ter um formato ajax customizado e extrair do data somente o necessário, como uma chave json com o  conteúdo html, assim:

$('element').sliding({
items: 4,
url: url,
urlFormat: '{url}/page/{page}/',
next: nextLink,
prev: prevLink,
disabledClass: 'disabled',
speed: 500,
onAppend: function(data) {
// data is { total_pages: 2, html: 'content' }
return data.html;
}
});

 

 

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>