Como acabei precisando de um scroller assim, aproveitei e criei uma classe que poderei reutilizar em algum outro projeto em que ela se faça necessária. Já que gostei do resultado, vou aproveitar e deixar o script pra vocês. O resultado será algo parecido com esse exemplo. Prontos? Então vamos lá!

O Código

O script não poderia ser mais simples, em torno de umas 50 linhas de código (você precisaria de centenas se não fosse a Mootools, ou alguma outra biblioteca que faça o serviço sujo). Você pode fazer o download dele aqui. Para “instalá-lo”, basta incluí-lo em seu documento, assim como a Mootools. Além disso, você também vai precisar do plugin Fx.Scroll, que pode ser conseguido no More Builder da Mootools, e incluí-lo no seu documento também.

Update: logo que precisei usar a classe novamente, vi que cometi um erro grotesco. Código atualizado, com erro corrigido e uma nova funcionalidade, explicada logo abaixo. Valendo uma mariola pra quem descobrir minha estupidez, os dois códigos estão disponíveis para download.

O HTML

O HTML necessário é a parte que eu considero a mais complicada, chata e sem graça. Sem o HTML criado direitinho, o scroller não vai funcionar. A lógica é a seguinte: precisamos de um container (geralmente uma div) de uma largura (ou altura) fixa. Esse container é quem vai esconder os itens que não serão mostrados no scroller. Dentro desse container, vamos precisar de mais um container (geralmente mais uma div, ou então uma lista), também de altura/largura fixa, mas que seja igual a toda a extensão dos itens. Ou seja, o container de dentro será maior do que o container de fora.

<div id="container">
    <div></div>
</div>

Acredite, é mais complicado do que parece. Agora sim, podemos colocar nossos itens dentro do container que está dentro de outro container (hein?). Fora isso, precisamos apenas de mais dois elementos (podem ser links) para serem os handlers de anterior e próximo e pronto, aí está o HTML. Só precisamos do CSS que vai ajudar na mágica do script.

O CSS

Como o nosso container externo precisa esconder o que há no container interno (que é maior), ele precisará de um overflow: hidden. Sem isso, tudo o que há no container interno ficará exposto, e aí o scroller perde a graça. Também não podemos nos esquecer de definir as alturas/larguras dos containers e itens. Vamos fazer primeiro um scroller vertical, ligeiramente mais fácil:

* {
  margin: 0;
  padding: 0;
}
#container {
  height: 20px;
  overflow: hidden;
  width: 100px;
}
#container div {
  /* Não é necessário definir a altura, o elemento irá "crescer" sozinho */
  width: 100px;
}
#container p {
  /* A mesma altura de #container, mas isso pode variar com o gosto do freguês */
  height: 20px;
}

O Script

Agora sim, vamos colocar a mão na massa. Minha classe, quando instanciada, leva apenas dois parâmetros: o container exterior (o container interior é deduzível…) e as opções. Dentre elas, temos à disposição todas as opções da classe Fx, e também previousButton e nextButton, que são os handlers para o elemento anterior e posterior do scroller.

var myScroller = new Fx.Scroller("container", { previousButton: "previous", nextButton: "next" })

Aproveitando a atualização da classe, também criei vergonha na cara e adicionei os eventos onNext e onPrevious, executados quando o scroller vai para frente ou para trás, respectivamente.

Pronto! Você escreveu apenas uma linha de script e seu scroller já está funcional, passando de um elemento para outro com apenas um clique!

Scrollers Horizontais

A termos de script, um scroller horizontal é idêntico. A mágica se esconde toda no CSS para este caso. Primeiro precisamos colocar os elementos um ao lado do outro dentro do container interior, certo? Certo. Para isso, usamos a propriedade float, sinta-se à vontade para escolher a qual lado flutuar.

Passando ao segundo passo, devemos definir a largura. A fórmula é a seguinte: número de elementos vezes a largura de qualquer um deles. Se você usar margins ou paddings, não esqueça de levá-los em consideração também.

Usando a técnica de scrollers horizontais, também podemos criar scrollers “mistos”. Nesse caso, há várias linhas e várias colunas de itens ao mesmo tempo. O efeito, se bem usado, pode ficar muito interessante. Quem teve a oportunidade de observar os demos da versão 1.1 da Mootools deve saber do que estou falando.

Dicas para Ir Além

Bem, só fazer itens se mexerem pode não ter tanta graça assim pra você. Como eu disse, minha classe usa todas as opções da classe Fx, ou seja, eventos, transições, offsets, enfim. Agora é sua vez de brincar! Use o offset para mudar a posição dos itens, eventos para mudar sua opacidade, criatividade! Também sinta-se livre para usar os métodos da classe também: next, previous, scrollTo, enable e disable (para ativar ou desativar os botões).

Espero que isso sirva pra alguma coisa! E também espero postar em um intervalo um pouco menor… O pessoal deve ter pensado que eu fugi do país depois de uma certa polêmica. Mas não, só estive ocupado mesmo… Até mais!

Posts Relacionados

• Mootools – Chain
• Mootools – Eventos
• Mootools – Options
• Sliders com Mootools
• Mootools – Menu Sanfona

O JGQueryString é um objeto que desenvolvi para tornar o JavaScript capaz de ler Query Strings, aquelas informações passadas junto com a URL, depois do “?”. Ele permite acessar os valores das variáveis enviadas pelo método HTTP GET.

Métodos

• getVar(varName) – Retorna o valor da variável varName.
• getVars() – Retorna um array contendo todas as variáveis enviadas.

Exemplo de Uso:

JGQueryString.getVar("firstName");
JGQueryString.getVars()["variavel"];
var httpGetVar = JGQueryString.getVars();
alert(httpGetVar["variavel"]);

E a URL da página deve conter a query string: http://url/da/pagina.htm?variavel=valor&outravar=outrovalor

Testada em IE 6 e Firefox 1.5. Quem puder testar em outros browsers, ou detectar algum bug, me avise.

Posts Relacionados

• Escopo de Variáveis
• Usando “With”
• JavaScript Orientado a Objetos – Parte 2
• Funções em Diferentes Escopos
• Fila de Requisições em Ajax