MooTools - Guide rapide
MooTools est un framework JavaScript léger orienté objet. La forme complète de MooTools est My Object-Oriented Tools. Il est publié sous la licence MIT gratuite et open source. C'est l'une des bibliothèques JavaScript les plus populaires.
MooTools est une bibliothèque JavaScript puissante et légère. Il crée une interaction facile de JavaScript dans le développement Web. Il peut également faire beaucoup de choses en tant qu'extensions CSS. MooTools a toutes sortes d'extensions astucieuses, ce qui vous donne la possibilité de créer des effets animés.
Composants de MooTools
MooTools comprend un certain nombre de composants. Voici les différentes catégories de composants -
Core - Une collection de fonctions utilitaires dont tous les autres composants ont besoin.
More - Une collection officielle d'add-ons qui étendent le noyau et fournissent des fonctionnalités améliorées.
Class - La bibliothèque de base pour l'instanciation des objets de classe.
Natives- Une collection d'améliorations d'objets natifs JavaScript. Les natifs ajoutent des fonctionnalités, la compatibilité et de nouvelles méthodes qui simplifient le codage.
Element - Contient un grand nombre d'améliorations et de standardisation de compatibilité avec l'objet d'élément HTML.
FX - Une API d'effets avancés qui aide à animer les éléments de la page.
Request - Inclut l'interface XHR, Cookie JSON et des outils spécifiques à la récupération HTML que les développeurs peuvent exploiter.
Window - Fournit une interface inter-navigateur aux informations spécifiques au client, telles que les dimensions de la fenêtre.
MooTools - Avantages
MooTools présente un certain nombre d'avantages par rapport au JavaScript natif. Ces avantages comprennent les suivants -
MooTools est un cadre complet et modulaire qui permet aux développeurs de créer leur propre combinaison personnalisée de composants.
MooTools suit le paradigme orienté objet et le principe DRY (Don't Repeat Yourself).
MooTools fournit des effets de composants avancés, avec des transitions optimisées. Il est principalement utilisé pour les développeurs flash.
MooTools fournit différentes améliorations au DOM. Cela aide les développeurs à ajouter, modifier, sélectionner et supprimer des éléments DOM. Et, il prend également en charge le stockage et la récupération du stockage des éléments.
MooTools est une puissante bibliothèque JavaScript pour concevoir des objets DOM à l'aide d'un paradigme orienté objet. Ce chapitre explique comment installer et utiliser la bibliothèque MooTools avec JavaScript.
Pour installer la bibliothèque MooTools, suivez les étapes ci-dessous -
Étape 1: Téléchargez la bibliothèque MooTools Core et MooTools More
Vous pouvez télécharger la dernière version des bibliothèques MooTools Core et MooTools More à partir du lien suivant MooTools-Core et MooTools-More . Lorsque vous cliquez sur les liens, vous serez dirigé vers les écrans suivants de votre navigateur -
Et,
Cliquez sur les boutons de téléchargement, vous obtiendrez la dernière version des bibliothèques MooTools. Pour ce tutoriel, nous utilisonsMooTools-Core-1.6.0.js et MooTools-More-1.6.0.js bibliothèques.
Étape 2: Téléchargez les bibliothèques MooTools Core et autres sur le serveur
Vous avez maintenant les bibliothèques MooTools dans votre système de fichiers. Nous devons copier ces bibliothèques dans le serveur (l'espace de travail) où les pages Web de l'application sont disponibles. Pour ce tutoriel, nous utilisonsC:\MooTools\workspace\ emplacement du répertoire.
Par conséquent, copiez le MooTools-Core-1.6.0.js et MooTools-More-1.6.0.js fichiers dans l'emplacement de répertoire donné.
Étape 3: liez les bibliothèques MooTools Core et More dans la balise de script
La bibliothèque JavaScript est un .jsfichier. Si vous incluez cette bibliothèque dans votre code JavaScript, incluez-la avec la balise de script comme suit. Jetez un œil à l'extrait de code suivant.
<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 est un outil qui peut être utilisé pour concevoir des modèles orientés objet. Discutons dans ce chapitre d'un exemple simple de bibliothèque MooTools.
Exemple
Ici, nous allons concevoir un modèle nommé Rectangle en utilisant Class. Pour cela, nous devons déclarer les propriétés - Largeur et Hauteur.
Jetez un œil au code suivant et enregistrez-le dans 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>Vous recevrez la sortie suivante -
Production
Les sélecteurs sont utilisés pour sélectionner des éléments HTML. Chaque fois que vous souhaitez créer des pages Web interactives, vous devez sélectionner des données ou une action à partir de cette page Web. Les sélecteurs nous aident à recevoir des données via une requête HTML à partir d'éléments.
Sélecteur de base ($)
le $est le sélecteur de base de MooTools. En utilisant cela, vous pouvez sélectionner l'élément DOM par son ID. Par exemple, supposons que vous ayez un élément HTML (tel que div) nommébody_id.
<div id = "body_id">
</div>Si vous souhaitez sélectionner ce div, utilisez la syntaxe suivante -
Syntaxe
//selects the element with the ID 'body_id'
$('body_id');getElement ()
getElement () est une méthode qui étend le sélecteur de base ($). Il vous permet d'affiner votre sélection à l'aide de l'ID d'élément. getElement () sélectionne uniquement l'élément unique et retournera le premier s'il y a plusieurs options. Vous pouvez également utiliser le nom de classe pour obtenir la première occurrence d'un élément. Mais il n'obtiendra pas de tableau d'éléments.
Sélecteur multiple ($$)
Le $$ est utilisé pour sélectionner plusieurs éléments et placer ces éléments multiples dans un tableau. À partir de ce tableau, nous pouvons manipuler, récupérer et réorganiser la liste de différentes manières. Jetez un œil à la syntaxe suivante. Il définit comment sélectionner tous les éléments div dans une collection d'éléments HTML sur une page Web.
Syntaxe
<div>
<div>a div</div>
<span id = "id_name">a span</span>
</div>Si vous souhaitez sélectionner tous les div, utilisez la syntaxe suivante -
Syntaxe
//all divs in the page
$$('div');Si vous souhaitez sélectionner plusieurs div avec le même nom d'identifiant, utilisez la syntaxe suivante -
Syntaxe
//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');getElements ()
La méthode getElements () est similaire à la méthode getElement (). Cette méthode retourne tous les éléments selon les critères. Vous pouvez utiliser soitelement name (a, div, input) pour sélectionner ces collections ou un élément particulier class name pour sélectionner une collection d'éléments de la même classe.
Inclure et exclure les résultats avec des opérateurs
MooTools prend en charge différents opérateurs utilisés pour affiner vos sélections. Vous pouvez utiliser tous ces opérateurs dans la méthode getElements (). Chacun de ces opérateurs peut être utilisé pour sélectionner un élément d'entrée par son nom.
Jetez un œil au tableau suivant. Il définit les différents opérateurs pris en charge par MooTools.
| Opérateur | La description | Exemple |
|---|---|---|
| = (égal à) | Sélectionnez l'élément d'entrée par son nom. | $ ('body_wrap'). getElements ('input [name = phone_number]'); |
| ^ = (commence par) | Sélectionnez l'élément d'entrée en comparant ses lettres de départ du nom. | $ ('body_wrap'). getElements ('input [nom ^ = téléphone]'); |
| $ = (se termine par) | Sélectionnez l'élément d'entrée en comparant ses lettres de fin du nom. | $ ('body_wrap'). getElements ('input [nom $ = nombre]'); |
| ! = (n'est pas égal à) | Désélectionnez l'élément d'entrée par son nom. | $ ('body_wrap'). getElements ('input [nom! = adresse]'); |
| * = (Contient) | Sélectionnez l'élément d'entrée qui contient un modèle de lettre particulier. | $ ('body_wrap'). getElements ('input [nom * = téléphone]'); |
Sélecteurs basés sur l'ordre des éléments
Les sélecteurs MooTools suivent un ordre particulier dans la sélection des éléments. Les sélecteurs suivent principalement deux ordres; l'un est pair et l'autre est impair.
Note - Ce sélecteur commence à 0, donc le premier élément est pair.
Même ordre
Dans cet ordre, le sélecteur sélectionne les éléments qui sont placés dans un ordre pair. Utilisez la syntaxe suivante pour sélectionner tous les div paires dans votre page HTML.
Syntax
// selects all even divs
$$('div:even');Ordre impair
Dans cet ordre, le sélecteur sélectionne l'élément placé dans un ordre impair. Utilisez la syntaxe suivante pour sélectionner tous les div impairs dans votre page HTML.
Syntax
// selects all odd divs
$$('div:odd');Example
L'exemple suivant montre comment fonctionne un sélecteur. Supposons qu'il y ait une zone de texte et une liste de technologies sur une page Web. Si vous choisissez une technologie dans la liste en saisissant ce nom dans la zone de texte, la liste affiche les résultats filtrés en fonction de votre saisie. Ceci est possible en utilisant le sélecteur MooTools. En utilisant le sélecteur, nous pouvons ajouter un événement à la zone de texte. L'écouteur d'événements choisira les données dans la zone de texte et les vérifiera dans la liste. S'il est présent dans la liste, la liste affiche les résultats filtrés. Jetez un œil au code suivant.
<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>Vous recevrez la sortie suivante -
Output
MooTools est une bibliothèque JavaScript légère qui permet de créer des pages Web dynamiques. Lors de la gestion de l'élément DOM, nous devons sélectionner tous les éléments DOM d'une page Web. Cette collection peut être gérée à l'aide de tableaux.
Ce chapitre explique comment utiliser les tableaux pour gérer les éléments DOM.
méthode each ()
Il s'agit de la méthode de base pour traiter les tableaux. Il itère tous les éléments à travers une liste. Vous pouvez utiliser cette méthode en fonction de l'exigence. Par exemple, si vous souhaitez sélectionner tous les éléments div d'une page, suivez le script ci-dessous. Jetez un œil à la page html suivante qui contient plusieurs divs.
<div>One</div>
<div>Two</div>Vous pouvez utiliser le script suivant pour sélectionner each individual divà partir d'une collection de div sur la page. Le script sélectionnera chaque div et passera une alerte. Jetez un œil au script suivant.
Scénario
$$('div').each(function() {
alert('a div');
});Vous pouvez utiliser la syntaxe suivante pour gérer l'exemple ci-dessus. Jetez un œil à la page HTML.
Scénario
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Ici, les deux div sont entourés d'un autre div - body_div. Lors de la conception d'un script, nous ne devons sélectionner qu'un seul div externe. Plus tard, en utilisant la méthode getElements (), nous pouvons sélectionner les deux div internes. Jetez un œil au script suivant.
Scénario
$('body_wrap').getElements('div').each(function() {
alert('a div');
});Vous pouvez utiliser une méthode différente pour écrire le script ci-dessus comme suit. Ici, nous utilisons une variable distincte pour sélectionner lebody_div.
Scénario
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Sélectionner des éléments spécifiques dans un tableau
Lors de la manipulation d'un tableau d'éléments, nous pouvons sélectionner un élément spécifique à partir d'un tableau d'éléments. Voici quelques méthodes importantes utilisées pour manipuler les éléments DOM -
getLast ()
Cette méthode retourne le dernier élément d'un tableau. Laissez-nous mettre en place un tableau pour comprendre cette méthode.
var myArray = $('body_div').getElements('div');Nous pouvons maintenant saisir le dernier élément du tableau.
var lastElement = myArray.getLast();La variable lastElement représente maintenant le dernier élément de myArray.
getRandom ()
La méthode getRandom () fonctionne de la même manière que la méthode getLast (), mais obtiendra un élément aléatoire du tableau.
Syntax
var randomElement = myArray.getRandom();La variable randomElement représente désormais un élément choisi au hasard dans myArray.
Copie d'un tableau
MooTools fournit un moyen de copier un tableau en utilisant la fonction $ A (). Voici la syntaxe de la fonction $ A ().
Syntaxe
var <variable-name> = $A ( <array-variable>);Ajouter un élément à un tableau
Il existe deux méthodes différentes pour ajouter des éléments dans un tableau. La première méthode vous permet d'ajouter des éléments un par un ou vous pouvez fusionner deux tableaux différents en un seul.
comprendre()
La méthode include () est utilisée pour ajouter un élément dans un tableau d'éléments DOM. Par exemple, considérons le code HTML suivant qui contient deux éléments div et un élément span sous un div unique et inclus -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>Dans le code ci-dessus, si nous appelons la méthode getElements ('div') sur le body_divélément, nous obtenons un et deux div mais l'élément span n'est pas inclus dans le tableau. Si vous souhaitez l'ajouter au tableau que vous appelezinclude()méthode sur la variable de tableau. Jetez un œil au script suivant.
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);Désormais, myArray contient à la fois l'élément div et span.
combiner()
Cette méthode est utilisée pour combiner les éléments d'un tableau avec les éléments d'un autre tableau. Cela prend également en charge le contenu dupliqué. Par exemple, considérons le code HTML suivant qui contient deux éléments div et deux éléments span sous un div unique et inclus -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>Dans le code ci-dessus, appelez la méthode getElements ('div') sur le body_divélément. Vous obtenez un et deux div. L'appel de la méthode $$ ('. Class_name') sélectionne les deux éléments span. Vous avez maintenant un tableau d'éléments div et un autre tableau d'éléments span. Si vous souhaitez fusionner ces deux tableaux, vous pouvez utiliser la méthode combine (). Jetez un œil au script suivant.
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 );Maintenant, myArray contient tous les éléments de la variable newArrayToArray.
Example
Cela vous aidera à comprendre les tableaux dans MooTools. Supposons que nous appliquions la couleur d'arrière-plan au tableau d'éléments qui contient les divs et span. Jetez un œil au code suivant. Ici, le deuxième tableau d'éléments n'appartient à aucun identifiant ou groupe de classes et c'est pourquoi il ne reflète aucune couleur d'arrière-plan. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Output
Les fonctions dans MooTools sont un concept de JavaScript. Nous savons déjà comment utiliser les fonctions en JavaScript. En général, il est préférable de conserver la fonction en dehors du corps de la page dans la balise de script. Dans MooTools, nous suivons le même schéma. Ici, vous pouvez concevoir votre propre fonction en fonction des besoins. Nous devons maintenant appeler toutes les fonctions définies par l'utilisateur dans ledomready fonction.
Jetez un œil à la syntaxe suivante pour comprendre comment utiliser la fonction généralisée dans MooTools.
Syntaxe
<script type = "text/javascript">
/*
Function definitions go here
*/
window.addEvent('domready', function() {
/* Calls to functions go here */
});
</script>Structure basique
Il existe quelques méthodes de base pour définir une fonction dans MooTools. Il n'y a pas de différence entre les syntaxes de fonction de JavaScript et MooTools mais la différence réside dans l'appel d'une fonction. Prenons un petit exemple qui définit une fonction nommée demo_function. Jetez un œil au code suivant.
Exemple
<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>Vous recevrez la sortie suivante -
Production
Fonction de paramètre unique
Vous pouvez également créer une fonction qui accepte un paramètre. Pour utiliser des paramètres avec des fonctions, vous devez ajouter un nom de variable entre parenthèses. Une fois que vous l'avez fournie, la variable est disponible à l'intérieur pour être utilisée. Prenons un exemple qui définit une fonction qui prend un seul paramètre et imprime un message avec le paramètre.
Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Renvoyer une valeur
Chaque fois que vous souhaitez utiliser le résultat d'une fonction comme entrée pour une autre variable, vous devez utiliser la valeur de retour pour cette fonction. Vous pouvez utiliser le mot-clé return pour renvoyer une valeur à partir de la fonction. Prenons un exemple qui définit une fonction qui acceptera deux valeurs de paramètres et retournera la somme de ces deux paramètres. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Tout comme les sélecteurs, la gestion des événements est également un concept essentiel de MooTools. Ce concept est utilisé pour créer des événements et des actions pour des événements. Nous devons également comprendre les actions et leurs effets. Essayons quelques événements dans ce chapitre.
Clic gauche simple
L'événement le plus courant dans le développement Web est le simple clic gauche. Par exemple, Hyperlink reconnaît un événement de clic unique et vous amène à un autre élément DOM. La première étape consiste à ajouter un événement de clic à l'élément DOM. Prenons un exemple qui ajoute un événement de clic au bouton. Lorsque vous cliquez sur ce bouton, un message s'affiche.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Lorsque vous cliquez sur le bouton, vous obtenez le message suivant -
This button element recognizes the click eventEntrée de la souris et sortie de la souris
Mouse Enter et Mouse Leave sont les événements les plus courants dans la gestion des événements. L'action est appliquée en fonction de la position de la souris. Si la position de la souris est ENTRÉE dans l'élément DOM, elle appliquera une action. S'il quitte la zone des éléments DOM, il appliquera une autre action.
Prenons un exemple qui explique le fonctionnement de l'événement Entrée de la souris. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Si vous maintenez le pointeur de votre souris sur le bouton, vous obtiendrez le message suivant.
Recognizes the mouse enter eventPrenons un exemple qui explique le fonctionnement de l'événement Mouse Leave. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Si vous maintenez le pointeur de votre souris sur le bouton, vous obtiendrez le message suivant.
Recognizes the mouse leave eventSupprimer un événement
Cette méthode est utilisée pour supprimer un événement. La suppression d'un événement est aussi simple que l'ajout d'un événement et suit la même structure. Jetez un œil à la syntaxe suivante.
Syntaxe
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Les frappes comme entrée
MooTools peut reconnaître vos actions - le type d'entrée que vous avez donné via l'élément DOM. En utilisant lekeydown fonction, vous pouvez lire chaque clé à partir de l'élément DOM de type d'entrée.
Prenons un exemple dans lequel, il y a un élément de zone de texte. Ajoutons maintenant un événement keydown à la zone de texte qui chaque fois que la zone de texte reconnaît un keystore, elle répondra immédiatement avec un message d'alerte. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Essayez d'entrer quelque chose dans la zone de texte. Vous trouverez une boîte d'alerte avec le message suivant.
This textarea can now recognize keystroke valueEssayez d'ajouter du texte au même exemple qui lit la valeur de la zone de texte lorsque vous y êtes entré. C'est possible en utilisantevent.keyfonction avec l'événement. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Essayez de saisir du texte dans la zone de texte. Vous serez dirigé vers une boîte d'alerte avec la valeur que vous avez entrée dans la zone de texte.
Nous savons déjà que chaque page HTML est conçue à l'aide d'éléments DOM. En utilisant MooTools, vous pouvez manipuler des éléments DOM, ce qui signifie que vous pouvez créer, supprimer et modifier le style des éléments DOM.
Méthodes de base
Voici les méthodes de base qui capturent et aident à modifier les propriétés des éléments DOM.
avoir()
Cette méthode est utilisée pour récupérer les propriétés de l'élément telles que src, valeur, nom, etc. L'instruction suivante est la syntaxe de la méthode get.
Syntax
//this will return the html tag (div, a, span...) of the element
$('id_name').get('tag');Vous recevrez la liste de propriétés suivante lors de la récupération de l'élément à l'aide de la méthode get ().
- id
- name
- value
- href
- src
- class (retournera toutes les classes si l'élément)
- text (le contenu textuel d'un élément)
ensemble()
Cette méthode est utilisée pour définir une valeur sur une variable. Ceci est utile lorsqu'il est combiné avec des événements et vous permet de modifier les valeurs. L'instruction suivante est la syntaxe de la méthode set.
Syntax
//this will set the href of #id_name to "http://www.google.com"
$('id_name').set('href', 'http://www.google.com');effacer()
Cette méthode vous aide à effacer la valeur d'une propriété d'éléments. Vous devez choisir la propriété que vous souhaitez effacer de l'élément. L'instruction suivante est la syntaxe de la méthode erase ().
Syntax
//this will erase the href value of #id_name
$('id_name').erase('href');Éléments en mouvement
Déplacer un élément signifie déplacer un élément existant d'une position à une autre position autour de la page. Vous pouvez utiliser la méthode inject () pour déplacer un élément dans la page. Prenons un exemple dans lequel, une page HTML contient trois éléments div qui contiennent respectivement le contenu A, B et C dans un ordre. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Maintenant, en utilisant la méthode inject () dans MooTools, nous pouvons changer l'ordre de ABC à ACB. Cela signifie que nous devons placer elementB après elementC et placer l'élémentC avant elementB. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Créer un nouvel élément
MooTools fournit une option pour créer tout type d'élément DOM et l'insérer dans la page HTML. Mais, nous devons maintenir une syntaxe appropriée pour chaque élément. Prenons un exemple dans lequel, l'extrait de code suivant est la syntaxe pour créer un élément (d'ancrage).
Syntaxe
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'
}
});Prenons un exemple qui créera un élément d'ancrage à l'aide de la bibliothèque MooTools. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
MooTools fournit des méthodes spéciales pour définir et obtenir des valeurs de propriété de style pour les éléments DOM. Nous utilisons différentes propriétés de style telles que la largeur, la hauteur, la couleur d'arrière-plan, l'épaisseur de la police, la couleur de la police, la bordure, etc. En définissant et en obtenant différentes valeurs pour ces propriétés de style, nous pouvons présenter des éléments HTML dans différents styles.
Définir et obtenir les propriétés de style
La bibliothèque MooTools contient différentes méthodes utilisées pour définir ou obtenir la valeur d'une propriété de style particulière ou de plusieurs propriétés de style.
setStyle ()
Cette méthode vous permet de définir la valeur d'une seule propriété de l'élément DOM. Cette méthode fonctionnera sur l'objet sélecteur d'un élément DOM particulier. Prenons un exemple qui fournit la couleur d'arrière-plan de l'élément div. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
getStyle ()
La méthode getStyle () consiste à récupérer la valeur d'une propriété de style d'un élément. Prenons un exemple qui récupère la couleur d'arrière-plan d'un div nommé body_wrap. Jetez un œil à la syntaxe suivante.
Syntax
//first, set up your variable to hold the style value
var styleValue = $('body_wrap').getStyle('background-color');Propriétés de style multiples
La bibliothèque MooTools contient différentes méthodes utilisées pour définir ou obtenir la valeur d'une propriété de style particulière ou de plusieurs propriétés de style.
setStyle ()
Si vous souhaitez définir plusieurs propriétés de style sur un seul élément ou un tableau d'éléments, vous devez utiliser la méthode setStyle (). Jetez un œil à la syntaxe suivante de la méthode 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>Vous recevrez la sortie suivante -
Output
Essayez ces boutons sur la page Web, vous pouvez voir la différence avec la taille div.
MooTools peut filtrer l'entrée utilisateur et reconnaître facilement le type d'entrée. Les types d'entrée de base sont Number et String.
Fonctions numériques
Laissez-nous discuter de quelques méthodes qui vérifieront si une valeur d'entrée est un nombre ou non. Ces méthodes vous aideront également à manipuler l'entrée numérique.
toInt ()
Cette méthode convertit toute valeur d'entrée en entier. Vous pouvez l'appeler sur une variable et il essaiera de donner l'entier régulier de tout ce que la variable contient.
Prenons un exemple qui conçoit une page Web contenant une zone de texte et un bouton nommé TO INT. Le bouton vérifiera et renverra la valeur que vous avez entrée dans la zone de texte en tant qu'entier réel. Si la valeur n'est pas un entier, elle renverra leNaNsymbole. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Essayez différentes valeurs et convertissez-les en nombres entiers réels.
Type de()
Cette méthode examine la valeur d'une variable que vous transmettez et renvoie le type de cette valeur.
Prenons un exemple dans lequel, nous concevons une page Web et vérifions si la valeur d'entrée est Number, String ou Boolean. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Essayez les différentes valeurs et vérifiez le type.
limite()
La méthode limit () est utilisée pour définir les valeurs de limite inférieure et supérieure pour un nombre particulier. Le nombre ne doit pas dépasser la valeur limite supérieure. S'il dépasse, le nombre est remplacé par la valeur limite supérieure. Ce processus est le même avec la borne inférieure également.
Prenons un exemple qui fournit une zone de texte pour entrer une valeur, fournissez un bouton pour vérifier la limite de cette valeur. La limite par défaut que nous avons utilisée dans l'exemple est de 0 à 255. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Essayez différents nombres pour vérifier la limite.
rgbToHex ()
La méthode rgbToHex () consiste à convertir les valeurs rouge, verte et bleue en valeur hexadécimale. Cette fonction traite des nombres et appartient à la collection Array. Prenons un exemple dans lequel, nous allons concevoir une page Web pour entrer les valeurs individuelles pour le rouge, le vert et le bleu. Fournissez un bouton pour convertir les trois en valeurs hexadécimales. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Essayez différentes valeurs de rouge, vert et bleu et trouvez les valeurs hexadécimales.
Fonctions de chaîne
Laissez-nous discuter de quelques méthodes de la classe String qui peuvent manipuler la valeur String d'entrée. Avant de continuer, examinons la syntaxe suivante pour savoir comment appeler une fonction de chaîne.
Chaîne
var my_variable = "Heres some text";
var result_of_function = my_variable.someStringFunction();Ou,
var result_of_function = "Heres some text".someStringFunction();réduire()
Cette méthode est utilisée pour supprimer l'espace blanc de la position avant et de la position finale d'une chaîne donnée. Il ne touche aucun espace blanc à l'intérieur de la chaîne. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Dans les boîtes d'alerte ci-dessus, vous pouvez trouver les différences dans String avant d'appeler la méthode trim () et après l'appel de la méthode trim ().
nettoyer()
Cette méthode est utilisée pour supprimer tous les espaces blancs de la chaîne donnée et conserver un seul espace entre les mots. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
contient ()
Cette méthode est utilisée pour rechercher une sous-chaîne dans une chaîne donnée. Si la chaîne donnée contient la chaîne de recherche, elle renvoie true sinon elle retourne false. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
remplacer()
Cette méthode est utilisée pour insérer la chaîne d'entrée dans la chaîne principale. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante -
Output
Entrez le texte dans les trois zones de texte et cliquez sur le bouton de chaîne de substitution, vous verrez alors la chaîne de substitution.
MooTools fournit une fonctionnalité formidable qui vous aide à ajouter des fonctionnalités de glisser-déposer à vos éléments de page Web. Nous pouvons le faire en créant notre propre nouveauDrag.Moveobjet. À l'aide de cet objet, vous pouvez définir vos options et événements. Les classes Drag and Drag.Move proviennent de la bibliothèque MooTools More.
Laissez-nous discuter des options et des événements de l'objet Drag.Move.
Faites glisser.
Drag.Move est un objet utilisé pour ajouter une fonction de glisser-déposer aux éléments html. Drag.Move étend Drag, donc nous pouvons utiliser toutes les options et événements de la classe Drag par objet Drag.Move. Jetez un œil à la syntaxe suivante et comprenez comment utiliser l'objet Drag.Move.
Syntaxe
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'));
}
});Options de glisser-déplacer
Drag.Move fournit les options suivantes pour conserver les éléments html avec les fonctionnalités de glisser-déposer -
droppable - Cela vous aide à définir le sélecteur d'éléments à déposer (les éléments qui s'enregistrent sur les événements liés à la suppression).
container - Cela vous aide à définir le conteneur de l'élément de glissement (garde l'élément à l'intérieur).
snap- Cela vous aide à définir combien de px l'utilisateur doit faire glisser le curseur avant que l'élément déplaçable ne commence à glisser. La valeur par défaut est 6 et vous pouvez la définir sur n'importe quel nombre de variable représentant un nombre.
handle- Cela vous aide à ajouter une poignée à votre élément déplaçable. La poignée devient le seul élément qui acceptera la saisie.
Jetez un œil à la syntaxe suivante pour savoir comment et où définir les éléments droppable et container, snap et handle.
Syntaxe
//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
});Événements Drag.Move
Les événements Drag.Move fournissent différentes fonctions qui peuvent être utilisées à différents niveaux de l'action. Par exemple, lorsque vous commencez à faire glisser ou déposer un objet, chaque événement Drag.Move transmettra l'élément glissé ou l'élément déposé en tant que paramètres.
Voici les événements pris en charge -
onStart ()
Cela déclenche un événement au début de la traînée. Si vous définissez un accrochage long, cet événement ne se déclenchera pas tant que la souris ne sera pas à distance. Jetez un œil à la syntaxe suivante.
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 ()
Cela déclenche un événement en continu pendant que vous faites glisser un élément. Jetez un œil à la syntaxe suivante.
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 ()
Cela déclenche un événement lorsque vous déposez l'élément déplaçable dans un élément déposable. Jetez un œil à la syntaxe suivante.
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
}
});en congé()
Cela déclenche un événement lorsqu'un élément déplaçable quitte les limites d'un élément déposable. Jetez un œil à la syntaxe suivante.
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 ()
Cela se déclenche lorsqu'un élément déplaçable entre dans une zone d'élément déposable. Jetez un œil à la syntaxe suivante.
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 ()
Cela soulève un événement. onComplete fait référence au moment où vous déposez un droppable, et cela augmentera si vous atterrissez ou non dans un droppable. Jetez un œil à la syntaxe suivante.
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
}
});Prenons un exemple qui explorera toutes les fonctionnalités expliquées dans ce chapitre. Les fonctionnalités sont: glisser, glisser.Move, onEnter, onLeave, onDrop, onStart, onDrag et onComplete. Dans cet exemple, nous fournissons un HANDLE, à l'aide duquel vous pouvez faire glisser l'objet déplaçable n'importe où dans le conteneur. Pour chaque action, il y a une notification sur le côté gauche (indiquée en bleu). Il y a une zone déposable dans le conteneur. Si l'objet Draggable entre dans la zone Droppable, les trois derniers indicateurs sont activés. Jetez un œil au code suivant.
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>Vous recevrez la sortie suivante dans laquelle, vous devez cliquer sur Poignée et faites-la glisser. Vous pouvez maintenant trouver les indications de notification sur le côté gauche.
Output
MooTools fournit un moyen de créer et d'utiliser une expression régulière (regex). Ce tutoriel expliquera les bases et les utilisations extrêmes des expressions régulières.
Laissez-nous discuter de quelques méthodes des expressions régulières.
tester()
test () est une méthode utilisée pour tester l'expression régulière avec la chaîne d'entrée. Alors que JavaScript fournit déjà l'objet RegExp avec la fonction test (), MooTools ajoute plus de fonctionnalités à l'objet RegExp. Prenons un exemple et comprenons comment utiliser la méthode test (). Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Ignorer la casse
C'est l'une des situations importantes dans le concept d'expressions régulières. Si vous ne voulez pas qu'une expression régulière soit sensible à la casse, vous appelez la méthode de test avec une option 'I». Prenons un exemple qui expliquera la casse ignorer dans une expression régulière. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Regex commence par «^»
L'expression régulière '^' (cap) est un opérateur spécial qui vous permet de vérifier l'expression régulière au début d'une chaîne donnée. Cet opérateur est utilisé comme préfixe de l'expression régulière. Prenons un exemple qui expliquera comment utiliser cet opérateur. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Regex se termine par '$'
Le Regex '$' (dollar) est un opérateur spécial qui vous permet de vérifier l'expression régulière à la fin d'une chaîne donnée. Cet opérateur est utilisé comme suffixe à l'expression régulière. Prenons un exemple qui expliquera comment utiliser cet opérateur. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Classes de personnages
Les classes de caractères sont une phase d'expressions régulières qui vous permettent de faire correspondre des caractères spécifiques (A ou Z) ou une plage de caractères (A - Z). Par exemple, vous voulez tester si l'un des mots foo et zoo existe dans une chaîne, les classes vous permettent de le faire en plaçant les caractères entre crochets [] avec les expressions régulières. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
escapeRegExp ()
Cette méthode est utilisée pour ignorer les caractères d'échappement d'une chaîne donnée tout en la vérifiant avec une expression régulière. Habituellement, les caractères d'échappement sont -
- . * + ? ^ $ { } ( ) | [ ] / \Prenons un exemple dans lequel, nous avons une chaîne donnée comme "[check-this-stuff] c'est $900". If you want to take this whole string you have to declare it like this — "\[check\-this\-stuff\] it is \$900 ". Le système n'accepte que ce modèle. Nous n'utilisons pas les modèles de caractères escakpe dans MooTools. Nous avons la méthode escapeRegExp () pour ignorer les caractères d'échappement. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
MooTools fournit une option qui prend en charge les périodiques. Avec cela, il peut appeler une fonction périodiquement avec la même fréquence de temps de niveau. Discutons des méthodes et des caractéristiques des périodiques.
périodique()
Cette méthode est utilisée pour élever périodiquement une fonction avec le même niveau de fréquence temporelle. Il y a quelques choses que nous devons définir au début. La première est la fonction que vous exécutez périodiquement et la seconde est la valeur numérique correspondant à la fréquence à laquelle vous souhaitez augmenter une fonction (valeur numérique mesurée en millisecondes). Prenons un exemple qui explique comment une fonction s'exécute toutes les 100 millisecondes. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Élément comme deuxième variable
La fonction périodique lie également une deuxième variable qui est en dehors de la fonction domready (). Vous pouvez lier l'élément en tant que deuxième variable dans la fonction que vous souhaitez déclencher périodiquement. Jetez un œil à la syntaxe suivante pour comprendre comment passer une variable.
Syntaxe
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);
});Ici, PassVar est la variable d'élément qui contient un élément html. Et cette variable passe à la fonction périodiqueperiodicalFunctionVar comme deuxième variable.
$ Effacer ()
$ Cette méthode est utilisée pour arrêter la fonction périodique. Cette méthode permet de réinitialiser la valeur de la variable périodique. Jetez un œil à la syntaxe suivante pour comprendre comment utiliser la fonction $ clear ().
Syntaxe
//we clear the var that we passed the function and periodical to
$clear(periodicalFunctionVar);Le curseur est une fonctionnalité qui reflète une action tout en faisant glisser le bouton ou n'importe quel bouton. Vous pouvez créer votre propre curseur tout en définissant les éléments, le gestionnaire, les options et les événements de rappel. Parlons plus en détail du curseur.
Créer un nouveau curseur
Nous devons d'abord choisir les éléments HTML appropriés pour slider. Tout en considérant l'idée de base, les éléments div sont les plus appropriés pour les curseurs car en utilisant divs, nous pouvons créer des éléments enfants. Nous devons maintenant définir le CSS pour ces divs pour faire de la structure div un curseur parfait. Ici, le div parent est pourslider et le div enfant est pour knob.
Nous devons maintenant utiliser ces divs comme curseurs en passant les éléments au constructeur Slider comme sliderObject, et knobObject. Jetez un œil à la syntaxe suivante pour définir le curseur.
Syntaxe
var SliderObject = new Slider(sliderObject , knobObject , [,options,],..);Nous devons également définir les options du curseur.
Options du curseur
Laissez-nous discuter de quelques options qui sont utilisées pour les curseurs.
Casser
Une valeur d'accrochage peut être une valeur vraie ou fausse. Cela détermine si le bouton s'aligne sur les pas lorsqu'il est déplacé le long du curseur. Par défaut, il est faux.
Décalage
Il s'agit du décalage relatif du bouton par rapport à la position de départ. Essayez d'expérimenter celui-ci. Par défaut, il vaut 0.
Intervalle
C'est une option très utile. Vous pouvez définir une plage de nombres dans laquelle les étapes seront introduites. Par exemple, si votre plage était [0, 200] et que vous disposiez de 10 étapes, vos étapes seraient espacées de 20. La plage peut également inclure des nombres négatifs, par exemple [-10, 0], ce qui est très utile lors de l'inversion du défilé. Par défaut, il est faux.
Roue
Réglez la molette sur vrai et la molette reconnaîtra l'événement de la molette de la souris. Lorsque vous utilisez la molette de la souris, vous devrez peut-être ajuster la plage pour vous assurer que l'événement de la molette de la souris n'apparaît pas inversé (encore une fois, nous en reviendrons plus tard).
Pas
La valeur par défaut de 100 étapes est très utile car elle est facile à utiliser en pourcentage. Vous pouvez, cependant, définir autant d'étapes (utilisables) dans la limite du raisonnable. Par défaut, il est de 100.
Mode
Le mode définira si un curseur s'enregistre comme vertical ou horizontal. Cependant, il y a quelques étapes supplémentaires nécessaires pour passer de l'horizontale à la verticale. Par défaut, il est horizontal.
Événements de rappel
Un curseur fournit trois événements de rappel importants.
sur le changement
Tout changement dans l'étape actuelle déclenche l'exécution de l'événement. Consultez l'exemple ci-dessous pour voir quand il s'exécute.
onTick
Toute modification de la position de la poignée déclenche l'exécution de cet événement. Consultez l'exemple ci-dessous pour voir ce que cela exécute.
onComplete
Cet événement s'exécute chaque fois que la poignée est lâchée. Consultez l'exemple ci-dessous pour voir quand il s'exécute.
Exemple
L'exemple suivant explique le curseur horizontal et vertical ainsi que les indicateurs d'événement. Jetez un œil au code suivant.
<!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>Production
Cliquez sur le bouton marron sur les curseurs horizontaux ou verticaux puis faites-le glisser, vous trouverez la position de l'étape et l'indication d'événement pour chaque action.
Sortables est une fonctionnalité avancée du développement Web et peut vraiment ouvrir les options avec vos conceptions d'interface utilisateur. Il comprend également une excellente fonction appelée "sérialiser" qui gère une liste d'identifiants d'élément et est utile pour les scripts côté serveur.
Création d'un nouvel objet triable
Tout d'abord, nous envoyons la liste des éléments à une variable. Si vous voulez un tableau de la liste des éléments, affectez toute la collection à une variable. Et, enfin, passez cette variable à un constructeur triable. Jetez un œil à la syntaxe suivante pour créer un objet triable.
Syntaxe
var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);Voici le code HTML de la syntaxe.
Syntaxe
<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>Option triables
Sortable fournit différentes options pour personnaliser l'objet triable. Laissez-nous discuter des options.
Contraindre
Cette option détermine si les éléments de la liste peuvent sauter entre les uls dans l'objet triable. Par exemple, si vous avez deux uls dans l'objet triable, vous pouvez "constrain"les éléments de la liste à leur ul parent en définissant"constrain: true". Jetez un œil à la syntaxe suivante pour définir la contrainte.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});Cloner
Cette option vous aide à créer un élément clone sous votre curseur. Cela aide à trier les éléments de la liste. Jetez un œil à la syntaxe suivante pour clone.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});Manipuler
Handle est une option qui accepte un élément comme poignée de glissement. Ceci est utile chaque fois que vous voulez que vos éléments de liste puissent être sélectionnés ou que vous voulez des actions dans votre liste. Si vous ne fournissez aucune variable, elle sera considérée comme fausse par défaut. Jetez un œil à la syntaxe suivante pour utiliser handle.
Syntax
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements //false is default
});Opacité
Cette option vous permet d'ajuster l'élément de tri. Si vous utilisez un clone, l'opacité affecte l'élément qui trie.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
opacity: 1 //default is 1
});Revenir
Cette option accepte "false" ou toute option Fx. Si vous définissez l'option Fx dans Revert, cela créera un effet permettant à l'élément trié de se mettre en place. Jetez un œil à la syntaxe suivante pour revenir.
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
}
});Casser
Cette option vous permet de voir combien de px l'utilisateur fera glisser la souris avant que l'élément ne commence à suivre.
Syntax
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 //user will have to drag 10 px to start the list sorting
});Événements triables
Sortable fournit les événements suivants qui sont simples et simples.
onStart - s'exécute lorsque le glissement commence (une fois que le snap se déclenche)
onSort - s'exécute lorsque les articles changent d'ordre
onComplete - s'exécute lorsque vous déposez un élément en place
Méthodes triables
Les méthodes triables suivantes sont essentiellement des fonctions appartenant à des classes -
détacher()
Avec detach (), vous pouvez «détacher» toutes les poignées actuelles, rendant la liste entière non triable. Ceci est utile pour désactiver le tri.
attacher()
Cette méthode "attachera" les poignées aux éléments de tri, fonctionne pour activer le tri après detach ().
Ajouter des articles()
Cela vous permet d'ajouter de nouveaux éléments à votre liste triable. Disons que vous avez une liste triable dans laquelle l'utilisateur peut ajouter un nouvel élément, une fois que vous avez ajouté ce nouvel élément, vous devrez activer le tri sur ce nouvel élément.
supprimer des éléments()
Cette méthode vous permet de supprimer la capacité de tri d'un élément dans une liste triable. Ceci est utile lorsque vous souhaitez verrouiller un élément particulier dans une liste spécifique et ne pas le laisser trier avec d'autres.
addLists ()
Au lieu d'ajouter simplement un nouvel élément à une liste existante, vous souhaiterez peut-être ajouter une toute nouvelle liste à l'objet triable. Cette méthode vous permet d'ajouter plusieurs listes, ce qui facilite l'ajout de plus de triables.
removeLists ()
Supprimons les listes de l'objet triable. Ceci est utile lorsque vous souhaitez verrouiller une liste particulière en place. Vous pouvez supprimer la liste, en laissant les autres listes toujours dans l'objet triables, mais en verrouillant le contenu de la liste supprimée.
sérialiser ()
Tout ce tri est excellent, mais que faire si vous voulez faire quelque chose avec les données? .serialize (); renverra une liste des identifiants des articles ainsi que leur ordre dans la liste. Vous pouvez choisir la liste à partir de laquelle obtenir des données dans l'objet par numéro d'index.
Exemple
L'exemple suivant crée un tableau d'éléments div avec une numérotation. Plus tard, réorganisez-les en cliquant, en faisant glisser et en déposant des actions à l'aide du pointeur de la souris. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Accordion est le plugin le plus populaire fourni par MooTools. Cela aide à cacher et à révéler les données. Laissez-nous en discuter davantage.
Créer un nouvel accordéon
Les éléments de base dont un accordéon a besoin sont des paires de bascules et leur contenu. Créons des paires d'en-têtes et de contenus du 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>Jetez un œil à la syntaxe suivante pour comprendre comment construire un accordéon basé sur la structure HTML ci-dessus.
Syntaxe
var toggles = $$('.togglers'); var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);Exemple
Prenons un exemple qui définit la fonctionnalité de base d'Accordion. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Options d'accordéon
L'accordéon offre d'énormes fonctionnalités. Ces fonctionnalités aident à peaufiner les options pour donner une sortie personnalisée.
afficher
Cette option détermine quel élément s'affiche lors du chargement de la page. La valeur par défaut est 0, donc le premier élément s'affiche. Pour définir un autre élément, insérez simplement un autre entier qui correspond à son index. Contrairement à «show», l'affichage fera la transition de l'élément ouvert.
Syntax
var AccordionObject = new Accordion(toggles, content {
display: 0 //default is 0
});spectacle
Tout comme «affichage», show détermine quel élément sera ouvert lors du chargement de la page, mais au lieu d'une transition, «show» fera simplement afficher le contenu au chargement sans aucune transition.
Syntax
var AccordionObject = new Accordion(toggles, content {
show: 0 //default is 0
});la taille
Lorsqu'il est défini sur true, un effet de transition de hauteur se produira lors du basculement entre les éléments affichés. Il s'agit du paramètre d'accordéon standard que vous voyez ci-dessus.
Syntax
var AccordionObject = new Accordion(toggles, content {
height: true //default is true
});largeur
Cela fonctionne de la même manière que le heightoption. Cependant, au lieu de changer la hauteur pour afficher le contenu, cela facilite la transition de la largeur. Si vous utilisez «largeur» avec une configuration standard, comme nous l'avons utilisé ci-dessus, alors l'espace entre la bascule du titre restera le même, en fonction de la hauteur du contenu. Le div «contenu» passera alors de gauche à droite pour s'afficher dans cet espace.
Syntax
var AccordionObject = new Accordion(toggles, content {
width: false //default is false
});opacité
Cette option détermine s'il faut ou non afficher un effet de transition d'opacité lorsque vous masquez ou affichez du contenu. Puisque nous utilisons les options par défaut ci-dessus, vous pouvez voir l'effet ici.
Syntax
var AccordionObject = new Accordion(toggles, content {
opacity: true //default is true
});FixedHeight
Pour définir une hauteur fixe, vous devez fixer un entier (par exemple, vous pouvez mettre 100 pour le contenu de 100 px de haut). Cela devrait être utilisé avec une sorte de propriété de débordement CSS si vous prévoyez d'avoir une hauteur fixe inférieure à la hauteur naturelle du contenu.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false //default is false
});largeur fixe
Tout comme «fixedHeight» ci-dessus, cela définira la largeur si vous donnez à cette option un entier.
Syntax
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false //default is false
});toujoursHide
Cette option vous permet d'ajouter une commande à bascule aux titres. Avec cette valeur true, lorsque vous cliquez sur un titre de contenu ouvert, l'élément de contenu se fermera automatiquement sans rien ouvrir d'autre. Vous pouvez voir l'exécution dans l'exemple suivant.
Syntax
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false //default is false
});Événements d'accordéon
Ces événements vous permettent de créer votre fonctionnalité pour chaque action d'Accordion.
onActive
Cela s'exécutera lorsque vous basculerez ouvrir un élément. Il passera l'élément de contrôle à bascule et l'élément de contenu qui s'ouvre ainsi que les paramètres.
Syntax
var AccordionObject = new Accordion(toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); //green
element.highlight('#76C83D');
}
});onBackground
Cela s'exécute lorsqu'un élément commence à se cacher et passe tous les autres éléments qui se ferment mais ne s'ouvrent pas.
Syntax
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); //red
element.highlight('#DC4F4D');
}
});onComplete
Il s'agit de votre événement onComplete standard. Il passe une variable contenant l'élément de contenu.
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éthodes d'accordéon
Ces méthodes vous aident à créer et à manipuler des sections d'accordéon.
addSection ()
Avec cette méthode, vous pouvez ajouter une section (une paire de bascule / élément de contenu). Cela fonctionne comme beaucoup d'autres méthodes que nous avons vues. Faites d'abord référence à l'objet accordéon, utilisez .addSection, puis vous pouvez appeler l'id du titre, l'id du contenu, et enfin indiquer à quelle position vous voulez que le nouveau contenu apparaisse (0 étant le premier emplacement).
Syntax
AccordionObject.addSection('togglersID', 'elementsID', 2);Note- Lorsque vous ajoutez une section comme celle-ci, bien qu'elle apparaisse à l'endroit de l'index 2, l'index réel sera +1 le dernier index. Donc, si vous avez 5 éléments dans votre tableau (0-4) et que vous ajoutez un 6 e , son index serait 5 quel que soit l'endroit où vous l'ajoutez avec .addSection ();
afficher()
Cela vous permet d'ouvrir un élément donné. Vous pouvez sélectionner l'élément par son index (donc si vous avez ajouté une paire d'éléments et que vous souhaitez l'afficher, vous aurez ici un index différent de celui que vous utiliseriez ci-dessus.
Syntax
AccordionObject.display(5); //would display the newly added elementExample
L'exemple suivant explique la fonction Accordéon avec quelques effets. Jetez un œil au code suivant.
<!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
Cliquez sur chaque section Toggle, puis vous trouverez les données cachées et les indicateurs d'événements pour chaque action.
MooTools fournit différentes info-bulles pour concevoir des styles et des effets personnalisés. Dans ce chapitre, nous allons découvrir les différentes options et événements des info-bulles, ainsi que quelques outils qui vous aideront à ajouter ou supprimer des info-bulles d'éléments.
Créer une nouvelle info-bulle
La création d'une info-bulle est très simple. Tout d'abord, nous devons créer l'élément où nous allons attacher l'info-bulle. Prenons un exemple qui crée une balise d'ancrage et l'ajoute à la classe Tips dans le constructeur. Jetez un œil au code suivant.
<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>Jetez un œil au code utilisé pour créer une info-bulle.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Exemple
L'exemple suivant explique l'idée de base des info-bulles. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Options d'info-bulle
Il n'y a que cinq options dans Astuces et elles sont toutes assez explicites.
showDelay
Un entier mesuré en millisecondes, cela déterminera le délai avant que l'info-bulle ne s'affiche une fois la souris de l'utilisateur sur l'élément. La valeur par défaut est fixée à 100.
hideDelay
Tout comme showDelay ci-dessus, cet entier (également mesuré en millisecondes) détermine combien de temps attendre avant de masquer le conseil une fois que l'utilisateur quitte l'élément. La valeur par défaut est fixée à 100.
nom du cours
Cela vous permet de définir un nom de classe pour l'habillage de l'infobulle. La valeur par défaut est définie sur Null.
Décalage
Cela détermine à quelle distance de l'élément l'info-bulle apparaîtra. «x» fait référence au décalage de droite, où «y» est le décalage vers le bas (tous deux relatifs au curseur SI l'option «fixed» est définie sur false, sinon le décalage est relatif à l'élément d'origine). La valeur par défaut est x: 16, y: 16
Fixé
Cela définit si l'info-bulle suivra ou non votre souris si vous vous déplacez autour de l'élément. Si vous le définissez sur true, l'info-bulle ne bougera pas lorsque vous déplacez votre curseur, mais restera fixe par rapport à l'élément d'origine. La valeur par défaut est false.
Événements d'info-bulle
Les événements d'info-bulle restent simples, comme le reste de cette classe. Il y a deux événements - onShow et onHide, et ils fonctionnent comme prévu.
onShow ()
Cet événement s'exécute lorsque l'info-bulle apparaît. Si vous définissez un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.
onHide ()
L'info-bulle se masque lors de l'exécution de cet événement. S'il y a un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.
Méthodes des info-bulles
Il existe deux méthodes pour les info-bulles: attacher et détacher. Cela vous permet de cibler un élément spécifique et de l'ajouter à un objet d'info-bulle (et par conséquent, inhérent à tous les paramètres de cette instance de classe) ou de détacher un élément particulier.
attacher()
Pour attacher un nouvel élément à un objet info-bulle, indiquez simplement l'objet info-bulle, le point d'accrochage sur .attach ();, et placez enfin le sélecteur d'élément entre crochets ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Cette méthode fonctionne exactement comme la méthode .attach, mais le résultat est complètement le contraire. Tout d'abord, indiquez l'objet tip, puis ajoutez .dettach (), et enfin placez votre sélecteur d'élément dans ().
Syntax
toolTips.dettach('#tooltipID3');Example
Prenons un exemple qui explique l'info-bulle. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Output
Le contenu à onglets désigne le contenu présent dans la zone à onglets et ce contenu est lié aux éléments de la liste. Chaque fois que nous appliquons des actions commehover ou click à l'élément de liste, la réaction immédiate créera un effet sur le contenu à onglets.
Parlons plus en détail des onglets.
Création d'onglets simples
La création d'onglets de menu simples vous aide à explorer des informations supplémentaires lorsque vous survolez un élément de liste. Tout d'abord, créez une liste non ordonnée avec des éléments, puis créez des divs, chacun correspondant à un élément de liste. Jetons un coup d'œil au code HTML suivant.
Scénario
<!-- 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>Laissez-nous fournir un support de base au code HTML ci-dessus en utilisant CSS qui aide à cacher les données. Jetez un œil au code suivant.
.hidden {
display: none;
}Écrivons maintenant un code MooTools qui présente la fonctionnalité de l'onglet. Jetez un œil au code suivant.
Exemple d'extrait
//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)
});
});En combinant les codes ci-dessus, vous obtiendrez la fonctionnalité appropriée.
Exemple
<!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>Production
Placez le pointeur de votre souris sur l'élément de la liste, puis vous obtiendrez des informations supplémentaires sur l'élément respectif.
Onglets de contenu Marph
En étendant le code, nous pouvons ajouter des fonctionnalités de morphing lorsque notre contenu caché est affiché. Nous pouvons y parvenir en utilisant l'effet Fx.Morph au lieu du style.
Jetez un œil au code suivant.
Exemple
<!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>Production
Cliquez sur n'importe quel élément de la liste, puis vous obtiendrez des informations supplémentaires sur les onglets.
MooTools contient des classes de différentes API. Regardez les bases de la création et de l'utilisation de classes avec MooTools. Une classe est un conteneur pour une collection de variables et de fonctions qui opèrent sur ces variables pour effectuer des tâches spécifiques.
Laissez-nous discuter des variables, des méthodes et des options en détail.
Variables
La création d'une variable est une tâche très simple. C'est comme déclarer une paire clé / valeur dans des hachages. De même, vous pouvez accéder aux variables de la même manière, ce qui signifie <class_name.variable>. Jetez un œil à la syntaxe suivante pour créer et accéder aux variables dans les classes.
Syntaxe
//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éthodes
En général, une méthode est une fonction qui utilise un ensemble d'instructions appartenant à une classe spécifique. Vous pouvez appeler ces fonctions en utilisant l'instance de la classe. Encore une chose chaque fois que vous voulez appeler la variable d'instance dans la fonction que vous devez utiliserthismot-clé. Jetez un œil à la syntaxe suivante pour créer et accéder aux méthodes.
Syntaxe
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();
}initialiser
initialize est une option dans l'objet de classe. Cela vous aide à créer une configuration de classe. Cela vous aide également à configurer des options et des variables de configuration utilisateur. Jetez un œil à la syntaxe suivante de l'option initialize.
Syntaxe
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;
}
})Options de mise en œuvre
Les options d'implémentation sont très utiles pour accepter les entrées utilisateur et créer des classes. Ajouter la fonctionnalité d'options à votre classe est aussi simple que d'ajouter une autre clé / paire aux options d'initialisation de votre classe. Une fois cette configuration prête, vous pouvez remplacer tout ou partie des options par défaut en passant des paires clé / valeur. Il fournit la méthode setOptions. Cette méthode vous permet de définir les options une fois que la classe a été initialisée. Si vous souhaitez accéder à la variable depuis l'intérieur de la classe, utilisez la syntaxe suivante.
Syntaxe
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 vous permet d'ajouter la fonctionnalité Fx à plusieurs éléments dom sur une seule page. En fait, Fx.Element est une extension du plugin Fx.Morph. La seule différence entre Fx.Element et Fx.Morph est la syntaxe. Dans cette syntaxe, lestart({}) est utilisée pour créer un effet et la méthode .set ({}) est utilisée pour définir certains styles.
Jetez un œil à la syntaxe suivante pour Fx.Element.
Syntaxe
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');
}
});démarrer ({}) et définir ({})
Les structures de mots-clés Démarrer et définir sont utilisées pour démarrer et définir des styles. Mais dans cette structure, vous faites référence à l'élément via l'index - le premier élément est 0, le second est 1, et ainsi de suite. Jetez un œil à la syntaxe suivante pour les structures Start et Set.
Syntaxe
//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'
}
});Exemple
Prenons un exemple qui explique le Fx.Element. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Fx.Slides est une option qui vous permet d'afficher le contenu en glissant dans la vue. C'est très simple mais améliore l'apparence de votre interface utilisateur.
Discutons de la création et de l'initialisation d'un Fx.Slide, de ses options et de ses méthodes.
Tout d'abord, nous initialiserons la classe Fx.Slide avec une instance définie par l'utilisateur. Pour cela, nous devons créer et sélectionner un élément HTML. Après cela, nous appliquerons CSS à ces éléments. Enfin, nous lancerons une nouvelle instance de Fx.Slide avec notre variable d'élément.
Options Fx.Slide
Il n'y a que deux options Fx.Slide - mode et wrapper.
Mode
Le mode vous donne deux choix, «vertical» ou «horizontal». Les révélations verticales de haut en bas et horizontales de gauche à droite. Il n'y a pas d'options pour aller de bas en haut ou de droite à gauche, même si je comprends que pirater la classe elle-même pour accomplir cela est relativement simple. À mon avis, c'est une option que je voudrais voir standard, et si quelqu'un a piraté la classe pour autoriser ces options, veuillez nous envoyer une note.
Wrapper
Par défaut, Fx.Slide jette un wrapper autour de votre élément de diapositive, lui donnant «débordement»: «caché». Wrapper vous permet de définir un autre élément comme wrapper. Comme je l'ai dit ci-dessus, je ne sais pas exactement où cela serait utile et je serais intéressé d'entendre des pensées (merci à horseweapon sur mooforum.net pour m'avoir aidé à clarifier cela).
Méthodes Fx.Slide
Fx.Slide propose également de nombreuses méthodes pour afficher et masquer votre élément.
slideIn ()
Comme son nom l'indique, cette méthode déclenchera l'événement de démarrage et révélera votre élément.
glisser()
Ramène votre élément à l'état masqué.
basculer()
Cela fera glisser l'élément vers l'intérieur ou l'extérieur, en fonction de son état actuel. Méthode très utile pour ajouter des événements de clic.
cacher()
Cela masquera l'élément sans effet de diapositive.
spectacle()
Cela montrera l'élément sans effet de diapositive.
Raccourcis Fx.Slide
La classe Fx.Slide fournit également des raccourcis pratiques pour ajouter des effets à un élément.
set ('slide')
Au lieu de lancer une nouvelle classe, vous pouvez créer une nouvelle instance si vous «définissez» une diapositive sur un élément.
Syntax
slideElement.set('slide');options de réglage
Vous pouvez même définir des options avec le raccourci -
Syntax
slideElement.set('slide', {duration: 1250});faire glisser()
Une fois que la diapositive est .set (), vous pouvez l'initier avec la méthode .slide ().
Syntax
slideElement.slide('in');.slide acceptera -
- ‘in’
- ‘out’
- ‘toggle’
- ’show’
- ‘hide’
… Chacun correspondant aux méthodes ci-dessus.
Example
Prenons un exemple qui explique Fx.Slide. Jetez un œil au code suivant.
<!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
Cliquez sur les boutons - openA, closeA, openB et closeB. Observez les modifications, les effets et la notification d'événements sur les indicateurs.
MooTools fournit différents raccourcis FX.Tween pour différentes transitions telles que des effets flashy qui se traduisent en transitions animées fluides. Laissez-nous discuter de quelques méthodes des raccourcis Tween.
interpolation ()
Cette méthode fournit des transitions fluides entre deux valeurs de propriété de style. Prenons un exemple qui utilise la méthode tween pour changer la largeur d'un div de 100px à 300px. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
fondu ()
Cette méthode ajuste l'opacité de l'élément ou la transparence. Prenons un exemple dans lequel, nous fournissons un bouton pour ajuster l'opacité d'un div à l'aide de MooTools. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Clique sur le fade to 50% button pour réduire l'opacité div à 50%.
surligner()
Cette méthode met en évidence un élément en utilisant différentes couleurs d'arrière-plan. Il contient deux fonctionnalités principales du Tween Flash.
Dans la première fonctionnalité, Tween Flash est utilisé pour appliquer différentes couleurs d'arrière-plan aux éléments.
Une fois que Tween Flash a défini une couleur d'arrière-plan différente, il passe à une autre couleur d'arrière-plan.
Cette méthode est utilisée pour mettre en évidence un élément après la sélection. Prenons un exemple pour comprendre cette méthode. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
Essayez de garder le pointeur de la souris sur les divs colorés et observez les changements dans les hautes lumières du flash.
Fx.Morph est une fonction fournie par MooTools. Il est utilisé pour créer une nouvelle interpolation pour les transitions entre les propriétés de style. Lors du morphing, nous devons sélectionner l'élément avec un objet, puis nous pouvons lui appliquer différentes fonctions. Nous devons également lier l'élément avec une interpolation nouvellement créée.
Prenons un exemple qui fournit trois boutons sur une page Web. Le premier est leSETbouton qui crée un élément avec des propriétés de style telles que la hauteur, la largeur et la couleur. Le second est leMORPHbouton qui modifie les propriétés de style d'un élément. Le troisième est leRESETbouton qui change tous les paramètres à la position de départ. Jetez un œil au code suivant.
Exemple
<!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>Vous recevrez la sortie suivante -
Production
MooTools fournit différentes Fx.Options qui aideront à Fx.Tween et Fx.Morph. Ces options vous donneront un contrôle sur les effets.
Laissez-nous discuter de quelques options fournies par MooTools. Avant de continuer, jetez un œil à la syntaxe suivante pour configurer les options.
Syntaxe
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});fps (images par seconde)
Cette option détermine le nombre d'images par seconde dans l'animation pendant le morphing. Nous pouvons appliquer ces fps aux fonctionnalités Morph ou Tween. Par défaut, la valeur de fps est 50. Cela signifie que toute fonctionnalité prendra 50 images par seconde lors du morphing.
Exemple
Prenons un exemple dans lequel, nous allons transformer un élément div en utilisant 5 fps. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -
Production
Clique sur le STARTbouton pour trouver l'animation de morphing. Cela nous aide à observer le nombre d'images utilisées pour l'animation. Utilisez des valeurs différentes de fps pour obtenir la différence d'animation. Il est recommandé d'utiliser une valeur fps inférieure à 10. Cela vous aidera à faire la différence facilement.
unité
Cette option est utilisée pour définir le type d'unité pour les nombres. En général, nous avons trois types d'unités différents: px,% et ems. Jetez un œil à la syntaxe suivante.
Syntaxe
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});La syntaxe ci-dessus consiste à attribuer un pourcentage aux unités. Cela signifie que toutes les valeurs en nombres sont traitées comme des pourcentages.
lien
Cette option permet de gérer plusieurs appels pour démarrer une animation. Si vous appliquez plusieurs appels d'événements à la fois, ces appels seront pris en tant qu'appels de liaison. Une fois le premier appel terminé, le deuxième appel s'exécute automatiquement. Il contient les trois options suivantes -
ignore- C'est l'option par défaut. Il ignore n'importe quel nombre d'appels jusqu'à ce qu'il termine l'effet.
cancel- Ceci annule l'effet actuel, quand il y en a un autre en cours de création. Il suit la dernière priorité des appels.
Chain- Cela vous permet d'enchaîner les effets et de maintenir la pile d'appels. Il exécute tous les appels jusqu'à ce qu'il passe par tous les appels chaînés de la pile.
Jetez un œil à la syntaxe suivante pour utiliser l'option de lien.
Syntaxe
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});Durée
Cette option permet de définir la durée de l'animation. Par exemple, si vous souhaitez qu'un objet se déplace de 100 pixels en 1 seconde, il ira plus lentement qu'un objet se déplaçant de 1 000 pixels en 1 seconde. Vous pouvez saisir un nombre mesuré en millisecondes. Ou vous pouvez utiliser l'une de ces trois options à la place des nombres.
- Court = 250 ms
- Normal = 500 ms (par défaut)
- Long = 1000 ms
Jetez un œil à la syntaxe suivante pour utiliser la durée.
Syntaxe
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});Ou,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});transition
Cette option est utilisée pour déterminer le type de transition. Par exemple, si la transition doit être douce ou si elle doit commencer lentement, accélérez vers la fin. Jetez un œil à la syntaxe suivante pour appliquer la transition.
Syntaxe
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});Le tableau suivant décrit les différents types de transitions.
| S.No. | Type de transition et description |
|---|---|
| 1 | Linéaire Affiche une transition linéaire avec des événements d'entrée, de sortie, d'entrée-sortie |
| 2 | Quad Affiche une transition quadratique avec des événements in, out, in-out |
| 3 | Cubique Affiche une transition cubiculaire avec des événements in, out, in-out |
| 4 | Litre Affiche une transition quartétique avec des événements d'entrée, de sortie, d'entrée-sortie |
| 5 | Quint Affiche une transition quintique avec des événements in, out, in-out |
| 6 | Pow Utilisé pour générer des événements Quad, Cubic, Quart et Quint avec des événements in, out, in-out |
| sept | Expo Affiche une transition exponentielle avec des événements in, out, in-out |
| 8 | Circ Affiche une transition circulaire avec des événements d'entrée, de sortie, d'entrée-sortie |
| 9 | Sinus Affiche une transition sinusoïdale avec des événements in, out, in-out |
| dix | Retour Rend la transition en arrière, puis tout en avant avec des événements in, out, in-out |
| 11 | Rebondir Rend la transition dynamique avec des événements in, out, in-out |
| 12 | Élastique Transition de courbe élastique avec événements in, out, in-out |
Fx.Events fournit des options pour élever certains codes à différents niveaux tout au long de l'effet d'animation. Il vous permet de contrôler vos préadolescents et vos morphs. L'option fournie par Fx.Events -
onStart - Cela augmentera le code à exécuter lorsque le Fx démarre.
onCancel - Cela augmentera le code à exécuter lorsque le Fx est annulé.
onComplete - Il augmentera le code à exécuter lorsque le Fx sera terminé.
onChainComplete - lèvera le code à exécuter lorsque le Fx chaîné se termine.
Exemple
Prenons un exemple dans lequel, il y a des divs sur la page Web. Nous procédons en appliquant les méthodes Event aux divs. La première méthode est la méthode onStart () pour mettre en surbrillance le div lorsque le pointeur de la souris entre dans la zone div.
Le second est la méthode onComplete () qui met en évidence le div lorsque le pointeur de la souris quitte la zone div. Et lorsque le pointeur de la souris entre automatiquement dans la zone div, la taille div augmente de 400 px. Nous allons essayer d'exécuter toutes ces fonctionnalités en utilisant les méthodes Fx.Events. Jetez un œil au code suivant.
<!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>Vous recevrez la sortie suivante -