MooTools - Guia rápido
MooTools é uma estrutura de JavaScript leve e orientada a objetos. A forma completa da MooTools é My Object-Oriented Tools. É lançado sob a licença MIT gratuita e de código aberto. É uma das bibliotecas JavaScript mais populares.
MooTools é uma biblioteca JavaScript poderosa e leve. Ele cria uma interação fácil de JavaScript no desenvolvimento web. Ele também pode fazer muitas coisas como extensões CSS. MooTools tem todos os tipos de extensões bacanas, o que dá a você a capacidade de criar efeitos animados.
Componentes da MooTools
MooTools inclui vários componentes. A seguir estão as diferentes categorias de componentes -
Core - Uma coleção de funções utilitárias exigidas por todos os outros componentes.
More - Uma coleção oficial de complementos que estendem o núcleo e fornecem funcionalidade aprimorada.
Class - A biblioteca base para instanciação de objetos de classe.
Natives- Uma coleção de aprimoramentos de objetos nativos de JavaScript. Os nativos adicionam funcionalidade, compatibilidade e novos métodos que simplificam a codificação.
Element - Contém um grande número de aprimoramentos e padronização de compatibilidade para o objeto Elemento HTML.
FX - Uma API de efeitos avançados que ajuda a animar os elementos da página.
Request - Inclui interface XHR, Cookie JSON e ferramentas específicas de recuperação de HTML para os desenvolvedores explorarem.
Window - Fornece uma interface entre navegadores para informações específicas do cliente, como as dimensões da janela.
MooTools - Vantagens
MooTools vem com uma série de vantagens sobre o JavaScript nativo. Essas vantagens incluem o seguinte -
MooTools é uma estrutura ampla e modular que permite aos desenvolvedores criar sua própria combinação personalizada de componentes.
MooTools segue o paradigma orientado a objetos e o princípio DRY (Don't Repeat Yourself).
MooTools oferece efeitos de componentes avançados, com transições otimizadas. É usado principalmente para desenvolvedores de Flash.
MooTools fornece diferentes melhorias para o DOM. Isso ajuda os desenvolvedores a adicionar, modificar, selecionar e excluir elementos DOM. E também suporta armazenamento e recuperação de armazenamento de elemento.
MooTools é uma biblioteca JavaScript poderosa para projetar objetos DOM usando o paradigma orientado a objetos. Este capítulo explica como instalar e usar a biblioteca MooTools junto com JavaScript.
Para instalar a biblioteca MooTools, siga os passos abaixo -
Etapa 1: Baixe MooTools Core e MooTools More library
Você pode baixar a versão mais recente das bibliotecas MooTools Core e MooTools More no seguinte link MooTools-Core e MooTools-More . Ao clicar nos links, você será direcionado para as seguintes telas em seu navegador -
E,
Clique nos botões de download para obter a versão mais recente das bibliotecas MooTools. Para este tutorial, estamos usandoMooTools-Core-1.6.0.js e MooTools-More-1.6.0.js bibliotecas.
Etapa 2: Carregue as bibliotecas MooTools Core e mais para o servidor
Agora você tem as bibliotecas MooTools em seu sistema de arquivos. Precisamos copiar essas bibliotecas para o servidor (a área de trabalho) onde as páginas da web do aplicativo estão disponíveis. Para este tutorial, estamos usandoC:\MooTools\workspace\ localização do diretório.
Portanto, copie o MooTools-Core-1.6.0.js e MooTools-More-1.6.0.js arquivos no local de diretório fornecido.
Etapa 3: vincular as bibliotecas MooTools Core e mais à tag de script
A biblioteca JavaScript é um .jsArquivo. Se você incluir essa biblioteca em seu código JavaScript, inclua-a com a tag de script da seguinte maneira. Dê uma olhada no seguinte trecho de código.
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>MooTools é uma ferramenta que pode ser usada para projetar modelos orientados a objetos. Vamos discutir neste capítulo um exemplo simples da biblioteca MooTools.
Exemplo
Aqui, projetaremos um modelo denominado Rectangle usando Class. Para isso, precisamos declarar as propriedades - Largura e Altura.
Dê uma olhada no código a seguir e salve-o em sample.html.
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javaScript">
var Rectangle = new Class({
//properties
width: 0,
height: 0,
//methods
initialize: function(widthVal, heightVal) {
this.width = widthVal;
this.height = heightVal;
},
details: function() {
document.write("Welcome to MooTools demo program");
document.write("Width: "+this.width+" Height: "+this.height);
},
});
var rec = new Rectangle(5,4);
rec.details();
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
Seletores são usados para selecionar elementos HTML. Sempre que quiser criar páginas da web interativas, você precisará selecionar alguns dados ou uma ação dessa página da web. Os seletores nos ajudam a receber dados por meio de solicitação de HTML dos elementos.
Seletor básico ($)
o $é o seletor básico na MooTools. Usando isso, você pode selecionar o elemento DOM por seu ID. Por exemplo, suponha que você tenha um elemento HTML (como div) chamadobody_id.
<div id = "body_id">
</div>Se você deseja selecionar este div, use a seguinte sintaxe -
Sintaxe
//selects the element with the ID 'body_id'
$('body_id');getElement ()
getElement () é um método que estende o seletor básico ($). Ele permite que você refine sua seleção usando o ID do elemento. getElement () seleciona apenas o único elemento e retornará o primeiro se houver várias opções. Você também pode usar o nome da classe para obter a primeira ocorrência de um elemento. Mas não obterá array de elementos.
Seletor múltiplo ($$)
O $$ é usado para selecionar vários elementos e colocá-los em uma matriz. A partir desse array, podemos manipular, recuperar e reordenar a lista de maneiras diferentes. Dê uma olhada na seguinte sintaxe. Ele define como selecionar todos os elementos div de uma coleção de elementos HTML em uma página da web.
Sintaxe
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>Se você deseja selecionar todos os divs, use a seguinte sintaxe -
Sintaxe
//all divs in the page
$$('div');Se você deseja selecionar vários divs com o mesmo nome de id, use a seguinte sintaxe -
Sintaxe
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements ()
O método getElements () é semelhante ao método getElement (). Este método retorna todos os elementos de acordo com os critérios. Você pode usar qualquerelement name (a, div, input) para selecionar essas coleções ou um elemento particular class name para selecionar uma coleção de elementos da mesma classe.
Incluir e excluir resultados com operadores
MooTools suporta diferentes operadores usados para refinar suas seleções. Você pode usar todos esses operadores no método getElements (). Cada um desses operadores pode ser usado para selecionar um elemento de entrada por nome.
Dê uma olhada na tabela a seguir. Ele define os diferentes operadores que a MooTools suporta.
| Operador | Descrição | Exemplo |
|---|---|---|
| = (igual a) | Selecione o elemento de entrada por seu nome. | $ ('body_wrap'). getElements ('input [name = phone_number]'); |
| ^ = (começa com) | Selecione o elemento de entrada comparando as letras iniciais do nome. | $ ('body_wrap'). getElements ('input [nome ^ = telefone]'); |
| $ = (termina com) | Selecione o elemento de entrada comparando as letras finais do nome. | $ ('body_wrap'). getElements ('input [nome $ = número]'); |
| ! = (não é igual a) | Desmarque o elemento de entrada por seu nome. | $ ('body_wrap'). getElements ('input [nome! = endereço]'); |
| * = (Contém) | Selecione o elemento de entrada que contém o padrão de letra específico. | $ ('body_wrap'). getElements ('input [name * = phone]'); |
Seletores baseados na ordem do elemento
Os seletores da MooTools seguem uma ordem específica na seleção de elementos. Os seletores seguem principalmente duas ordens; um é par e o outro é estranho.
Note - Este seletor começa em 0, então o primeiro elemento é par.
Ordem uniforme
Nesta ordem, o seletor seleciona os elementos que são colocados em uma ordem uniforme. Use a seguinte sintaxe para selecionar todos os divs pares em sua página HTML.
Syntax
// selects all even divs
$$('div:even');Ordem ímpar
Nesta ordem, o seletor seleciona o elemento colocado em uma ordem ímpar. Use a seguinte sintaxe para selecionar todos os divs ímpares em sua página HTML.
Syntax
// selects all odd divs
$$('div:odd');Example
O exemplo a seguir mostra como funciona um seletor. Suponha que haja uma caixa de texto e uma lista de tecnologias em uma página da web. Se você escolher uma tecnologia da lista inserindo esse nome na caixa de texto, a lista mostrará os resultados filtrados com base em sua entrada. Isso é possível usando o seletor MooTools. Usando o seletor, podemos adicionar um evento à caixa de texto. O ouvinte de eventos escolherá os dados da caixa de texto e os marcará na lista. Se estiver na lista, a lista mostra os resultados filtrados. Dê uma olhada no código a seguir.
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready',function(){
var input = $('filter');
// set the title attribute of every element
// to it's text in lowercase
$$('ul > li').each(function(item){ item.set('title', item.get('text').toLowerCase()); }); // the function we'll call when the user types var filterList = function(){ var value = input.value.toLowerCase(); $$('li').setStyle('display','none');
// check the title attribute if it contains whatever the user is typing
$$('ul > li[title*=' + value + ']').setStyle('display','');
};
// make it happen
input.addEvent('keyup', filterList);
});
</script>
</head>
<body>
<p><input id = "filter" type = "text" /></p>
<ul>
<li>C</li>
<li>Cpp</li>
<li>Java</li>
<li>JavaScript</li>
<li>Hadoop</li>
<li>Hive</li>
<li>CouchDB</li>
</ul>
</body>
</html>Você receberá a seguinte saída -
Output
MooTools é uma biblioteca JavaScript leve que ajuda a criar páginas da web dinâmicas. Ao gerenciar o elemento DOM, precisamos selecionar todos os elementos DOM de uma página da web. Essa coleção pode ser tratada por meio de matrizes.
Este capítulo explica como usar arrays para gerenciar elementos DOM.
cada () método
Este é o método básico para lidar com matrizes. Ele itera todos os elementos por meio de uma lista. Você pode usar este método com base no requisito. Por exemplo, se você deseja selecionar todos os elementos div de uma página, siga o script fornecido a seguir. Dê uma olhada na seguinte página html que contém vários divs.
<div>One</div>
<div>Two</div>Você pode usar o seguinte script para selecionar each individual divde uma coleção de divs na página. O script irá selecionar cada div e passar um alerta. Dê uma olhada no seguinte script.
Roteiro
$$('div').each(function() {
alert('a div');
});Você pode usar a seguinte sintaxe para lidar com o exemplo fornecido acima. Dê uma olhada na página HTML.
Roteiro
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Aqui, os dois divs estão incluídos em outro div - body_div. Ao projetar um script, temos que selecionar apenas um div externo. Posteriormente, usando o método getElements (), podemos selecionar as duas divs internas. Dê uma olhada no seguinte script.
Roteiro
$('body_wrap').getElements('div').each(function() {
alert('a div');
});Você pode usar um método diferente para escrever o script acima da seguinte maneira. Aqui, estamos usando uma variável separada para selecionar obody_div.
Roteiro
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Selecione Elementos Específicos de um Array
Enquanto manipulamos um array de elementos, podemos selecionar um elemento específico de um array de elementos. A seguir estão alguns métodos importantes usados para manipular os elementos DOM -
Obtenha o último()
Este método retorna o último elemento de uma matriz. Vamos configurar um array para entender esse método.
var myArray = $('body_div').getElements('div');Agora podemos pegar o último elemento da matriz.
var lastElement = myArray.getLast();A variável lastElement agora representa o último elemento em myArray.
getRandom ()
O método getRandom () funciona de maneira semelhante ao método getLast (), mas obterá um elemento aleatório do array.
Syntax
var randomElement = myArray.getRandom();A variável randomElement agora representa um elemento escolhido aleatoriamente dentro myArray.
Cópia de um Array
MooTools fornece uma maneira de copiar um array usando a função $ A (). A seguir está a sintaxe da função $ A ().
Sintaxe
var <variable-name> = $A ( <array-variable>);Adicionar um elemento a um array
Existem dois métodos diferentes para adicionar elementos em uma matriz. O primeiro método permite adicionar elementos um por um ou você pode mesclar dois arrays diferentes em um.
incluir()
O método include () é usado para adicionar um item a uma matriz de elementos DOM. Por exemplo, considere o seguinte código HTML que contém dois elementos div e um elemento span sob um único div fechado -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>No código acima, se chamarmos o método getElements ('div') no body_divelemento, obtemos um e dois div, mas o elemento span não está incluído na matriz. Se você quiser adicioná-lo ao array, chameinclude()método na variável de matriz. Dê uma olhada no seguinte script.
Script
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div'); //first add your element to a var var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);Agora, o myArray contém divs e o elemento span.
combinar()
Este método é usado para combinar os elementos de um array com os elementos de outro array. Isso também cuida de conteúdo duplicado. Por exemplo, considere o seguinte código HTML que contém dois elementos div e dois elementos span sob div único e fechado -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>No código acima, chame o método getElements ('div') no body_divelemento. Você obtém um e dois div. O método Call $$ ('. Class_name') seleciona os dois elementos span. Agora você tem uma matriz de elementos div e outra matriz de elementos span. Se você quiser mesclar esses dois arrays, poderá usar o método combine (). Dê uma olhada no seguinte script.
Script
//create your array just like we did before
var myArray= $('body_wrap').getElements('div'); //then create an array from all elements with .class_name var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );Agora, o myArray contém todos os elementos da variável newArrayToArray.
Example
Isso ajudará você a entender os arrays na MooTools. Suponha que aplicamos a cor de fundo ao array de elementos que contém divs e span. Dê uma olhada no código a seguir. Aqui, o segundo array de elementos não pertence a nenhum id ou grupo de classes e é por isso que não reflete nenhuma cor de fundo. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name'); var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>Você receberá a seguinte saída -
Output
Funções em MooTools é um conceito de JavaScript. Já sabemos como usar funções em JavaScript. Geralmente, é melhor manter a função fora do corpo da página na tag de script. Na MooTools, seguimos o mesmo padrão. Aqui, você pode projetar sua própria função de acordo com os requisitos. Agora temos que chamar todas as funções definidas pelo usuário nodomready função.
Dê uma olhada na sintaxe a seguir para entender como usar a função generalizada no MooTools.
Sintaxe
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>Estrutura básica
Existem algumas maneiras básicas de definir uma função na MooTools. Não há diferença entre as sintaxes de função de JavaScript e MooTools, mas a diferença está em chamar uma função. Vamos dar um pequeno exemplo que define uma função chamada demo_function. Dê uma olhada no código a seguir.
Exemplo
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//Define simple_function as a function
var simple_function = function(){
document.write('This is a simple function');
}
window.addEvent('domready', function() {
//Call simple_function when the dom(page) is ready
simple_function();
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
Função de parâmetro único
Você também pode criar uma função que aceite um parâmetro. Para usar parâmetros com funções, você precisa adicionar um nome de variável entre parênteses. Depois de fornecê-la, a variável fica disponível para uso. Vamos dar um exemplo que define uma função que recebe um único parâmetro e imprime uma mensagem junto com o parâmetro.
Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var single_parameter_function = function(parameter){
document.write('The parameter is : ' + parameter);
}
window.addEvent('domready', function(){
single_parameter_function('DEMO PARAMETER');
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
Retornando um valor
Sempre que você quiser usar o resultado de uma função como entrada para outra variável, será necessário usar o valor de retorno dessa função. Você pode usar a palavra-chave return para retornar um valor da função. Tomemos um exemplo que define uma função que aceitará dois valores de parâmetro e retornará a soma desses dois parâmetros. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var two_parameter_returning_function = function(first_number, second_number){
var third_number = first_number + second_number;
return third_number;
}
window.addEvent('domready', function(){
var return_value = two_parameter_returning_function(10, 5);
document.write("Return value is : " + return_value);
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
Como os seletores, o gerenciamento de eventos também é um conceito essencial da MooTools. Este conceito é usado para criar eventos e ações para eventos. Também precisamos ter uma compreensão das ações e seus efeitos. Vamos tentar alguns eventos neste capítulo.
Único clique esquerdo
O evento mais comum em desenvolvimento web é o clique único com o botão esquerdo. Por exemplo, o Hyperlink reconhece um único evento de clique e leva você a outro elemento DOM. A primeira etapa é adicionar um evento de clique ao elemento DOM. Vejamos um exemplo que adiciona um evento de clique ao botão. Ao clicar nesse botão, uma mensagem será exibida.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
Ao clicar no botão, você receberá a seguinte mensagem -
This button element recognizes the click eventEntrada e saída do mouse
Mouse Enter e Mouse Leave são os eventos mais comuns no tratamento de eventos. A ação é aplicada com base na posição do mouse. Se a posição do mouse for ENTER no elemento DOM, ele aplicará uma ação. Se ele deixar a área do elemento DOM, ele aplicará outra ação.
Vejamos um exemplo que explica como funciona o evento Enter do mouse. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Se você mantiver o ponteiro do mouse sobre o botão, receberá a seguinte mensagem.
Recognizes the mouse enter eventVejamos um exemplo que explica como o evento Mouse Leave funciona. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event"); } window.addEvent('domready', function() { $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Se você mantiver o ponteiro do mouse sobre o botão, receberá a seguinte mensagem.
Recognizes the mouse leave eventRemover um Evento
Este método é usado para remover um evento. Remover um evento é tão fácil quanto adicionar um evento e segue a mesma estrutura. Dê uma olhada na seguinte sintaxe.
Sintaxe
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Teclas como entrada
MooTools pode reconhecer suas ações - o tipo de entrada que você forneceu através do elemento DOM. Usando okeydown função, você pode ler cada chave do elemento DOM do tipo de entrada.
Vejamos um exemplo em que existe um elemento de área de texto. Vamos agora adicionar um evento keydown à área de texto que sempre que a área de texto reconhecer qualquer keystore, ela responderá com uma mensagem de alerta imediatamente. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>Você receberá a seguinte saída -
Resultado
Tente inserir algo na área de texto. Você encontrará uma caixa de alerta junto com a mensagem a seguir.
This textarea can now recognize keystroke valueTente adicionar algum texto ao mesmo exemplo que lê o valor da textarea quando você inseriu nele. É possível usandoevent.keyfunção com o evento. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>Você receberá a seguinte saída -
Resultado
Tente inserir texto na área de texto. Você será direcionado para uma caixa de alerta junto com o valor inserido na área de texto.
Já sabemos que toda página HTML é projetada usando elementos DOM. Usando MooTools você pode manipular elementos DOM, o que significa que você pode criar, remover e alterar o estilo dos elementos DOM.
Métodos básicos
A seguir estão os métodos básicos que capturam e ajudam a modificar as propriedades dos elementos DOM.
pegue()
Este método é usado para recuperar as propriedades do elemento, como src, valor, nome, etc. A instrução a seguir é a sintaxe do método get.
Syntax
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');Você receberá a seguinte lista de propriedades enquanto recupera o elemento usando o método get ().
- id
- name
- value
- href
- src
- classe (retornará todas as classes se o elemento)
- texto (o conteúdo de texto de um elemento)
conjunto()
Este método é usado para definir um valor para uma variável. Isso é útil quando combinado com eventos e permite alterar os valores. A declaração a seguir é a sintaxe do método set.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');apagar()
Este método ajuda a apagar o valor de uma propriedade de elementos. Você precisa escolher qual propriedade deseja apagar do elemento. A instrução a seguir é a sintaxe do método erase ().
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');Elementos Móveis
Mover elemento significa mover um elemento existente de uma posição para outra posição na página. Você pode usar o método inject () para mover um elemento pela página. Vejamos um exemplo em que uma página HTML contém três elementos div que contêm o conteúdo A, B e C respectivamente em uma ordem. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA'); var elementB = $('elemB');
var elementC = $('elemC');
})
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>Você receberá a seguinte saída -
Resultado
Agora, usando o método inject () na MooTools, podemos mudar a ordem de ABC para ACB. Isso significa que precisamos colocar o elemento B após o elemento C e colocar o elemento C antes do elemento B. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var elementA = $('elemA');
var elementB = $('elemB'); var elementC = $('elemC');
//translates to: inject element C before element B
elementC.inject(elementB, 'before');
//translates to: inject element B after element C
elementB.inject(elementC, 'after');
});
</script>
</head>
<body>
<div id = "body_wrap">
<div id = "elemA">A</div>
<div id = "elemB">B</div>
<div id = "elemC">C</div>
</div>
</body>
</html>Você receberá a seguinte saída -
Resultado
Criar Novo Elemento
MooTools oferece uma opção para criar qualquer tipo de elemento DOM e inseri-lo na página HTML. Mas, temos que manter uma sintaxe adequada para cada elemento. Vamos dar um exemplo em que, o fragmento de código a seguir é a sintaxe para criar um elemento (âncora).
Sintaxe
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://MooTools.net',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});Vamos dar um exemplo que criará um elemento âncora usando a biblioteca MooTools. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var el = new Element('a', {
id: 'Awesome',
title: 'Really?',
text: 'I\'m awesome',
href: 'http://www.tutorialspoint.com',
events: {
'click': function(e) {
e.preventDefault();
alert('Yes, really.');
}
},
styles: {
color: '#f00'
}
});
el.inject(document.body);
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
MooTools fornece alguns métodos especiais para definir e obter valores de propriedade de estilo para elementos DOM. Usamos propriedades de estilo diferentes, como largura, altura, cor de fundo, espessura da fonte, cor da fonte, borda, etc. Ao definir e obter valores diferentes para essas propriedades de estilo, podemos apresentar elementos HTML em estilos diferentes.
Definir e obter propriedades de estilo
A biblioteca MooTools contém métodos diferentes que são usados para definir ou obter o valor de uma propriedade de estilo particular ou propriedades de estilo múltiplas.
setStyle ()
Este método permite que você defina o valor para uma única propriedade do elemento DOM. Este método funcionará no objeto seletor de um elemento DOM específico. Vejamos um exemplo que fornece a cor de fundo para o elemento div. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
$('body_wrap').setStyle('background-color', '#6B8E23'); $$('.class_name').setStyle('background-color', '#FAEBD7');
});
</script>
</head>
<body>
<div id = "body_wrap">A</div>
<div class = "class_name">B</div>
<div class = "class_name">C</div>
<div class = "class_name">D</div>
<div class = "class_name">E</div>
</body>
</html>Você receberá a seguinte saída -
Output
getStyle ()
O método getStyle () é recuperar o valor de uma propriedade de estilo de um elemento. Tomemos um exemplo que recupera a cor de fundo de um div denominado body_wrap. Dê uma olhada na seguinte sintaxe.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Propriedades de vários estilos
A biblioteca MooTools contém diferentes métodos usados para definir ou obter o valor de uma propriedade de estilo particular ou propriedades de estilo múltiplas.
setStyle ()
Se você deseja definir várias propriedades de estilo em um único elemento ou uma matriz de elementos, você deve usar o método setStyle (). Dê uma olhada na seguinte sintaxe do método setStyle ().
Syntax
$('<element-id>').setStyles({
//use different style properties such as width, height, background-color, etc.
});Example
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 200px;
height: 200px;
background-color: #eeeeee;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var setWidth = function(){
$('body_div').setStyles({ 'width': 100 }); } var setHeight = function(){ $('body_div').setStyles({
'height': 100
});
}
var reset = function(){
$('body_div').setStyles({ 'width': 200, 'height': 200 }); } window.addEvent('domready', function() { $('set_width').addEvent('click', setWidth);
$('set_height').addEvent('click', setHeight); $('reset').addEvent('click', reset);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "set_width" value = "Set Width to 100 px"/>
<input type = "button" id = "set_height" value = "Set Height to 100 px"/>
<input type = "button" id = "reset" value = "Reset"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente estes botões na página da web, você pode ver a diferença com o tamanho do div.
MooTools pode filtrar a entrada do usuário e pode reconhecer facilmente o tipo de entrada. Os tipos básicos de entrada são Número e String.
Funções numéricas
Vamos discutir alguns métodos que verificarão se um valor de entrada é um número ou não. Esses métodos também o ajudarão a manipular a entrada do número.
toInt ()
Este método converte qualquer valor de entrada em inteiro. Você pode chamá-lo em uma variável e ele tentará fornecer o número inteiro regular de tudo o que a variável contém.
Vejamos um exemplo que projeta uma página da web que contém uma caixa de texto e um botão chamado TO INT. O botão irá verificar e retornar o valor que você inseriu na caixa de texto como um inteiro real. Se o valor não for um inteiro, ele retornará oNaNsímbolo. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var toIntDemo = function(){
var input = $('input').get('value'); var number = input.toInt(); alert ('Value is : ' + number); } window.addEvent('domready', function() { $('toint').addEvent('click', toIntDemo);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "toint" value = "TO INT"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente valores diferentes e converta-os em números inteiros reais.
tipo de()
Este método examina o valor de uma variável que você passa e retorna o tipo desse valor.
Vamos dar um exemplo em que projetamos uma página da web e verificamos se o valor de entrada é Number, String ou Boolean. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkType = function(){
var input = $('input').get('value'); var int_input = input.toInt(); if(typeOf(int_input) != 'number'){ if(input == 'false' || input == 'true'){ alert("Variable type is : Boolean"+" - and value is: "+input); } else{ alert("Variable type is : "+typeof(input)+" - and value is: "+input); } } else{ alert("Variable type is : "+typeof(int_input)+" - and value is:"+int_input); } } window.addEvent('domready', function() { $('checktype').addEvent('click', checkType);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "checktype" value = "CHECK TYPE"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente os diferentes valores e verifique o tipo.
limite()
O método limit () é usado para definir os valores dos limites inferior e superior de um número específico. O número não deve exceder o valor do limite superior. Se exceder, o número é alterado para o valor do limite superior. Este processo é igual ao limite inferior também.
Tomemos um exemplo que fornece uma caixa de texto para inserir um valor, forneça um botão para verificar o limite desse valor. O limite padrão que usamos no exemplo é de 0 a 255. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var checkLimit = function(){
var input = $('input').get('value'); var number = input.toInt(); var limited_number = number.limit(0, 255); alert("Number is : " + limited_number); } window.addEvent('domready', function() { $('check_limit').addEvent('click', checkLimit);
});
</script>
</head>
<body>
Enter some value: <input type = "text" id = "input" />
<input type = "button" id = "check_limit" value = "Check Limit (0 to 255)"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente números diferentes para verificar o limite.
rgbToHex ()
O método rgbToHex () é converter os valores vermelho, verde e azul para o valor hexadecimal. Esta função lida com números e pertence à coleção Array. Vejamos um exemplo em que projetaremos uma página da web para inserir os valores individuais de Vermelho, Verde e Azul. Fornece um botão para converter todos os três em valores hexadecimais. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var rgbToHexa_Demo = function(){
var red = $('red').get('value'); var red_value = red.toInt(); var green = $('green').get('value');
var green_value = green.toInt();
var blue = $('blue').get('value'); var blue_value = blue.toInt(); var color = [red_value, green_value, blue_value].rgbToHex(); alert(" Hexa color is : " + color); } window.addEvent('domready', function() { $('rgbtohex').addEvent('click', rgbToHexa_Demo);
});
</script>
</head>
<body>
Red Value: <input type = "text" id = "red" /><br/><br/>
Green Value: <input type = "text" id = "green" /><br/><br/>
Blue Value: <input type = "text" id = "blue" /><br/><br/>
<input type = "button" id = "rgbtohex" value = "RGB To HEX"/>
</body>
</html>Você receberá a seguinte saída -
Output
Experimente diferentes valores de vermelho, verde e azul e encontre os valores hexadecimais.
Funções de String
Vamos discutir alguns métodos da classe String que podem manipular o valor String de entrada. Antes de continuar, vamos dar uma olhada na seguinte sintaxe de como chamar uma função de string.
Corda
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Ou,
var result_of_function = "Heres some text".someStringFunction();aparar()
Este método é usado para remover os espaços em branco da posição frontal e da posição final de uma determinada string. Não toca em nenhum espaço em branco dentro da corda. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before trim String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.trim();
document.writeln("<pre>After trim String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Output
Nas caixas de alerta acima, você pode encontrar as diferenças em String antes de chamar o método trim () e depois de chamar o método trim ().
limpar \ limpo()
Este método é usado para remover todos os espaços em branco de uma determinada string e manter um único espaço entre as palavras. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var input_str = " This is tutorialspoint.com ";
document.writeln("<pre>Before clean String is : |-"+input_str+"-|</pre>");
var trim_string = input_str.clean();
document.writeln("<pre>After clean String is : |-"+trim_string+"-|</pre>");
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Output
contém ()
Este método é usado para pesquisar uma substring em uma determinada string. Se a string fornecida contém a string de pesquisa, ele retorna verdadeiro, caso contrário, retorna falso. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "Hai this is tutorialspoint";
var search_string = $('input').get('value'); var string_contains = input_string.contains(search_string); alert("contains : " + string_contains); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>Hai this is tutorialspoint</p>
Enter search string: <input type = "text" id = "input" />
<input type = "button" id = "contains" value = "Search String"/>
</body>
</html>Você receberá a seguinte saída -
Output
substituto()
Este método é usado para inserir a string de entrada na string principal. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var containsString = function(){
var input_string = "One is {one}, Two is {two}, Three is {three}";
var one_str = $('one').get('value'); var two_str = $('two').get('value');
var three_str = $('three').get('value'); var substitution_string = { one : one_str, two : two_str, three : three_str } var new_string = input_string.substitute(substitution_string); document.write("NEW STRING IS : " + new_string); } window.addEvent('domready', function() { $('contains').addEvent('click', containsString);
});
</script>
</head>
<body>
Given String : <p>One is {one}, Two {two}, Three is {three}</p>
one String : <input type = "text" id = "one" /><br/><br/>
two String : <input type = "text" id = "two" /><br/><br/>
three String : <input type = "text" id = "three" /><br/><br/>
<input type = "button" id = "contains" value = "Substitute String"/>
</body>
</html>Você receberá a seguinte saída -
Output
Insira o texto nas três caixas de texto e clique no botão substituir string, então você verá a string de substituição.
MooTools oferece um recurso incrível que ajuda a adicionar funcionalidades de arrastar e soltar aos elementos de sua página da web. Podemos fazer isso criando nosso próprioDrag.Moveobjeto. Usando este objeto, você pode definir suas opções e eventos. As classes Drag and Drag.Move são da biblioteca MooTools More.
Vamos discutir as opções e eventos do objeto Drag.Move.
Drag.Move
Drag.Move é um objeto usado para adicionar o recurso de arrastar e soltar aos elementos html. Drag.Move estende Drag, para que possamos usar todas as opções e eventos da classe Drag pelo objeto Drag.Move. Dê uma olhada na sintaxe a seguir e entenda como usar o objeto Drag.Move.
Sintaxe
var myDrag = new Drag.Move(dragElement, {
// Drag.Move Options
droppables: dropElement,
container: dragContainer,
// Drag Options
handle: dragHandle,
// Drag.Move Events
// the Drag.Move events pass the dragged element,
// and the dropped into droppable element
onDrop: function(el, dr) {
//will alert the id of the dropped into droppable element
alert(dr.get('id'));
},
// Drag Events
// Drag events pass the dragged element
onComplete: function(el) {
alert(el.get('id'));
}
});Opções de Drag.Move
Drag.Move fornece as seguintes opções para manter elementos html com recursos de arrastar e soltar -
droppable - Isso ajuda a definir o seletor de elementos soltáveis (os elementos que se registram em eventos relacionados a soltar).
container - Isso ajuda a definir o contêiner do elemento de arrastar (mantém o elemento dentro).
snap- Isso ajuda a definir quantos px o usuário deve arrastar o cursor antes que o elemento arrastável comece a arrastar. O padrão é 6 e você pode defini-lo para qualquer número de variável que represente um número.
handle- Isso ajuda você a adicionar uma alça ao seu elemento arrastável. Handle se torna o único elemento que aceitará a captura.
Dê uma olhada na sintaxe a seguir para saber como e onde definir os elementos droppable e container, snap e handle.
Sintaxe
//here we define a single element by id
var dragElement = $('drag_element'); //here we define an array of elements by class var dropElements = $$('.drag_element');
var dragContainer = $('drag_container'); var dragHandle = $('drag_handle');
//now we set up our Drag.Move object
var myDrag = new Drag.Move(dragElement , {
// Drag.Move Options
// set up our droppables element with the droppables var we defined above
droppables: dropElements ,
// set up our container element with the container element var
container: dragContainer
// set up pixels the user must drag.
Snap: 10
// Adds a handle to your draggable element
handle: dragHandle
});Eventos Drag.Move
Os eventos Drag.Move fornecem diferentes funções que podem ser usadas em diferentes níveis da ação. Por exemplo, quando você começa a arrastar ou soltar um objeto, cada evento Drag.Move passará o elemento arrastado ou o elemento solto como parâmetros.
A seguir estão os eventos suportados -
onStart ()
Isso gera um evento no início do arrasto. Se você definir um snap longo, este evento não aumentará até que o mouse esteja à distância. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});onDrag ()
Isso gera um evento continuamente enquanto você arrasta um elemento. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag options will pass the dragged element as a parameter
onDrag: function(el) {
// put whatever you want to happen on drag in here
}
});onDrop ()
Isso gera um evento quando você solta o elemento arrastável em um elemento soltável. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onDrop: function(el, dr) {
// put whatever you want to happen on drop in here
}
});onLeave ()
Isso gera um evento quando um elemento arrastável sai dos limites de um elemento soltável. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onLeave: function(el, dr) {
// put whatever you want to happen on Leave from droppable area in here
}
});onEnter ()
Isso ocorre quando um elemento arrastável entra em uma área de elemento soltável. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// It will pass the draggable element ('el' in this case)
// and the droppable element the draggable is interacting with ('dr' here)
onEnter: function(el, dr) {
// this will fire when a draggable enters a droppable element
}
});onComplete ()
Isso gera um evento. onComplete refere-se a quando você solta um droppable, e aumentará se você cair em um droppable ou não. Dê uma olhada na seguinte sintaxe.
Syntax
var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onComplete: function(el) {
// put whatever you want to happen on complete
}
});Tomemos um exemplo que irá explorar todos os recursos explicados neste capítulo. Os recursos são - Drag, Drag.Move, onEnter, onLeave, onDrop, onStart, onDrag e onComplete. Neste exemplo, fornecemos um HANDLE, com o qual você pode arrastar o objeto arrastável para qualquer lugar do contêiner. Para cada ação, há uma notificação no lado esquerdo (indicada na cor azul). Há uma área para soltar no contêiner. Se o objeto arrastável entrar na área de soltar, os três últimos indicadores serão ativados. Dê uma olhada no código a seguir.
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* this is generally a good idea */
body {
margin: 0;
padding: 0;
}
/* make sure the draggable element has "position: absolute"
and then top and left are set for the start position */
#drag_me {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
top: 0;
left: 0;
}
#drop_here {
width: 80%;
height: 200px;
background-color: #eee;
margin-left: 100px;
margin-top: -200px !important;
}
/* make sure the drag container is set with position relative */
#drag_cont {
background-color: #ccc;
height: auto;
width: 500px;
position:relative;
margin-top: 20px;
margin-left: 20px;
margin-bottom: auto;
}
#drag_me_handle {
width: 100%;
height: auto;
background-color: #F5B041;
}
#drag_me_handle span {
display: block;
padding: 20px;
}
.indicator {
width: 100px;
height: auto;
background-color: #0066FF;
border-bottom: 1px solid #eee;
}
.indicator span {
padding: 10px;
display: block;
}
.draggable {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var dragElement = $('drag_me'); var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle'); var dropElement = $$('.draggable');
var startEl = $('start'); var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind'); var enterDrop = $('enter');
var leaveDrop = $('leave'); var dropDrop = $('drop_in_droppable');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move options
droppables: dropElement,
container: dragContainer,
// Drag options
handle: dragHandle,
// Drag.Move Events
onDrop: function(el, dr) {
if (!dr) { }else {
dropDrop.highlight('#FB911C'); //flashes orange
el.highlight('#fff'); //flashes white
dr.highlight('#667C4A'); //flashes green
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //flashes orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //flashes orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //flashes orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //flashes orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //flashes orange
}
});
});
</script>
</head>
<body>
<p align = "center">Drag and Drop Application</p>
<div id = "drag_cont">
<div id = "start" class = "indicator"><span>Start</span></div>
<div id = "drag_ind" class = "indicator"><span>Drag</span></div>
<div id = "complete" class = "indicator"><span>Complete</span></div>
<div id = "enter" class = "indicator"><span>Enter Droppable Element</span></div>
<div id = "leave" class = "indicator"><span>Leave Droppable Element</span></div>
<div id = "drop_in_droppable" class = "indicator">
<span>Dropped in Droppable Element</span>
</div>
<div id = "drag_me">
<div id = "drag_me_handle"><span>HANDLE</span></div>
</div>
<div id = "drop_here" class = "draggable">
<p align = "center">Droppable Area</p>
</div>
</div>
</body>
</html>Você receberá a seguinte saída em que deve clicar em Handle and Drag it. Agora você pode encontrar as indicações de notificação no lado esquerdo.
Output
MooTools fornece uma maneira de criar e usar expressões regulares (regex). Este tutorial explicará os usos básicos e extremos de regexes.
Vamos discutir alguns métodos das expressões regulares.
teste()
test () é um método usado para testar a expressão regular com a string de entrada. Embora o JavaScript já forneça o objeto RegExp junto com a função test (), MooTools adiciona mais recursos ao objeto RegExp. Vamos dar um exemplo e entender como usar o método test (). Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Ignorar caso
Esta é uma das situações importantes no conceito de expressões regulares. Se você não quiser que uma expressão regular faça distinção entre maiúsculas e minúsculas, chame o método de teste com uma opção 'I'. Tomemos um exemplo que explicará o caso de ignorar em uma expressão regular. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value, "i"); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "TEST"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Regex começa com '^'
O regex '^' (cap) é um operador especial que permite verificar a expressão regular no início de uma determinada string. Este operador é usado como prefixo da expressão regular. Tomemos um exemplo que explicará como usar esse operador. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Regex termina com '$'
O Regex '$' (dólar) é um operador especial que permite verificar a expressão regular no final de uma determinada string. Este operador é usado como sufixo da expressão regular. Tomemos um exemplo que explicará como usar esse operador. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo = function(){
var test_string = $('regex_value').get('value');
var regex_value = $('regex_match').get('value'); var test_result = test_string.test(regex_value); if (test_result){ $('regex_1_result').set('html', "Matched");
} else {
$('regex_1_result').set('html', "Not Match"); } } window.addEvent('domready', function() { $('regex').addEvent('click', regex_demo);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp: <input type = "text" id = "regex_match"/><br/><br/>
<input type = "button" id = "regex" value = "Match"/><br/><br/>
<Lable id = "regex_1_result"></Lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
Classes de personagens
As classes de caracteres são uma fase de expressões regulares que permitem combinar caracteres específicos (A ou Z) ou intervalo de caracteres (A - Z). Por exemplo, se você quiser testar se alguma das palavras foo e zoo existe em uma string, as classes permitem que você faça isso colocando os caracteres nos colchetes [] com as expressões regulares. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_2').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
var regex_demo_3 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_3').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_3_result').set('html', "Matched"); } else { $('regex_3_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1"/>
<input type = "button" id = "regex_1" value = "Match"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
Reg Exp 2: <input type = "text" id = "regex_match_2"/>
<input type = "button" id = "regex_2" value = "Match"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
Reg Exp 3: <input type = "text" id = "regex_match_3"/>
<input type = "button" id = "regex_3" value = "Match"/>
<Lable id = "regex_3_result"></Lable>
</body>
</html>Você receberá a seguinte saída -
Resultado
escapeRegExp ()
Este método é usado para ignorar os caracteres de escape de uma determinada string enquanto a verifica com uma expressão regular. Normalmente, os caracteres de escape são -
- . * + ? ^ $ { } ( ) | [ ] / \Vamos dar um exemplo em que, temos uma determinada String como "[verifique isso], é $900". If you want to take this whole string you have to declare it like this — "\[check\-this\-stuff\] it is \$900 ". O sistema aceita apenas este padrão. Não usamos os padrões de caracteres de escape em MooTools. Temos o método escapeRegExp () para ignorar os caracteres de escape. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var regex_demo_1 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_1_result').set('html', "Matched"); } else { $('regex_1_result').set('html', "Not Match");
}
}
var regex_demo_2 = function(){
var test_string = $('regex_value').get('value'); var regex_value = $('regex_match_1').get('value');
regex_value = regex_value.escapeRegExp();
var test_result = test_string.test(regex_value);
if (test_result){
$('regex_2_result').set('html', "Matched"); } else { $('regex_2_result').set('html', "Not Match");
}
}
window.addEvent('domready', function() {
$('regex_1').addEvent('click', regex_demo_1); $('regex_2').addEvent('click', regex_demo_2);
$('regex_3').addEvent('click', regex_demo_3);
});
</script>
</head>
<body>
String: <input type = "text" id = "regex_value"/><br/><br/>
Reg Exp 1: <input type = "text" id = "regex_match_1" size = "6"/><br/><br/>
<input type = "button" id = "regex_1" value = "With escapeRegExp()"/>
<Lable id = "regex_1_result"></Lable><br/><br/>
<input type = "button" id = "regex_2" value = "Without escapeRegExp()"/>
<Lable id = "regex_2_result"></Lable><br/><br/>
</body>
</html>Você receberá a seguinte saída -
Resultado
MooTools oferece uma opção que suporta periódicos. Com isso, ele pode chamar uma função periodicamente com o mesmo nível de frequência de tempo. Vamos discutir os métodos e características dos periódicos.
periódico()
Este método é usado para aumentar uma função periodicamente com o mesmo nível de frequência de tempo. Existem algumas coisas que precisamos definir no início. Um é a função que você executa periodicamente e o segundo é o valor numérico para a frequência com que você deseja aumentar uma função (valor numérico medido em milissegundos). Vejamos um exemplo que explica como uma função é executada a cada 100 milissegundos. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var periodicalFunction = function(){
document. writeln("www.tutorialspoint.com");
}
window.addEvent('domready', function() {
//number at the end indicates how often to fire, measure in milliseconds
var periodicalFunctionVar = periodicalFunction.periodical(100);
});
</script>
</head>
<body>
</body>
</html>Você receberá a seguinte saída -
Resultado
Elemento como segunda variável
A função periódica também vincula uma segunda variável que está fora da função domready (). Você pode vincular o elemento como segunda variável à função que deseja aumentar periodicamente. Dê uma olhada na sintaxe a seguir para entender como passar uma variável.
Sintaxe
window.addEvent('domready', function() {
//pass something to a var
var passedVar = $('elementID');
//now periodicalFunction will be able to use "this" to refer to "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});Aqui, passesVar é a variável de elemento que contém um elemento html. E essa variável passa para a função periódicaperiodicalFunctionVar como segunda variável.
$ Clear ()
$ Este método é usado para interromper a função periódica. Este método ajuda a redefinir o valor da variável periódica. Dê uma olhada na sintaxe a seguir para entender como usar a função $ clear ().
Sintaxe
//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);Controle deslizante é uma funcionalidade que reflete uma ação ao deslizar o botão ou qualquer botão. Você pode criar seu próprio controle deslizante enquanto define elementos, o manipulador, opções e eventos de retorno de chamada. Vamos discutir mais sobre o controle deslizante.
Criação de um novo controle deslizante
Primeiro, temos que escolher os elementos HTML adequados para o controle deslizante. Considerando a ideia básica, os elementos div são os mais adequados para controles deslizantes porque, usando divs, podemos criar elementos filho. Agora temos que definir o CSS para esses divs para tornar a estrutura div como um controle deslizante perfeito. Aqui, o div pai é paraslider e o div filho é para knob.
Agora temos que usar esses divs como controles deslizantes, passando os elementos para o construtor Slider como sliderObject, e knobObject. Dê uma olhada na seguinte sintaxe para definir o controle deslizante.
Sintaxe
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Também temos que definir as opções do controle deslizante.
Opções de controle deslizante
Vamos discutir algumas opções que são usadas para controles deslizantes.
Snap
Um valor instantâneo pode ser verdadeiro ou falso. Isso determina se o botão se ajusta às etapas à medida que é arrastado pelo controle deslizante. Por padrão, é falso.
Deslocamento
Este é o deslocamento relativo do botão da posição inicial. Experimente experimentar com este. Por padrão, é 0.
Alcance
Esta é uma opção muito útil. Você pode definir um intervalo de números em que as etapas serão divididas. Por exemplo, se o seu intervalo fosse [0, 200] e você tivesse 10 passos, seus passos seriam 20 separados. O intervalo também pode incluir números negativos, por exemplo [-10, 0], o que é muito útil ao inverter a rolagem. Por padrão, é falso.
Roda
Defina a roda como verdadeira e o scroller reconhecerá o evento da roda do mouse. Ao usar a roda do mouse, pode ser necessário ajustar o intervalo para garantir que o evento da roda do mouse não apareça invertido (novamente, mais sobre isso posteriormente).
Passos
O padrão de 100 etapas é muito útil, pois é fácil de usar como porcentagem. Você pode, no entanto, definir quantas etapas (que são utilizáveis) dentro do razoável. Por padrão, é 100.
Modo
O modo definirá se um controle deslizante se registra como vertical ou horizontal. No entanto, existem mais algumas etapas necessárias para converter de horizontal para vertical. Por padrão, é horizontal.
Eventos de retorno de chamada
Existem três eventos de retorno de chamada importantes que um Slider fornece.
em mudança
Qualquer mudança na etapa atual aciona a execução do evento. Verifique o exemplo fornecido abaixo para ver quando ele é executado.
onTick
Qualquer mudança na posição do identificador aciona a execução deste evento. Confira o exemplo fornecido a seguir para ver o que ele executa.
onComplete
Este evento é executado sempre que o identificador é solto. Verifique o exemplo fornecido abaixo para ver quando ele é executado.
Exemplo
O exemplo a seguir explica o controle deslizante horizontal e vertical junto com os indicadores de evento. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style "text/css">
#slider {
width: 200px;
height: 20px;
background-color: #0099FF;
}
#knob {
width: 20px;
height: 20px;
background-color: #993333;
}
#sliderv {
width: 20px;
height: 200px;
background-color: #0099FF;
}
#knobv {
width: 20px;
height: 20px;
background-color: #993333;
}
#change{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
#complete{
background-color: burlywood;
border: 2px solid black;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var SliderObject = new Slider('slider', 'knob', {
//options
range: [0, 10],
snap: false,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
//callback events
onChange: function(step){
$('change').highlight('#F3F825'); $('steps_number').set('html', step);
},
onTick: function(pos){
$('tick').highlight('#F3F825'); $('knob_pos').set('html', pos);
//this line is very necessary (left with horizontal)
this.knob.setStyle('left', pos);
},
onComplete: function(step){
$('complete').highlight('#F3F825') $('steps_complete_number').set('html', step);
this.set(step);
}
});
var SliderObjectV = new Slider('sliderv', 'knobv', {
range: [-10, 0],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'vertical',
onChange: function(step){
$('stepsV_number').set('html', step*-1); } }); //sets the vertical one to start at 0 //without this it would start at the top SliderObjectV.set(0); //sets the slider to step 7 $('set_knob').addEvent('click', function(){ SliderObject.set(7)});
});
</script>
</head>
<body>
<div id = "slider">
<div id = "knob"></div>
</div><br/><br/>
<div id = "sliderv">
<div id = "knobv"></div>
</div><br/>
<span id = "stepsV_number"></span> <br/>
<div id = "change" class = "indicator">
<strong>onChange</strong><br/>
Passes the step you are on: <span id = "steps_number"></span>
</div></br/>
<div id = "complete" class = "indicator">
<strong>onComplete</strong><br />
passes the current step: <span id = "steps_complete_number"></span>
</div>
</body>
</html>Resultado
Clique no botão marrom nos controles deslizantes horizontais ou verticais e arraste-o. Você encontrará a posição da etapa e a indicação do evento para cada ação.
Sortables é um recurso avançado em desenvolvimento web e pode realmente abrir as opções com seus designs de interface de usuário. Também inclui uma excelente função chamada "serializar", que gerencia uma lista de ids de elementos e é útil para scripts do lado do servidor.
Criação de um novo objeto classificável
Primeiro, enviamos a lista de itens para uma variável. Se você quiser uma matriz da lista de itens, atribua todas as coleções a uma variável. E, finalmente, passe essa variável para um construtor classificável. Dê uma olhada na sintaxe a seguir para criar um objeto classificável.
Sintaxe
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);A seguir está o código HTML para a sintaxe.
Sintaxe
<ul id = "listA">
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
<ul id = "listB">
<li>Item B1</li>
<li>Item B2</li
<li>Item B3</li>
<li>Item B4</li>
</ul>Opção de classificáveis
Sortable fornece diferentes opções para personalizar o objeto classificável. Vamos discutir as opções.
Restringir
Esta opção determina se os elementos da lista podem saltar entre uls dentro do objeto classificável. Por exemplo, se você tiver dois uls no objeto classificável, você pode "constrain"os itens da lista para seu ul pai definindo"constrain: true". Dê uma olhada na seguinte sintaxe para definir a restrição.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Clone
Esta opção ajuda a criar um elemento clone sob o cursor. Isso ajuda na classificação dos elementos da lista. Dê uma olhada na seguinte sintaxe para clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Lidar com
Alça é uma opção que aceita um elemento para atuar como alça de arrasto. Isso é útil sempre que você quiser que os itens de sua lista sejam selecionáveis ou qualquer ação em sua lista. Se você não fornecer nenhuma variável, ela será considerada falsa por padrão. Dê uma olhada na seguinte sintaxe para usar o identificador.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacidade
Esta opção permite ajustar o elemento de classificação. Se você usar um clone, a opacidade afetará o elemento que classifica.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Reverter
Esta opção aceita "false" ou qualquer opção Fx. Se você definir a opção Fx em reverter, isso criará um efeito para o elemento classificado se estabelecer no lugar. Dê uma olhada na seguinte sintaxe para reverter.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
revert: false //this is the default
});
//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
revert: {
duration: 50
}
});Snap
Esta opção permite ver quantos px o usuário arrastará o mouse antes que o elemento comece a seguir.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Eventos Classificáveis
Sortable fornece os seguintes eventos que são bons e diretos.
onStart - é executado quando o arrasto começa (uma vez que o snap recomeça)
onSort - executa quando os itens mudam de ordem
onComplete - executa quando você solta um elemento no lugar
Métodos Classificáveis
Os seguintes métodos classificáveis são essencialmente funções que pertencem a classes -
separar ()
Com detach (), você pode “desanexar” todos os identificadores atuais, tornando o objeto de lista inteiro não classificável. Isso é útil para desativar a classificação.
anexar()
Este método irá “anexar” as alças aos itens de classificação, funciona para habilitar a classificação após desanexar ().
adicionar itens()
Isso permite que você adicione novos itens à sua lista classificável. Digamos que você tenha uma lista classificável na qual o usuário pode adicionar um novo item. Depois de adicionar esse novo item, você precisará habilitar a classificação nesse novo item.
remover itens()
Este método permite remover a capacidade de classificação de um item em uma lista classificável. Isso é útil quando você deseja bloquear um item específico em uma lista específica e não permitir que seja classificado com outros.
addLists ()
Em vez de apenas adicionar um novo item a uma lista existente, você pode adicionar uma nova lista inteira ao objeto classificável. Este método permite adicionar várias listas, tornando realmente fácil adicionar mais classificáveis.
removeLists ()
Vamos remover as listas do objeto classificável. Isso é útil quando você deseja bloquear uma lista específica no local. Você pode remover a lista, deixando as outras listas ainda no objeto classificáveis, mas bloqueando o conteúdo da lista removida.
serialize ()
Toda essa classificação é ótima, mas e se você quiser fazer algo com os dados? .serialize (); retornará uma lista de ids de itens, bem como sua ordem na lista. Você pode escolher qual lista obter dados de dentro do objeto por número de índice.
Exemplo
O exemplo a seguir cria uma matriz de elementos div com numeração. Posteriormente, reorganize-os clicando, arrastando e soltando com o ponteiro do mouse. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
#test {
position: inherit;
}
ul#sortables {
width: 300px;
margin: 0;
padding: 0;
}
li.sortme {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
ul#sortables li {
margin: 10px 0;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
new Sortables($('test'), { initialize: function(){ var step = 0; this.elements.each(function(element, i) { var color = [step, 82, 87].hsbToRgb(); element.setStyle('background-color', color); step = step + 35; element.setStyle('height', $random(40, 100));
});
}
});
});
</script>
</head>
<body>
<ul id = "test">
<li class = "sortme">0</li>
<li class = "sortme">1</li>
<li class = "sortme">2</li>
<li class = "sortme">3</li>
<li class = "sortme">4</li>
<li class = "sortme">5</li>
<li class = "sortme">6</li>
<li class = "sortme">7</li>
<li class = "sortme">8</li>
<li class = "sortme">9</li>
<li class = "sortme">10</li>
</ul>
</body>
</html>Você receberá a seguinte saída -
Resultado
Accordion é o plugin mais popular que a MooTools oferece. Ajuda a ocultar e revelar os dados. Deixe-nos discutir mais sobre isso.
Criando novo acordeão
Os elementos básicos que um acordeão requer são pares de alternadores e seus conteúdos. Vamos criar pares de títulos e conteúdos do html.
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>Dê uma olhada na sintaxe a seguir para entender como construir um acordeão com base na estrutura HTML acima.
Sintaxe
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Exemplo
Tomemos um exemplo que define a funcionalidade básica do acordeão. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
padding: 4px 8px;
color: #fff;
cursor: pointer;
list-style: none;
width: 300px;
background-color: #222;
border: 1px solid;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);
});
</script>
</head>
<body>
<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>
<h3 class = "togglers">Toggle 3</h3>
<p class = "elements">Here is the content of toggle 3</p>
</body>
</html>Você receberá a seguinte saída -
Resultado
Opções de acordeão
O acordeão oferece recursos incríveis. Esses recursos ajudam a ajustar as opções para fornecer saída personalizada.
exibição
Esta opção determina qual elemento é mostrado no carregamento da página. O padrão é definido como 0, portanto, o primeiro elemento é mostrado. Para definir outro elemento, basta inserir outro inteiro que corresponda ao seu índice. Ao contrário de “show”, a tela fará a transição do elemento aberto.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});exposição
Muito parecido com “display,” show determina qual elemento será aberto quando a página for carregada, mas em vez de uma transição, “show” apenas fará com que o conteúdo seja exibido no carregamento sem qualquer transição.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});altura
Quando definido como verdadeiro, um efeito de transição de altura ocorrerá ao alternar entre os elementos exibidos. Esta é a configuração de acordeão padrão que você vê acima.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});largura
Isso funciona da mesma forma que heightopção. No entanto, em vez de fazer a transição da altura para mostrar o conteúdo, isso ajuda na transição da largura. Se você usar “largura” com uma configuração padrão, como usamos acima, o espaço entre a alternância do título permanecerá o mesmo, com base na altura do conteúdo. O div de "conteúdo" fará a transição da esquerda para a direita para ser exibido nesse espaço.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacidade
Esta opção determina se deve ou não mostrar um efeito de transição de opacidade quando você oculta ou exibe algum conteúdo. Como estamos usando as opções padrão acima, você pode ver o efeito lá.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});fixedHeight
Para definir uma altura fixa, você precisa fixar um número inteiro (por exemplo, você pode colocar 100 para o conteúdo 100px de altura). Isso deve ser usado com algum tipo de propriedade de estouro de CSS se você estiver planejando ter uma altura fixa menor do que a altura natural do conteúdo.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});Largura fixa
Assim como “fixedHeight” acima, isso definirá a largura se você fornecer um inteiro a essa opção.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});sempre esconda
Esta opção permite adicionar um controle de alternância aos títulos. Com isso definido como verdadeiro, quando você clicar em um título de conteúdo aberto, o elemento de conteúdo será fechado automaticamente sem abrir mais nada. Você pode ver a execução no exemplo a seguir.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Eventos de acordeão
Esses eventos permitem que você crie sua funcionalidade para cada ação do acordeão.
onActive
Isso será executado quando você alternar para abrir um elemento. Ele vai passar o elemento de controle toggle e o elemento de conteúdo que está abrindo e também os parâmetros.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Isso é executado quando um elemento começa a se ocultar e passa por todos os outros elementos que estão fechando, mas não abrindo.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Este é o seu evento onComplete padrão. Ele passa uma variável que contém o elemento de conteúdo.
Syntax
var AccordionObject = new Accordion(toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); //blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
four.highlight('#5D80C8');
}
});Métodos de acordeão
Esses métodos ajudam a criar e manipular Seções de Acordeão.
addSection ()
Com este método, você pode adicionar uma seção (um par de elemento de alternância / conteúdo). Funciona como muitos dos outros métodos que vimos. Primeiro, refira-se ao objeto acordeão, use .addSection, então você pode chamar o id do título, o id do conteúdo e, finalmente, indicar em que posição você deseja que o novo conteúdo apareça (0 sendo o primeiro local).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Quando você adiciona uma seção como esta, embora ela apareça no local do índice 2, o índice real será +1 do último índice. Portanto, se você tiver 5 itens em seu array (0-4) e adicionar um 6º , seu índice será 5, independentemente de onde você o adiciona com .addSection ();
exibição()
Isso permite que você abra um determinado elemento. Você pode selecionar o elemento por seu índice (portanto, se você adicionou um par de elementos e deseja exibi-lo, terá um índice diferente do que utilizaria acima.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
O exemplo a seguir explica o recurso Acordeão com alguns efeitos. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
.togglers {
color: #222;
margin: 0;
padding: 2px 5px;
background: #EC7063;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 15px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.ind {
background: #2E86C1;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 20px;
color: aliceblue;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
width: 200px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content, {
show: 0,
height : true,
width : false,
opacity: true,
fixedHeight: false,
fixedWidth: false,
alwaysHide: true,
onActive: function(toggler, element) {
toggler.highlight('#DC7633'); //green
element.highlight('#DC7633');
$('active').highlight('#DC7633'); }, onBackground: function(toggler, element) { toggler.highlight('#AED6F1'); //red element.highlight('#AED6F1'); $('background').highlight('#F4D03F');
}
});
$('display_section').addEvent('click', function(){
AccordionObject.display(4);
});
});
</script>
</head>
<body>
<div id = "active" class = "ind">onActive</div>
<div id = "background" class = "ind">onBackground</div>
<div id = "accordion_wrap">
<p class = "togglers">Toggle 1: click here</p>
<p class = "elements">Here is the content of toggle 1 Here is the content of
toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
is the content of toggle 1 Here is the content of toggle 1 Here is the content
of toggle 1 Here is the content of toggle 1</p>
<p class = "togglers">Toggle 2: click here</p>
<p class = "elements">Here is the content of toggle 2</p>
<p class = "togglers">Toggle 3: click here</p>
<p class = "elements">Here is the content of toggle 3</p>
<p class = "togglers">Toggle 4: click here</p>
<p class = "elements">Here is the content of toggle 4</p>
</div>
<p>
100
<button id = "display_section" class = "btn btn-primary">
display section
</button>
</p>
</body>
</html>Output
Clique em cada seção Alternar, então você encontrará os dados ocultos e os indicadores de evento para cada ação.
MooTools fornece dicas de ferramentas diferentes para criar estilos e efeitos personalizados. Neste capítulo, aprenderemos as várias opções e eventos de dicas de ferramentas, bem como algumas ferramentas que o ajudarão a adicionar ou remover dicas de elementos.
Criando uma nova dica de ferramenta
Criar uma dica de ferramenta é muito simples. Primeiro, temos que criar o elemento onde anexaremos a dica de ferramenta. Vamos dar um exemplo que cria uma tag âncora e a adiciona à classe Tips no construtor. Dê uma olhada no código a seguir.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Dê uma olhada no código usado para criar a dica de ferramenta.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Exemplo
O exemplo a seguir explica a ideia básica das dicas de ferramentas. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Você receberá a seguinte saída -
Resultado
Opções de dica de ferramenta
Existem apenas cinco opções em Dicas e todas elas são bastante autoexplicativas.
showDelay
Um número inteiro medido em milissegundos, determinará o atraso antes que a dica de ferramenta seja exibida quando o usuário passar o mouse sobre o elemento. O padrão é 100.
hideDelay
Assim como showDelay acima, este número inteiro (também medido em milissegundos) determina quanto tempo esperar antes de ocultar a dica depois que o usuário deixa o elemento. O padrão é 100.
nome da classe
Isso permite definir um nome de classe para a quebra de dica de ferramenta. O padrão é definido como Nulo.
Deslocamento
Isso determina a que distância do elemento a dica de ferramenta aparecerá. 'x' refere-se ao deslocamento à direita, onde 'y' é o deslocamento para baixo (ambos em relação ao cursor SE a opção 'fixo' for definida como falsa, caso contrário, o deslocamento é relativo ao elemento original). O padrão é x: 16, y: 16
Fixo
Isso define se a dica de ferramenta seguirá ou não o mouse se você mover o elemento. Se você definir como verdadeiro, a dica de ferramenta não se moverá quando você mover o cursor, mas permanecerá fixa em relação ao elemento original. O padrão é definido como falso.
Eventos de dica de ferramenta
Os eventos de dica de ferramenta permanecem simples, como o resto desta classe. Existem dois eventos - onShow e onHide, e eles funcionam conforme o esperado.
onShow ()
Este evento é executado quando a dica de ferramenta aparece. Se você definir um atraso, este evento não será executado até que o atraso termine.
onHide ()
A dica de ferramenta se esconde com a execução deste evento. Se houver um atraso, este evento não será executado até que o atraso termine.
Métodos de dica de ferramenta
Existem dois métodos para dicas de ferramentas - anexar e desanexar. Isso permite apontar um elemento específico e adicioná-lo a um objeto de dica de ferramenta (e, portanto, inerente a todas as configurações nessa instância de classe) ou desanexar um elemento específico.
anexar()
Para anexar um novo elemento a um objeto de dica de ferramenta, apenas indique o objeto de dica, a tacha em .attach (); e, por fim, coloque o seletor de elemento entre os colchetes ().
Syntax
toolTips.attach('#tooltipID3');separar ()
Esse método funciona exatamente como o método .attach, mas o resultado é completamente o oposto. Primeiro, indique o objeto tip, depois adicione .dettach () e, finalmente, coloque seu seletor de elemento dentro de ().
Syntax
toolTips.dettach('#tooltipID3');Example
Vamos dar um exemplo que explica a dica de ferramenta. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504'); }, onHide: function(toolTipElement){ toolTipElement.fade(0); $('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.'); $('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text'); $('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Você receberá a seguinte saída -
Output
Conteúdo com guias significa o conteúdo que está presente na área com guias e que está relacionado aos itens da lista. Sempre que aplicamos qualquer ação comohover ou click ao item da lista, a reação imediata criará um efeito no conteúdo com guias.
Vamos discutir mais sobre as guias.
Criação de guias simples
A criação de guias de menu simples ajuda a explorar informações adicionais ao passar o mouse sobre um item da lista. Primeiro, crie uma lista não ordenada com itens e, em seguida, crie divs, cada um correspondendo a um item da lista. Vamos dar uma olhada no seguinte código HTML.
Roteiro
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>Vamos fornecer algum suporte básico para o código HTML acima usando CSS que ajuda a ocultar os dados. Dê uma olhada no código a seguir.
.hidden {
display: none;
}Vamos agora escrever um código MooTools que exibe a funcionalidade de guia. Dê uma olhada no código a seguir.
Snippet de exemplo
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});Ao combinar os códigos acima, você obterá a funcionalidade adequada.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
//here are our functions to change the styles
var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
//here we turn our content elements into vars
var elOne = $('contentone'); var elTwo = $('contenttwo');
var elThree = $('contentthree'); var elFour = $('contentfour');
//add the events to the tabs
$('one').addEvents({ //set up the events types //and bind the function with the variable to pass 'mouseenter': showFunction.bind(elOne), 'mouseleave': hideFunction.bind(elOne) }); $('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
});
$('three').addEvents({ 'mouseenter': showFunction.bind(elThree), 'mouseleave': hideFunction.bind(elThree) }); $('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
});
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "one">One</li>
<li id = "two">Two</li>
<li id = "three">Three</li>
<li id = "four">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>
</body>
</html>Resultado
Posicione o ponteiro do mouse sobre o item da lista e obterá informações adicionais do respectivo item.
Marph Content Tabs
Ao estender o código, podemos adicionar alguma funcionalidade de metamorfose quando nosso conteúdo oculto é exibido. Podemos conseguir isso usando o efeito Fx.Morph em vez de estilização.
Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
.hiddenM {
display: none;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript">
var showFunction = function() {
//resets all the styles before it morphs the current one
$$('.hiddenM').setStyles({ 'display': 'none', 'opacity': 0, 'background-color': '#fff', 'font-size': '16px' }); //here we start the morph and set the styles to morph to this.start({ 'display': 'block', 'opacity': 1, 'background-color': '#d3715c', 'font-size': '31px' }); } window.addEvent('domready', function() { var elOneM = $('contentoneM');
var elTwoM = $('contenttwoM'); var elThreeM = $('contentthreeM');
var elFourM = $('contentfourM'); //creat morph object elOneM = new Fx.Morph(elOneM, { link: 'cancel' }); elTwoM = new Fx.Morph(elTwoM, { link: 'cancel' }); elThreeM = new Fx.Morph(elThreeM, { link: 'cancel' }); elFourM = new Fx.Morph(elFourM, { link: 'cancel' }); $('oneM').addEvent('click', showFunction.bind(elOneM));
$('twoM').addEvent('click', showFunction.bind(elTwoM)); $('threeM').addEvent('click', showFunction.bind(elThreeM));
$('fourM').addEvent('click', showFunction.bind(elFourM));
});
</script>
</head>
<body>
<!-- here is our menu -->
<ul id = "tabs">
<li id = "oneM">One</li>
<li id = "twoM">Two</li>
<li id = "threeM">Three</li>
<li id = "fourM">Four</li>
</ul>
<!-- and here are our content divs -->
<div id = "contentoneM" class = "hiddenM">content for one</div>
<div id = "contenttwoM" class = "hiddenM">content for two</div>
<div id = "contentthreeM" class = "hiddenM">content for three</div>
<div id = "contentfourM" class = "hiddenM">content for four</div>
</body>
</html>Resultado
Clique em qualquer item da lista e obterá informações adicionais nas guias.
MooTools contém classes de diferentes APIs. Veja os fundamentos da criação e uso de classes com MooTools. Uma classe é um contêiner para uma coleção de variáveis e funções que operam nessas variáveis para realizar tarefas específicas.
Vamos discutir as variáveis, métodos e opções em detalhes.
Variáveis
Criar uma variável é uma tarefa muito simples. É como declarar pares de chave / valor em hashes. Da mesma forma, você pode acessar as variáveis da mesma maneira, o que significa <class_name.variable>. Dê uma olhada na sintaxe a seguir para criar e acessar variáveis em classes.
Sintaxe
//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
var run_demo_one = function(){
//instantiate a Class_one class called demo_1
var demo_1 = new Class_one();
//Display the variables inside demo_one
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}Métodos
Em geral, um Método é uma função que usa um conjunto de instruções pertencentes a uma classe específica. Você pode chamar essas funções usando a instância da classe. Mais uma coisa, sempre que você quiser chamar a variável de instância na função que você deve usarthispalavra-chave. Dê uma olhada na seguinte sintaxe para criar e acessar métodos.
Sintaxe
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_2 = function(){
//Instantiate a version of class_two
var demo_2 = new Class_two();
//Call function_one
demo_2.function_one();
//Call function_two
demo_2.function_two();
}inicializar
initialize é uma opção no objeto de classe. Isso ajuda a criar uma configuração de classe. Isso também ajuda a definir as opções e variáveis de configuração do usuário. Dê uma olhada na seguinte sintaxe da opção de inicialização.
Sintaxe
var Myclass = new Class({
//Define an initalization function with one parameter
initialize : function(user_input){
//create a value variable belonging to
//this class and assign it the value
//of the user input
this.value = user_input;
}
})Opções de implementação
As opções de implementação são muito úteis para aceitar entradas do usuário e criar classes. Adicionar a funcionalidade de opções à sua classe é tão simples quanto adicionar outra chave / par às opções de inicialização da sua classe. Assim que esta configuração estiver pronta, você pode substituir qualquer uma ou todas as opções padrão passando pares de chave / valor. Ele fornece o método setOptions. Este método permite que você defina as opções uma vez que a classe tenha sido inicializada. Se você deseja acessar a variável de dentro da classe, use a seguinte sintaxe.
Sintaxe
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
var run_demo_4 = function(){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}Fx.Element permite adicionar a funcionalidade Fx a vários elementos dom em uma única página. Na verdade, Fx.Element é uma extensão do plugin Fx.Morph. A única diferença entre Fx.Element e Fx.Morph é a sintaxe. Nesta sintaxe, ostart({}) método é usado para criar um efeito e o método .set ({}) é usado para definir alguns estilos.
Dê uma olhada na seguinte sintaxe para Fx.Element.
Sintaxe
var fxElementsArray = $$('.myElementClass');
var fxElementsObject = new Fx.Elements(fxElementsArray, {
//Fx Options
link: 'chain',
duration: 1000,
transition: 'sine:in:out',
//Fx Events
onStart: function(){
startInd.highlight('#C3E608');
}
});iniciar ({}) e definir ({})
Iniciar e definir estruturas de palavras-chave são usadas para iniciar e definir estilos. Mas, nesta estrutura, você se refere ao elemento por meio do índice - o primeiro elemento é 0, o segundo é 1 e assim por diante. Dê uma olhada na sintaxe a seguir para as estruturas Start e Set.
Sintaxe
//you can set your styles with .set({...})
fxElementsObject .set({
'0': {
'height': 10,
'width': 10,
'background-color': '#333'
},
'1': {
'width': 10,
'border': '1px dashed #333'
}
});
//or create a transition effect with .start({...})
fxElementsObject .start({
'0': {
'height': [50, 200],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});Exemplo
Vamos dar um exemplo que explica o Fx.Element. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.myElementClass {
height: 50px;
width: 100px;
background-color: #FFFFCC;
border: 1px solid #FFFFCC;
padding: 20px;
}
#buttons {
margin: 20px 0;
display: block;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var startFXElement = function(){
this.start({
'0': {
'height': [50, 100],
'width': 50,
'background-color': '#87AEE1'
},
'1': {
'width': [100, 200],
'border': '5px dashed #333'
}
});
}
var startFXElementB = function(){
this.start({
'0': {
'width': 300,
'background-color': '#333'
},
'1': {
'width': 300,
'border': '10px solid #DC1E6D'
}
});
}
var setFXElement = function(){
this.set({
'0': {
'height': 50,
'background-color': '#FFFFCC',
'width': 100
},
'1': {
'height': 50,
'width': 100,
'border': 'none'
}
});
}
window.addEvent('domready', function() {
var fxElementsArray = $$('.myElementClass'); var startInd = $('start_ind');
var cancelInd = $('cancel_ind'); var completeInd = $('complete_ind');
var chainCompleteInd = $('chain_complete_ind'); var fxElementsObject = new Fx.Elements(fxElementsArray, { //Fx Options link: 'chain', duration: 1000, transition: 'sine:in:out', //Fx Events onStart: function(){ startInd.highlight('#C3E608'); }, onCancel: function(){ cancelInd.highlight('#C3E608'); }, onComplete: function(){ completeInd.highlight('#C3E608'); }, onChainComplete: function(){ chainCompleteInd.highlight('#C3E608'); } }); $('fxstart').addEvent('click', startFXElement.bind(fxElementsObject));
$('fxstartB').addEvent('click', startFXElementB.bind(fxElementsObject)); $('fxset').addEvent('click', setFXElement.bind(fxElementsObject));
$('fxpause').addEvent('click', function(){ fxElementsObject.pause(); }); $('fxresume').addEvent('click', function(){
fxElementsObject.resume();
});
});
</script>
</head>
<body>
<div id = "start_ind" class = "ind">onStart</div>
<div id = "cancel_ind" class = "ind">onCancel</div>
<div id = "complete_ind" class = "ind">onComplete</div>
<div id = "chain_complete_ind" class = "ind">onChainComplete</div>
<span id = 'buttons'>
<button id = "fxstart">Start A</button>
<button id = "fxstartB">Start B</button>
<button id = "fxset">Reset</button>
<button id = "fxpause">Pause</button>
<button id = "fxresume">Resume</button>
</span>
<div class = "myElementClass">Element 0</div>
<div class = "myElementClass">Element 1</div>
</body>
</html>Você receberá a seguinte saída -
Resultado
Fx.Slides é uma opção que permite exibir o conteúdo deslizando para a visualização. É muito simples, mas melhora a aparência de sua IU.
Vamos discutir sobre como criar e inicializar um Fx.Slide, suas opções e métodos.
Primeiro, inicializaremos a classe Fx.Slide com uma instância definida pelo usuário. Para isso, temos que criar e selecionar um elemento HTML. Depois disso, vamos aplicar CSS a esses elementos. Finalmente, iniciaremos uma nova instância de Fx.Slide com nossa variável de elemento.
Opções Fx.Slide
Existem apenas duas opções Fx.Slide - modo e wrapper.
Modo
O modo oferece duas opções, 'vertical' ou 'horizontal'. Revelações verticais de cima para baixo e revelações horizontais da esquerda para a direita. Não há opções para ir de baixo para cima ou da direita para a esquerda, embora eu entenda que hackear a própria classe para fazer isso é relativamente simples. Na minha opinião, é uma opção que eu gostaria de ver padrão, e se alguém hackeado a classe para permitir essa opção, por favor, escreva para nós.
Embrulho
Por padrão, Fx.Slide lança um invólucro ao redor do elemento do slide, dando a ele 'overflow': 'hidden'. Wrapper permite definir outro elemento como wrapper. Como eu disse acima, não tenho certeza de onde isso seria útil e gostaria de ouvir qualquer opinião (obrigado a horseweapon em mooforum.net por me ajudar a esclarecer isso).
Métodos Fx.Slide
Fx.Slide também apresenta muitos métodos para mostrar e ocultar seu elemento.
deslize()
Como o nome indica, este método irá disparar o evento de início e revelar seu elemento.
deslizar para fora()
Desliza seu elemento de volta ao estado oculto.
alternancia()
Isso deslizará o elemento para dentro ou para fora, dependendo de seu estado atual. Método muito útil para adicionar eventos de clique.
ocultar()
Isso ocultará o elemento sem um efeito de slide.
exposição()
Isso mostrará o elemento sem um efeito de slide.
Atalhos Fx.Slide
A classe Fx.Slide também fornece alguns atalhos úteis para adicionar efeitos a um elemento.
definir ('slide')
Em vez de iniciar uma nova classe, você pode criar uma nova instância se 'definir' o slide em um elemento.
Syntax
slideElement.set('slide');opções de configuração
Você pode até definir opções com o atalho -
Syntax
slideElement.set('slide', {duration: 1250});deslizar()
Depois que o slide for .set (), você pode iniciá-lo com o método .slide ().
Syntax
slideElement.slide('in');.slide vai aceitar -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Cada um correspondendo aos métodos acima.
Example
Vejamos um exemplo que explica sobre Fx.Slide. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #F9E79F;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var slideElement = $('slideA'); var slideVar = new Fx.Slide(slideElement, { //Fx.Slide Options mode: 'horizontal', //default is 'vertical' //wrapper: this.element, //default is this.element //Fx Options link: 'cancel', transition: 'elastic:out', duration: 'long', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
}).hide().show().hide(); //note, .hide and .show do not fire events
$('openA').addEvent('click', function(){ slideVar.slideIn(); }); $('closeA').addEvent('click', function(){
slideVar.slideOut();
});
//EXAMPLE B
var slideElementB = $('slideB'); var slideVarB = new Fx.Slide(slideElementB, { //Fx.Slide Options mode: 'vertical', //default is 'vertical' link: 'chain', //Fx Events onStart: function(){ $('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22"); }, onComplete: function(){ $('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){ slideVarB.slideIn(); }); $('closeB').addEvent('click', function(){
slideVarB.slideOut();
});
});
</script>
</head>
<body>
<div id = "start" class = "ind">Start</div>
<div id = "cancel" class = "ind">Cancel</div>
<div id = "complete" class = "ind">Complete</div>
<button id = "openA">open A</button>
<button id = "closeA">close A</button>
<div id = "slideA" class = "slide">Here is some content - A. Notice the delay
before onComplete fires. This is due to the transition effect, the onComplete
will not fire until the slide element stops "elasticing." Also, notice that
if you click back and forth, it will "cancel" the previous call and give the
new one priority.</div>
<button id = "openB">open B</button>
<button id = "closeB">close B</button>
<div id = "slideB" class = "slide">Here is some content - B. Notice how
if you click me multiple times quickly I "chain" the events. This slide is
set up with the option "link: 'chain'"</div>
</body>
</html>Output
Clique nos botões - openA, closeA, openB e closeB. Observe as alterações, efeitos e notificação de eventos nos indicadores.
MooTools fornece diferentes atalhos FX.Tween para diferentes transições, como efeitos chamativos que se traduzem em transições animadas suaves. Vamos discutir alguns métodos dos atalhos do Tween.
tween ()
Este método fornece transições suaves entre dois valores de propriedade de estilo. Vejamos um exemplo que usa o método de interpolação para alterar a largura de um div de 100 px para 300 px. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var tweenFunction = function(){
$('body_div').tween('width','300px'); } window.addEvent('domready', function() { $('tween_button').addEvent('click', tweenFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
desvaneça()
Este método ajusta a opacidade do elemento ou a transparência. Vamos dar um exemplo em que fornecemos um botão para ajustar a opacidade de uma div usando MooTools. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
#body_div {
width: 100px;
height: 200px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/JavaScript">
var fadeFunction = function(){
$('body_div').fade('.5'); } window.addEvent('domready', function() { $('fade_button').addEvent('click', fadeFunction);
});
</script>
</head>
<body>
<div id = "body_div"> </div><br/>
<input type = "button" id = "fade_button" value = "fade to 50%"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
Clique no fade to 50% button para reduzir a opacidade div para 50%.
realçar()
Este método destaca um elemento usando cores de fundo diferentes. Ele contém duas funcionalidades principais do Tween Flash.
Na primeira funcionalidade, Tween Flash é usado para aplicar cores de fundo diferentes aos elementos.
Depois que o Tween Flash define uma cor de fundo diferente, ele muda para outra cor de fundo.
Este método é usado para destacar um elemento após a seleção. Vamos dar um exemplo para entender esse método. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
#div2 {
width: 100px;
height: 100px;
background-color: #145A32;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var highlightFunction = function(){
$('div1').highlight('#eaea16'); } var highlightChangeFunction = function(){ $('div2').highlight('#eaea16', '#FBFCFC');
}
window.addEvent('domready', function() {
$('div1').addEvent('mouseover', highlightFunction); $('div2').addEvent('mouseover', highlightChangeFunction);
});
</script>
</head>
<body>
<div id = "div1"> </div><br/>
<div id = "div2"> </div>
</body>
</html>Você receberá a seguinte saída -
Resultado
Tente manter o ponteiro do mouse nos divs coloridos e observe as mudanças nos destaques do flash.
Fx.Morph é uma função fornecida pela MooTools. É usado para criar uma nova interpolação para transições entre propriedades de estilo. Durante a transformação, temos que selecionar o elemento com um objeto e então podemos aplicar diferentes funções a ele. Também precisamos vincular o elemento a uma interpolação recém-criada.
Vejamos um exemplo que fornece três botões em uma página da web. O primeiro é oSETbotão que cria um elemento com propriedades de estilo, como altura, largura e cor. O segundo é oMORPHbotão que altera as propriedades de estilo de um elemento. O terceiro é oRESETbotão que altera todas as configurações para a posição inicial. Dê uma olhada no código a seguir.
Exemplo
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphSet = function(){
this.set({
'width': 100,
'height': 100,
'background-color': '#884EA0'
});
}
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
var morphReset = function(){
this.set({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement); $('set').addEvent('click', morphSet.bind(morphObject));
$('start').addEvent('click', morphStart.bind(morphObject)); $('reset').addEvent('click', morphReset.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "set" value = "SET"/>
<input type = "button" id = "start" value = "START"/>
<input type = "button" id = "reset" value = "RESET"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
A MooTools oferece diferentes opções Fx que ajudarão a Fx.Tween e Fx.Morph. Essas opções darão a você um controle sobre os efeitos.
Vamos discutir algumas opções que a MooTools oferece. Antes de prosseguirmos, dê uma olhada na sintaxe a seguir para configurar opções.
Sintaxe
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});fps (quadros por segundo)
Esta opção determina o número de quadros por segundo na animação durante a transformação. Podemos aplicar esses fps às funcionalidades Morph ou Tween. Por padrão, o valor de fps é 50. Isso significa que qualquer funcionalidade levará 50 quadros por segundo enquanto se transforma.
Exemplo
Vamos dar um exemplo em que iremos transformar um elemento div usando 5 fps. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
#morph_element {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphStart = function(){
this.start({
'width': 200,
'height': 200,
'background-color': '#d3715c'
});
}
window.addEvent('domready', function() {
var morphElement = $('morph_element'); var morphObject = new Fx.Morph(morphElement, { fps: 5 }); $('start').addEvent('click', morphStart.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>Você receberá a seguinte saída -
Resultado
Clique no STARTbotão para encontrar a animação de metamorfose. Isso nos ajuda a observar o número de quadros usados para animação. Use valores diferentes para fps para obter a diferença na animação. É recomendado usar o valor de fps menor que 10. Isso o ajudará a obter a diferença facilmente.
unidade
Esta opção é usada para definir o tipo de unidade para números. Geralmente, temos três tipos diferentes de unidades - px,% e ems. Dê uma olhada na seguinte sintaxe.
Sintaxe
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});A sintaxe acima é alocar porcentagem para unidades. Isso significa que todos os valores em números são tratados como porcentagens.
ligação
Esta opção fornece uma maneira de gerenciar várias chamadas para iniciar uma animação. Se você aplicar várias chamadas de evento ao mesmo tempo, essas chamadas serão recebidas como chamadas de link. Assim que a primeira chamada termina, a segunda chamada é executada automaticamente. Ele contém as três opções a seguir -
ignore- Esta é a opção padrão. Ele ignora qualquer número de chamadas até completar o efeito.
cancel- Isso cancela o efeito atual, quando houver outro sendo feito. Ele segue a precedência de chamada mais recente.
Chain- Isso permite encadear os efeitos juntos e manter a pilha de chamadas. Ele executa todas as chamadas até passar por todas as chamadas encadeadas na pilha.
Dê uma olhada na sintaxe a seguir para usar a opção de link.
Sintaxe
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});Duração
Esta opção é usada para definir a duração da animação. Por exemplo, se você quiser que um objeto se mova 100 px na duração de 1 segundo, ele irá mais devagar do que um objeto que se move 1000 px em 1 segundo. Você pode inserir um número que é medido em milissegundos. Ou você pode usar qualquer uma dessas três opções no lugar dos números.
- Curto = 250ms
- Normal = 500ms (padrão)
- Long = 1000ms
Dê uma olhada na seguinte sintaxe para usar a duração.
Sintaxe
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});Ou,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});transição
Esta opção é usada para determinar o tipo de transição. Por exemplo, se deve ser uma transição suave ou se deve começar devagar, então acelere no final. Dê uma olhada na sintaxe a seguir para aplicar a transição.
Sintaxe
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});A tabela a seguir descreve os diferentes tipos de transições.
| S.No. | Tipo de transição e descrição |
|---|---|
| 1 | Linear Exibe uma transição linear com eventos de entrada, saída, entrada e saída |
| 2 | Quad Exibe uma transição quadrática com eventos de entrada, saída, entrada e saída |
| 3 | Cúbico Exibe uma transição cubicular com eventos de entrada, saída, entrada e saída |
| 4 | Quart Exibe uma transição quartética com eventos de entrada, saída, entrada e saída |
| 5 | Quint Exibe uma transição quíntica com eventos de entrada, saída, entrada e saída |
| 6 | Pancada Usado para gerar Quad, Cubic, Quart e Quint com eventos de entrada, saída e entrada |
| 7 | Expo Exibe uma transição exponencial com eventos de entrada, saída, entrada e saída |
| 8 | Circ Exibe uma transição circular com eventos de entrada, saída, entrada e saída |
| 9 | Seno Exibe uma transição senoidal com eventos de entrada, saída, entrada e saída |
| 10 | De volta Faz a transição voltar, depois avançar com eventos de entrada, saída, entrada e saída |
| 11 | Pulo Torna a transição saltitante com eventos de entrada, saída, entrada e saída |
| 12 | Elástico Transição de curva elástica com eventos de entrada, saída, entrada e saída |
Fx.Events fornece algumas opções para aumentar alguns códigos em níveis diferentes em todo o efeito de animação. Ele fornece a você o controle sobre suas interpolações e metamorfoses. A opção que Fx.Events oferece -
onStart - Irá gerar o código a ser executado quando o Fx iniciar.
onCancel - Levará o código a ser executado quando o Fx for cancelado.
onComplete - Irá gerar o código a ser executado quando o Fx for concluído.
onChainComplete - aumentará o código a ser executado quando o Fx encadeado for concluído.
Exemplo
Vamos dar um exemplo em que existem divs na página da web. Prosseguimos aplicando métodos de evento aos divs. O primeiro método é o método onStart () para destacar o div quando o ponteiro do mouse entra na área div.
O segundo é o método onComplete () que destaca o div quando o ponteiro do mouse deixa a área div. E quando o ponteiro do mouse entra na área div automaticamente, o tamanho do div aumenta em 400px. Tentaremos executar todas essas funcionalidades usando os métodos Fx.Events. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<style>
#quadin {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
#quadinout {
width: 100px;
height: 20px;
background-color: #F4D03F;
border: 2px solid #808B96;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var enterFunction = function() {
this.start('width', '400px');
}
var leaveFunction = function() {
this.start('width', '200px');
}
window.addEvent('domready', function() {
var quadIn = $('quadin'); var quadOut = $('quadout');
var quadInOut = $('quadinout'); quadIn = new Fx.Tween(quadIn, { link: 'cancel', transition: Fx.Transitions.Quad.easeIn, onStart: function(passes_tween_element){ passes_tween_element.highlight('#C54641'); }, onComplete: function(passes_tween_element){ passes_tween_element.highlight('#E67F0E'); } }); quadOut = new Fx.Tween(quadOut, { link: 'cancel', transition: 'quad:out' }); quadInOut = new Fx.Tween(quadInOut, { link: 'cancel', transition: 'quad:in:out' }); $('quadin').addEvents({
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({ 'mouseenter': enterFunction.bind(quadOut), 'mouseleave': leaveFunction.bind(quadOut) }); $('quadinout').addEvents({
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});
});
</script>
</head>
<body>
<div id = "quadin"> Quad : in</div><br/>
<div id = "quadout"> Quad : out</div><br/>
<div id = "quadinout"> Quad : in-out</div><br/>
</body>
</html>Você receberá a seguinte saída -