Caixa Expansivel – Tutorial Mootools | Blog

Caixa Expansivel – Tutorial Mootools

Criado por Mateus Souza em 10 de setembro de 2008 às 10:51

Hoje vamos aprender a criar uma caixa espansivel usando o Mootools(fãs do JQuery, não se preocupem, estou preparando um tutorial sobre tal
também e em breve estará disponível). Vamos ao Tutorial:

1. Mootools

Como sempre, vamos “chamar o Mootools, vocês já devem estar cansados de saber mais mesmo assim eu vou colocar o código, lembrando que é antes de

<script type="text/javascript" src="mootools.svn.js"></script>

Logo depois do código acima adicione essa linha de código, que será a responsável pelo nosso efeito:

<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('section');
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});
</script>

2.CSS

copie o estilo CSS usando em nosso exemplo e deixo da maneira que quiser, poder ser em um arquivo externo(para experientes) ou dentro do HTML mesmo:

<style type="text/css">
body{
font-family:"Lucida Grande", “Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333;
}
div.container{
margin:30px auto;
width:350px;
}
h2{ margin:0px;
padding:0px;
border:0px;
}
h2{    color:#FFFFFF;
font-size:13px;
display:block;
background:url(img/h2_bg.gif) top left no-repeat #9A9A9A;
}
h2 span{
padding:5px 10px;
background:url(img/h2_span_bg.gif) top right no-repeat;
display:block;
}
h2 a:link, h2 a:visited{
color:#FFFFFF;
text-decoration:none;
display:block;
}
#section {
background:url(img/section_bg_left.png) bottom left  no-repeat #EEEEEE;
font-size:12px;
}
#section div{
background:url(img/section_bg_right.png) right bottom no-repeat;
padding:10px;
}
</style>

3: HTML

Este é o código que você precisará, é só alterar (título e <”– O seu conteúdo aqui –>) por o que você desejar:

<h2>
	<span><a href="#" id="toggle">Título</a></span>
</h2>
<div id="section">
	<div>
	<"– O seu conteúdo aqui –>
	</div>
</div>

Em nosso exemplo ficou da seguinte maneira:

<h2>
	<span><a href="#" id="toggle">Click Aqui</a></span>
</h2>
<div id="section">
	<div>
	<strong>Exemplo </strong><br />
	Viu só como é facil, não tem segredo.<br />
	Espero que tenham gostado<br />
	</div>
</div>

Até a próxima.

Postado em CSS, Javascript, Mootools, Tutoriais