Checkbox avec mootools

**Tiger545** · 08/03/2013, 15h48

Bonjour, j'ai un petit soucis avec Mootools.

J'ai une case à cocher sur laquelle je souhaite que lorsque je clique, il apparait des options, je veux le faire avec Mootools question d'avoir un effet agréable. J'ai presque réussi en cherchant sur internet, sauf que ça fait le contraire de ce que je veux.
Voici mon exemple
Dans la dernière option : Changement de cadradage noir à doré : 35.00$

Premièrement, je veux que l'image soit caché en chargeant la page.
Deuxièmement, je veux que les options s'affichent lorsque je clique sur la case à cocher.
Troisièmement, je veux que les options se cachent si je décoche la case à cocher.

Javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
//when the dom is ready...
window.addEvent('domready', function() {
  //time to implement fancy show / hide
  Element.implement({
    //implement show
    fancyShow: function() {
      this.fade('in');
    },
    //implement hide
    fancyHide: function() {
      this.fade('out');
    }
  });
});

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<input onclick="javascript:$('blove2').fancyHide();" type="checkbox" name="checkbox3" id="checkbox3">
          <label for="checkbox3">Changement de cadradage noir à doré : 35.00$</label>
          	<p>
              <img src="../images/lignenoire.jpg" id="blove2" />
            </p>

J'ai réussi à le faire sur l'option : Inscription sur la porcelaine (nom, date ... ) : 35.00$, sauf que ce n'est pas aussi beau qu'avec Mootools.

Merci pour votre aide.

**NoSmoking** · 10/03/2013, 22h58

Bonjour,
tu pourrais avoir cette approche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Precious Souvenir</title>
<script src="../javascript/mootools-core-1.4.5.js"></script>
<script src="../javascript/mootools-more-1.4.0.1.js"></script>
<script>
//when the dom is ready...
window.addEvent('domready', function() {
  // fonction sur le clic
  $('checkbox3').addEvent('click', function(){
    // action suivant état de la checkbox
    this.checked ? $('blove2').fade('in') : $('blove2').fade('out');
  });
  // masque l'image
  $('blove2').fade('hide');
});
</script>
</head>
<body>
  <input type="checkbox" name="checkbox3" id="checkbox3">
  <label for="checkbox3">Changement de cadradage noir à doré : 35.00$</label>
  <p><img src="../images/lignenoire.jpg" id="blove2"/></p>
</body>
</html>

**Tiger545** · 11/03/2013, 15h21

Merci, ça fonctionne. Cependant ça fonctionne seulement sur l'image. Je vais devoir l'appliquer sur des div, qu'est-ce que je dois modifier?

**Tiger545** · 11/03/2013, 15h35

C'est bon, je devais simplement déplacer mon id=blove2.

Autre question, il reste un espace que je souhaite remplir.
Donc en dessous de la ligne : Changement de cadradage noir à doré : 35.00$
Il y a l'option : Commande urgente (moins de 10 jours) : 35.00$
Entre les deux, je voudrais supprimer cet espace lorsque la boîte n'est pas coché.

Merci

**Torgar** · 11/03/2013, 17h29

Soit tu passes par du CSS pour mettre en forme ton paragraphe, soit tu déplaces l'id sur la balise <p></p> et non plus la balise image.

**Tiger545** · 11/03/2013, 18h51

Oui je l'ai déplacé et ça fonctionne.

Le problème maintenant est avec la fonction Fx.Slide

Exemple ici

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
window.addEvent('domready', function() {
  // fonction sur le clic
	  var mySlide = new Fx.Slide('blove2').show().toggle().chain(function(){
	  });
 
 
	  $('checkbox3').addEvent('click', function(){
		// action suivant état de la checkbox
		this.checked ? $('blove2').fade('in') : $('blove2').fade('out').hide().toggle();
 
		// Hides the Element, then brings it back in with toggle and finally alerts
		// when complete:
		var mySlide = new Fx.Slide('blove2').hide().toggle().chain(function(){
	  });
  });
 
  // masque l'image
  $('blove2').fade('hide');
 
  });

Quand je clique sur la case à cocher, ça s'affiche très bien, mais lorsque je la décoche, ça ne fonctionne pas comme je le veux, l'espace reste en place. J'ai essayer plusieurs choses, rien ne marche pour le moment.

