Mootools en 30 jours : jour 6 - manipuler le HTML

I. Introduction aux éléments HTML avec Mootools 1.2

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu le reste des tutoriels sur Mootools 1.2 de notre série de 30 jours.

Nous avons déjà vu comment sélectionner les éléments dans le DOM, comment créer des tableaux, comment créer des fonctions, comment attacher des évènements à des éléments, et aujourd'hui nous allons approfondir la manipulation des éléments HMTL. Avec Mootools 1.2, vous pouvez ajouter des éléments dans une page html, retirer des éléments, et changer n'importe quel paramètre de style ou d'élément, et tout ça à la volée.

II. Explications

Les Bases

.get();

Cet outil vous permet de récupérer des propriétés d'éléments. Les propriétés d'un élément sont toutes les pièces diverses qui composent un élément html, comme src, value, name, etc. L'utilisation de .get(); est très simple:

//cela retournera le tag html (div, a, span...) d'un element 
//dont l'id est "id_name"

$('id_name').get('tag');

Element

Vous pouvez utiliser .get() pour récupérer plus que des tags html :

  • id
  • name
  • value
  • href
  • src
  • class (retournera toutes les classes si l'élément en a plusieurs)
  • text (le contenu texte d'un élément)
  • etc…

.set();

.set(); fonctionne comme .get();, mais au lieu de récupérer une valeur, il définit une valeur. C'est pratique combiné avec les évènements, cela vous permet de changer les valeurs après le chargement de la page.

//cela mettra la valeur "http://www.google.com"
//au href de #id_name
$('id_name').set('href', 'http://www.google.com');

.erase();

Avec .erase();, vous pouvez supprimer la valeur d'une propriété des éléments. Cela fonctionne comme les deux précédents. Sélectionnez votre élément, puis choisissez quelle propriété vous voulez supprimer.

//cela supprimera la valeur href de #id_name
$('id_name').erase('href');

Déplacer des Eléments

.inject();

Pour déplacer un élément existant dans la page, vous pouvez utiliser .inject();. Tout comme les autres outils que nous avons vu, il est très facile à utiliser et vous donne un bon contrôle sur l'interface utilisateur. Pour utiliser .inject();, configurons d'abord quelques éléments dans des variables:

var elementA = $('elemA');
var elementB = $('elemB');
var elementC = $('elemC');

Le code ci-dessus place ces éléments html dans des variables, pour pouvoir les manipuler facilement avec Mootools.


A

B

C

Maintenant, pour changer l'ordre des éléments, nous pouvons utiliser .inject de quatre façons. Nous pouvons injecter dans le :

  • bottom (default) : en bas
  • top : en haut
  • before : avant
  • after : après

Bottom et top placeront l'élement injecté à l'intérieur d'un élément sélectionné, en haut ou en bas. D'un autre côté, Before et after injecteront un élément avant ou après un autre, mais pas à l'intérieur.

Essayons de changer l'ordre des éléménts ci-dessous en A-C-B. Comme nous n'avons pas besoin d'injecter un élément dans un autre, nous pouvons utiliser before ou after.

//se traduit par: injecte un element C avant B
elementC.inject(elementB, 'before');
 
//se traduit par: injecte un element B apres C
elementB.inject(elementC, 'after');

Créer un nouvel élément

new Element

Vous pouvez utiliser le constructeur “new Element” pour créer un nouvel élément html. C'est presque comme écrire un élément html classique, sauf qu'on ajustera la syntaxe pour qu'elle corresponde bien à celle de Mootools:

//d'abord, vous nommez une variable et déclarez un "new Element"
//puis vous défininssez le type de l'élément (div, a, span...)
var newElementVar = new Element('div', {
//configurez ici tous les paramètres de l'élement
'id': 'id_name',
'text': 'Je suis un nouveau div',
'styles': {
//configurez ici tous les paramètres de style
'width': '200px',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});

Maintenant que vous avez un nouvel élément, vous pouvez l'injecter quelque part dans le code que l'on a vu un peu avant. Commençons par avec ce html simple:


Some div content

Puis, mettons #content_id dans une variable:

var bodyWrapVar = $('body_wrap');

Comme nous l'avons appris avant, nous pouvons injecter l'élément que nous avons créé dans le html courant :

//traduisez par, injecter newElementVar tout en haut dans bodyWrapVar
newElementVar.inject(bodyWrapVar , 'top');

Le html ressemblera donc à quelque chose comme :



I am a new div

Some div content

Exemple

Pour cet exemple, faisons un formulaire qui vous permet d'ajouter un nouvel élément dans votre page html. Tout d'abord, mettons des champs de texte et un bouton.


ID:
texte:

Maintenant, construisons le JavaScript Mootools qui permettra à ce formulaire html d'injecter un nouvel élément dans votre page. Tout d'abord, ajoutons un évènement click sur le bouton et préparons une fonction qui va contenir notre code:

var newDiv = function() {
//nous mettrons notre code pour ajouter un élément ici
};
 
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

La chose suivante qu'il faudra voir c'est le type des variables que nous allons utiliser. Pour utiliser les données venant des champs du formulaire, nous devons les récupérer avec .get(); :

var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');

Maintenant les variables ci-dessus, idValue et textValue, contiennent les valeurs de leurs champs de texte respectifs. Comme nous voulons récupérer les valeurs de champs de texte au moment où l'utilisateur clique sur le bouton “créer un nouveau div”, nous devons placer le code ci-dessus dans la fonction newDiv();. Si nous devions récupérer les valeurs en dehors de la fonction avec get();, nous l'aurions fait au chargement de la page, et non sur le click.

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
};
 
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

Puis, nous allons prendre l'élement que nous voulons injecter et le mettre dans le nouveau div dans:

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
};
 
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

Puisque nous avons nos valeurs des champs de texte, nous pouvons maintenant créer le nouvel élément :

var newDiv = function() {
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
var bodyWrapVar = $('newElementContainer');
 
var newElementVar = new Element('div', {
//cela définit l'id égal à la valeur du champ de texte
'id': idValue,
//cela définit le texte à la valeur du champ de texte
'html': textValue
});
};
 
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
});

Il ne nous manque plus qu'à injecter le nouvel élément dans notre page :

var newDiv = function() {
var bodyWrapVar = $('newElementContainer');
var idValue = $('id_input').get('value');
var textValue = $('text_input').get('value');
 
var newElementVar = new Element('div', {
'id': idValue,
'text': textValue
});
 
//se traduit par: "injecter newElementVar dans bodyWrapVar en haut"
newElementVar.inject(bodyWrapVar, 'top');
};
 
var removeDiv = function() {
//cela vide le html à l'intérieur
//(tout ce qui est entre les tags div)
$('newElementContainer').erase('html');
}
 
window.addEvent('domready', function() {
$('new_div').addEvent('click', newDiv);
$('remove_div').addEvent('click', removeDiv);
});

 

ID:

texte:


(essayez de mettre “ilovemilk” comme id)

III. Conclusion du tutorial

Pour en savoir plus…

Prenez un peu de temps pour regarder la partie sur les Elements dans les docs Mootools :

  • Element contient la plupart des choses que nous avons vu et bien plus
  • Element.style vous donne le contrôle sur les propriétés de style (nous en parlerons plus dans un autre tutoriel)
  • Element.dimensions contient des outils pour gérer la position, les coordonnées et plus

Le tutoriel de demain

Mootools en 30 jours, Jour 7 - Les propriétés de Style