Mootools

Categoria | 7 posts usam esta categoria.

Descrição: Não sou ninja mais sei o suficiente para fazer um tutorial aqui outro ali...

Desenvolvimento Web – 23 Cheat Sheets de Grande Ajuda

Criado por Mateus Souza em 19 de janeiro de 2009 às 16:30

Como esse é o meu primeiro post do ano…vamos postar algo eficiente que ajude a todos
Pra quem não sabe…teve algumas pessoas que resolveram criar PDFs ou Imagens contendo uma ajuda, um help pra quem esqueceu os codigos de CSS por exemplo.
Esses arquivos receberam o nome de Cheat Sheets (num sei o que significa e nem quero saber )

Tem de tudo…HTML/XHTML, CSS, JavaScript (incluindo MooTools e jQuery), e mais alguns.Espero que ajude a todos:

HTML/XHTML

1. HTML Help Sheet

Criando um Slideshow usando Mootools – Tutorial Mootools

Criado por Mateus Souza em 22 de outubro de 2008 às 8:55

Bom pessoal faz um tempinho que não posto um tutorial aqui , então bora manda bala que esse tutorial esta demais, muito bom mesmo:

O slideshow utiliza o o script criado pelo site creativeponey e, este script só funciona em Mootools 1.11.

Demonstração / Download dos Arquivos

HTML
Vamos colocar logo tudo de uma vez para agilizar o processo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Slideshow Mooltools - By Mateus Souza</title>

	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

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

<script type="text/javascript" >
window.addEvent('load', function () {
	slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');
	$('previous').addEvent('click', slidingtabs.previous.bind(slidingtabs));
	$('next').addEvent('click', slidingtabs.next.bind(slidingtabs));
});
</script>

</head>
<body>

<div id="feature_wrap">
	<div id="feature_title">SLideshow Mootools by Mateus Souza</div>
	<a title="Previous" id="previous">anterior</a><a title="Next" id="next">proximo</a>
	<div id="slider_wrap">
		<div id="slider">

			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid1.jpg' alt='kid1' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid2.jpg' alt='kid2' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/"  class="feature"><img src='kid3.jpg' alt='Dkid3' /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/" class="feature"><img src="kid4.jpg" alt="kid4" title="kid4" /></a>
            </div>
			<div>
				<a href="http://www.mateussouza.com/" class="feature"><img src="kid5.jpg" alt="kid5" title="kid5" /></a>
            </div>

		</div>
			</div>
	<ul id="feature_buttons">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>

	</div>
</body>
</html>

Acabou .É muito simples, não tem segredo, agora só falta você estilizar e deixar com a sua cara ou com a cara do cliente…

Atualização - (10/01/2010)

O Schuindt e o Rodrigo comentaram sobre fazer com que o slide fique automático. Para isto eu fiz algumas alterações no script (somente na página index.html) para que automático. Segue o código:

window.addEvent('load', function () {
	slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');

	var intervalo = 4000; //TEMPO PARA CADA TRANSIÇÂO AUTOMÁTICA
	var tempo;
	var auto = function(){
		tempo = slidingtabs.next.bind(slidingtabs).periodical(intervalo);
	}
	auto(); //Iniciando

	$('previous').addEvent('click', function(){
		slidingtabs.previous.bind(slidingtabs)
		$clear(tempo); //Paralizando a transição automática
		auto(); //Iniciando novamente a transição automática
	});
	$('next').addEvent('click', function(){
		slidingtabs.next.bind(slidingtabs);
		$clear(tempo);
		auto();
	});

	$$('#feature_buttons li').addEvent('click', function(){
		$clear(tempo);
		auto();
	});

	//SEM SLIDE AUTOMÁTICO
	/*slidingtabs = new SlidingTabs('feature_buttons', 'slider_wrap');
	$('previous').addEvent('click', slidingtabs.previous.bind(slidingtabs));
	$('next').addEvent('click', slidingtabs.next.bind(slidingtabs));*/
});

Para definir o tempo entre cada transação automática é so alterar a variável intervalo…lembrando que é em milisegundos ou seja, 4000 milisegundos é o mesmo que 4 segundos.