Merci pour votre aide.

**NoSmoking** · 11/03/2013, 22h07

La méthode fade() joue sur l'opacité mais l'élément reste dans le flux ce qui fait qu'il occupe l'espace de ses dimensions à l'écran, visiblement cela ne te convient pas.

Une autre approche est de faire apparaître ton image par agrandissement, pour cela tu peux utiliser la méthode tween(), mais il va te falloir récupérer ces dimensions et les stocker avant de la masquer en la mettant en width:0.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  $('blove2').originalWidth = $('blove2').getStyle('width'); // récup. de la largeur
  $('blove2').setStyle('width', 0); // on la masque

maintenant dans la fonction on utilise la méthode tween().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
  $('checkbox3').addEvent('click', function(){
    oElem = $('blove2');
    this.checked ? oElem.tween('width', oElem.originalWidth) : oElem.tween('width',0);
  });

Maintenant pour ton INPUT tu peux suivre la même démarche, mais en jouant sur la hauteur du P qui encapsulera celui ci.

exemple de rendu possible:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="http://precioussouvenir.com/2013/fr/">
<title>Precious Souvenir</title>
<link href="../style/styleWeb.css" rel="stylesheet" type="text/css">
<script src="../javascript/mootools-core-1.4.5.js"></script>
<script src="../javascript/mootools-more-1.4.0.1.js"></script>
<script>
window.addEvent('domready', function() {
  // fonction sur le clic
  $('checkbox3').addEvent('click', function(){
    oElem = $('blove2');
    this.checked ? oElem.tween('width', oElem.originalWidth) : oElem.tween('width',0);
  });
 
  $('checkbox2').addEvent('click', function(){
    var oElem = $('p_text');
    this.checked ? oElem.tween('height', oElem.originalHeight) : oElem.tween('height',0);
  });
 
  // init des éléments
  $('blove2').originalWidth = $('blove2').getStyle('width');
  $('blove2').setStyle('width', 0);
 
  $('p_text').originalHeight = $('p_text').getStyle('height');
  $('p_text').setStyles({
    'height': 0,
    'overflow': 'hidden'
  });
 
});
</script>
</head>
<body>
<div id="main">
  <input type="checkbox" name="checkbox2" id="checkbox2">
  <label for="checkbox2">Inscription sur la porcelaine (nom, date ... ) : 35.00$<br></label>
  <p id="p_text"><input type="text" value="Entrez votre inscription" name="textfield" id="textfield"></p>
 
  <input type="checkbox" name="checkbox3" id="checkbox3">
  <label for="checkbox3">Changement de cadradage noir à doré : 35.00$</label>
  <p><img src="../images/lignenoire.jpg" id="blove2"/></p>
 
  <input type="checkbox" id="rush" name="rush">
  <label for="rush">Commande urgente (moins de 10 jours) : 35.00$</label>
</div>
</body>
</html>

Attention les identifiants ID dans ta page ne sont pas cohérents!

**Tiger545** · 12/03/2013, 12h33

J'ai réussi, le seul petit problème est qu'il y a une animation lors du chargement de la page.

Voici le code utilisé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
window.addEvent('domready', function() {
  // fonction sur le clic
 
  	//Initialiser pour que ce soit caché en chargement la page
	  var mySlide = new Fx.Slide('blove2').show().toggle().chain(function(){
 
	  });
 
 
  		//Fonction du checkbox
	  $('checkbox3').addEvent('click', function(){
 
 
		// action suivant état de la checkbox
		this.checked ? $('blove2').fade('in').show() : $('blove2').fade('in').toggle();
 
 
		// Cache les éléments, attention, la fonction hide() annule tout animation
		var mySlide = new Fx.Slide('blove2').toggle().chain(function(){
 
	  });
 
  });
 
  // masque l'image
  $('blove2').fade('hide').toggle();
 
 
});

le html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<input type="checkbox" name="checkbox3" id="checkbox3">
          <label for="checkbox3" class="smallLabel">Changement de cadradage noir à doré : 35.00$</label>
          <div id="blove2" style="visibility:hidden;">Le contenue de votre div</div>