MooSlide - painel deslizante

16 Julho 2008 Escrito por Gonçalo Martins

Com este artigo pretendo exemplificar como se cria um slide parecido com aquele que se encontra no topo deste site... Altamente personalizavel, através de CSS e do código no Script, esta pode ser a solução para muitos websites.

Mãos à obra!

Passo 1: Scripts!

Inserir antes do </head> do seu site a chamada ao mootools e ao script MooSlide(o qual terá que colocar no seu servidor)

Passo 2: Código de Chamada

Colar o código de implementação (chamada) no seu site

'toggle' vai ser o futuro 'id' do link de chamada, enquanto que 'test' é o id do <div> que contem o conteúdo a aparecer no slide.

No código acima pode ainda definir:

A velocidade do slide;
A velocidade do "fade out";
Remover no click sim/nao;
A opacidade;
A altura do slide;
Orientação do slide: 'top' ou 'bottom'.

Passo 3: Link de chamada

<a href="#" id="toggle">Toggle slider 1</a>

Passo 4: Criar Slide

Criar o Slide e o seu conteúdo

<div id="test" class="mooslide">
#O conteudo que deseja....
</div>

Passo 5: Css

.mooSlide {
    background-color:#000;
   padding: 10px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 16px;
   color: #FFFFFF;
   font-size: 11px;
}

Download dos ficheiros referidos no artigo:
mooSlide.zip	[(scripts, css, html)]	24 Kb



Lucas Outubro 03, 2008	caramba com este mootools da pra coisa pra caramba.. Ficou muito legal este mooslide!! vlw amigo..


jeton Outubro 16, 2008	perfect thanks for sharing...


Paula Julho 12, 2009	Olá, nao consigo colocar o slide, ajuda? Obrigada