var intervalo = 4000; //TEMPO

Até a proxima

Postado em Javascript, Mootools.

Princípios Básicos do Mootools – Parte 2

Criado por Mateus Souza em 13 de setembro de 2008 às 9:54

Olá pessoal, vamos continuar nossa aula sobre os Princípios Básicos do Mootools, em nosso artigo anterior falei sobre:

Como adicionar uma estrutura de Mootools em uma página;
Como obter um elemento DOM;
Falei sobre setStyle() e Style();
E dei alguns exemplos na prática.

Se você ainda não viu a parte 1 deste artigo, veja aqui.Vamos a parte 2:

Nesta parte do artigo vamos identificar um elemento (ID) e vamos personaliza-lo (fundo, exibir uma mensagem de alerta …) usando o Mootools:

1.Implementação Inoportuna:

Vamos começar escrevendo um código em HTML, e logo depois direi porque é inoportuna:

Caixa Expansivel – Tutorial Mootools

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

Demostração / Download dos Arquivos

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.

Principios Básicos do Mootools – Parte 1

Criado por Mateus Souza em 9 de setembro de 2008 às 19:39

Hoje vou começar um artigo sobre os princípios básicos do Mootools, que será dividido em 2 partes pois é muito coisa.Nesta parte do artigo vou começar com os princípios básicos do Mootools.
Em um dos meus posts sobre o mootools(veja aqui), disse o que era o Mootools de deixei uma lista com alguns efeito para se usar, porém eu achei que o post ficou mais pra quem já sabe mexer mesmo com este script.

Bom nesta lição(parte 1) vou mostrar como manipular propriedades do elemento, em particular como começar o elemento DOM do ID como usar o getStyle (), o setStyle () (para ajustar propriedades do CSS), o toInt () para converter uma string em número e alguns exemplos:

1. Adicione a estrutura de Mootools a sua página

moo1 Principios Básicos do Mootools Parte 1

Primeiramente, você tem que “chamar” o Mootools para o HTML dentro do Tag do <head> da página, como fizemos em todos os tutoriais(esse é um processo necessário para qualquer elemento usando o Mootools, JQuery…por isso é importante que você saiba disso):
Este é o código:
leia mais »

Postado em Javascript, Mootools, Tutoriais.

Caixa de Alerta (SexyAlertBox) Usando Mootools – Tutorial Mootools

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

Olá pessoal. No Tutorial de hoje ensinarei como fazer uma caixa de alerta usando o MooTools. é um processo simples, porem não será uma coisa de destaque em um site já que o visitante não verá esta caixa por tão cedo…
SexyAlertBox
Demonstração / Download dos arquivos

1 – HTML

Chamando o script e o CSS externo:

<script src="mootools.js" type="text/javascript"></script>
<link rel="stylesheet" href="sexyalertbox.css" type="text/css" media="all" />
<script src="sexyalertbox.v1.js" type="text/javascript"></script>

Essa parte do processo creio que todos já saibam, por isso não ha necessidade de explicar.

2 – Javascript

Adicione essa linha de código depois da tag</body>:

<script type=”text/javascript”>
window.addEvent('domready', function() {
	Sexy = new SexyAlertBox();
});
</script>

Este á o script que fará tudo funcionar, agora é so adicionar esta outra linha de código para cada alerta que quiser fazer.ex:

Mostrando a mensagem “Ola, seja bem vindo” no link “Click aqui”:

<a href="#" onclick="Sexy.alert('Ola, seja bem vindo'); return false;">Click Aqui</a>

Espero que tenha entendido, se não comente sobre a sua dúvida que estarei respondendo.Até a proxima

Para usuarios mais avançados, veja a página do desenvolvedor(em espanhol) com alguns comando a mais.

Postado em Mootools, Tutoriais.

Barra de Navegação Usando CSS e Mootools – Tutorial Mootools

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

Olá pessoal.Neste tutorial aprenderemos como fazer uma barra de navegação com efeito(animação) usando o Mootools.Em tutoriais anteriores falei somente sobre o JQuery, então resolvi dar uma mudada e ensinarei a fazer isto usando o Mootools que é uma otima ferramenta também.