Checkbox avec mootools

Version imprimable

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:

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:

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.

Bonjour,
tu pourrais avoir cette approche

Code:

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>

11/03/2013, 15h21
Tiger545

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?
11/03/2013, 15h35
Tiger545

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
11/03/2013, 17h29
Torgar

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.

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

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

Exemple ici
Code:

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.

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:

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:

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:

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>

http://www.developpez.com/template/kit/kitwarning.png Attention les identifiants ID dans ta page ne sont pas cohérents!

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:

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:

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>

12/03/2013, 12h54
vermine

Ouille. Vous mélangez deux techniques. Ce n'est pas l'idéal. Utilisez soit le fade soit le show/hide.
12/03/2013, 12h56
Tiger545

J'imagine, mais comme je ne suis pas un pro et que ça marche, je fais avec. As-tu une autre idée?
16/03/2013, 09h04
NoSmoking

Citation:

As-tu une autre idée?

je trouvais sympa l'approche que je t’ai mis :mouarf: