IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ MooTools

FAQ MooToolsConsultez toutes les FAQ

Nombre d'auteurs : 6, nombre de questions : 67, dernière mise à jour : 15 juin 2021 

 
OuvrirSommaireLes formulaires HTML et autres objetsLes formulairesLes champs des formulaires
 
Sélectionnez
<div id="id_div">
   Texte déjà présent.
</div>
 
Sélectionnez
$('id_div').appendText('Texte ajouté.');

Vous pouvez préciser la position :

 
Sélectionnez
//Valeur possible : before, after, top, bottom
$('id_div').appendText('Texte ajouté.', 'before');
Créé le 31 décembre 2010  par vermine

Tout d'abord, nous allons vérifier si l'élément a une certaine classe. Pour ce faire, on appelle la méthode hasClass avec comme paramètre le nom de la classe recherchée. Si la classe existe sur l'élément, alors la méthode renvoie true, sinon false :

 
Sélectionnez
$('id_element').hasClass('ma_classe');

Si la classe n'est pas trouvée, on peut la rajouter avec la méthode addClass. Cette méthode ne rajoutera rien si la classe est déjà présente sur l'élément :

 
Sélectionnez
$('id_element').addClass('ma_classe');

Vu qu'on vient de voir que l'on pouvait ajouter une classe, on peut très bien imaginer vouloir en retirer une, c'est pourquoi il y a la méthode removeClass :

 
Sélectionnez
$('id_element').removeClass('ma_classe');

Mieux encore, avec la même instruction, on peut ajouter la classe si elle n'est pas présente et sinon la retirer. C'est la méthode toggleClass qui permet cette inversion :

 
Sélectionnez
$('id_element').toggleClass('ma_classe');
Créé le 31 décembre 2010  par vermine

Nous pouvons récupérer la largeur et hauteur d'un élément avec la méthode getSize() :

 
Sélectionnez
<input type="text" id="id_input" value="Je suis un petit texte mais quand même." />

<div id="id_div" style="width:250;height:150;overflow-x:scroll;overflow-y:scroll;border:solid 1px black;">
   <p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
   <p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
   <p>Vu qu'il vaut mieux parfois un petit dessin qu'un long discours,</p>
   <p>ceci est un petit test sans prétention aucune.</p>
   <p>Il implémente de manière significative</p>
   <p>une méthode fort pratique et qui s'appelle :</p>
   <p><a href="#1" onclick="$('id_div').scrollTo(0, 0); return false;">ScrollTo</a></p>
   <p>Ici, c'est du bourrage pour obtenir la scrolbar horizontale :</p>
   --------------------------------------- SansIntérêtSansIntérêtSansIntérêtSansIntérêtSansIntérêt ---------------------------------------   
</div>
 
Sélectionnez
alert($('id_input').getSize().x); //IE : 146 FF : 146
alert($('id_input').getSize().y); //IE : 22 FF : 22
alert($('id_div').getSize().x); //IE : 250 FF : 252
alert($('id_div').getSize().y); //IE : 150 FF : 152

C'est la largeur visuelle de la case, mais nous pouvons obtenir la largeur réelle de l'élément, avec le texte "caché" et accessible par les barres de défilement. Nous utilisons alors getScrollSize() :

 
Sélectionnez
<input type="text" id="id_input" />

<div id="id_div" style="width:250;height:150;overflow-x:scroll;overflow-y:scroll;border:solid 1px black;">
   <p>Lorsque nous sommes en bas d'une page ou bien d'un élément avec des barres de défilement,</p>
   <p>nous désirons parfois retourner au début de cet élément en un seul clic.</p>
   <p>Vu qu'il faut parfois mieux un petit dessin qu'un long discours,</p>
   <p>ceci est un petit test sans prétention aucune.</p>
   <p>Il implémente de manière significative</p>
   <p>une méthode fort pratique et qui s'appelle :</p>
   <p><a href="#1" onclick="$('id_div').scrollTo(0, 0); return false;">ScrollTo</a></p>
</div>
 
Sélectionnez
alert($('id_input').getScrollSize().x);
alert($('id_input').getScrollSize().y);
alert($('id_div').getScrollSize().x);
alert($('id_div').getScrollSize().y);
Créé le 31 décembre 2010  par vermine

Pour ajouter un ou plusieurs styles CSS, nous utilisons les méthodes setStyle et setStyles. On leur fournit en paramètres les couples style - valeur.

Partons d'une div :

 
Sélectionnez
<div id="id_div" style="background-color:#6699FF">La div.</div>


Nous pouvons lui ajouter par exemple une hauteur, une police et une bordure :

 
Sélectionnez
$('id_div').setStyle('height', '40px');
$('id_div').setStyles({
    border: '3px solid #333',
    font: '20px Arial'
});


Pour récupérer un ou plusieurs styles, nous nous servons des méthodes jumelles getStyle et getStyles :

 
Sélectionnez
alert($('id_div').getStyle('background-color'));
//Résultat : #6699FF

var les_styles = $('id_div').getStyles('height', 'border');
alert(les_styles.height); //40px
alert(les_styles.border); //#333 3px solid


Il n'y a malheureusement pas les méthodes identiques pour supprimer un ou plusieurs styles. Donc nous passons par removeProperty qui supprime tous les styles :

 
Sélectionnez
$('id_div').removeProperty('style');


Pour retirer un seul style, nous vous proposons de le mettre à vide :

 
Sélectionnez
$('id_div').setStyle('background-color', '');
Créé le 31 décembre 2010  par vermine

Pour récupérer la nature d'un élément, on cherche son tag :

 
Sélectionnez
<div id="id_div">Que suis-je ?</div>
 
Sélectionnez
alert($('id_div').get('tag'));
//Résutlat : div


À savoir, nous pouvons aussi faire une vérification par le biais de la méthode match. Par exemple, regardons si l'élément est une div :

 
Sélectionnez
alert($('id_div').match('div'));
//Résutlat : true
Créé le 31 décembre 2010  par vermine

Si la liste n'accepte qu'une sélection :

 
Sélectionnez
<select id="id_select" name="fruits">
    <option value="pomme">Pomme</option>
    <option value="poire">Poire</option>
    <option value="fraise" selected>Fraise</option>
    <option value="cerise">Cerise</option>
</select>


La méthode getSelected renvoie un tableau d'une seule cellule :

 
Sélectionnez
var selection = $('id_select').getSelected();
alert(selection[0].value);
//Résultalt : fraise


Si, par contre, nous avons une liste qui accepte plusieurs sélections :

 
Sélectionnez
<select id="id_select" name="fruits[]" multiple>
    <option value="pomme">Pomme</option>
    <option value="poire" selected>Poire</option>
    <option value="fraise" selected>Fraise</option>
    <option value="cerise">Cerise</option>
</select>


Le tableau renvoyé sera constitué de plusieurs cellules :

 
Sélectionnez
var selection = $('id_select').getSelected();
//Résultalt : selection = [objet,objet]
//           selection[0].value = poire
//           selection[1].value = fraise
Créé le 31 décembre 2010  par vermine

Imaginons une série de checkbox ayant le même nom et dont deux sont sélectionnées :

 
Sélectionnez
<input type="checkbox" name="mon_nom" value="value_1" /> Valeur 1
<input type="checkbox" name="mon_nom" value="value_2" checked /> Valeur 2
<input type="checkbox" name="mon_nom" value="value_3" /> Valeur 3
<input type="checkbox" name="mon_nom" value="value_4" checked /> Valeur 4
<input type="checkbox" name="mon_nom" value="value_5" /> Valeur 5

Nous pouvons obtenir les valeurs de toutes celles qui sont cochées.

Plusieurs possibilités s'offrent à nous. La première est assez intuitive et directe. Elle consiste à rechercher les input qui ont le même nom, de filtrer sur ceux qui ont un attribut checked et d'en récupérer la valeur sous forme de tableau :

 
Sélectionnez
var valeurs = $$('input[name=mon_nom]:checked').get('value');
alert(valeurs);


Toutefois, certains anciens navigateurs sont réticents et préfèrent d'autres syntaxes.
Nous avons donc en seconde position l'utilisation de map qui va associer une fonction à chaque élément du tableau :

 
Sélectionnez
var valeurs = $$('input[name=mon_nom]:checked').map(function(e) { return e.value; });
alert(valeurs);


Une troisième version consiste quant à elle à creer un nouvel objet selon le résultat du filtre. Elle se rapproche fortement de la précédente car elle associe également aux éléments de l'objet une fonction :

 
Sélectionnez
var valeurs = $$("input[name='mon_nom']").filter(function(e) { if(e.checked) return e; });
alert(valeurs[0].value);
alert(valeurs[1].value);

//Notez que pour récupérer uniquement le premier élément coché, on peut utiliser cette instruction :
var valeur = $$("input[name='mon_nom']").filter(function(e) { if(e.checked) return e; })[0].value;
alert(valeur);


Comme vu dans le dernier bout de code, nous pouvons pousser l'audace et redéfinir une méthode de Array pour ne sortir que la première checkbox cochée, et ce n'est qu'un exemple :

 
Sélectionnez
Array.implement({
       getFirst: function() {
           if(this.length == 0) {
                return null;
           } 
       
           return this[0];
      } 
});

var valeur = $$('input[name=mon_nom]:checked').getFirst().value; 
alert(valeur);
Créé le 13 janvier 2011  par Michael REMY, vermine

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2010 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.