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.

[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”html”]

Então nós chamamos o plugin com as opções básicas e os seguintes estilos básicos:
[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”js,css”]

E temos o seguinte resultado:
[jsfiddle url=”http://jsfiddle.net/fhpaC/” include=”result,html,js,css”]

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:

[jsfiddle url=”http://jsfiddle.net/LHnPq/2/” include=”result,html,js,css”]

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:

[gist]https://gist.github.com/2984795[/gist]

 

 

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *