[MooTools] Boucle For pour Fx.Slide

Boucle For pour Fx.Slide

Bonjour,

J'essaye de modifier mon javascript afin d'y intégrer une bouche "For", ce qui m'éviterait d'avoir à créer une liste complète et très répétitive. Si cette liste ne changeait jamais, pas de souci, mais c'est tout l'inverse. En fait si j'ai besoin de cela c'est parce que la liste en question change très souvent (rajout, suppression et remplacement). Ces éléments sont contenus par un tableau. Chaque ligne contient un slide[x] (ici c'est le 6 comme exemple) qui comporte une série de liens vers des documents. Pour une plus grande facilité d'administration, chaque ligne est soské dans une base de donnée et appellée par le biaias d'une variable. Cela fonctionne parfaitement tant que je ne supprime pas de ligne dans la liste.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div class="marginbottom"> 
Name and description of Item 6
<div id="vertical_slide6"><br /> 
<table border="0" align="center" cellspacing="0"> 
<tr><td colspan="2" class="p">Name : Item 6</td></tr> 
<tr><td colspan="2" class="p">Type : Documentation</td></tr> 
<tr><td colspan="2" class="p">Description : Full Tutorial 6</td></tr> 
<tr><td class="p">Document 6</td> 
<td class="p">Tutorial 6</td></tr> 
<tr><td class="p">Illustration 6</td> 
<td class="p">Album 6</td></tr> 
<tr><td class="p">Example 6.1</td> 
<td class="p">Example 6.2</td> 
</tr><tr><td class="p">Example 6.3</td> 
<td class="p"> </td></tr></table><br /> 
<div align="right">- Close</div></div></div>

Les classes utilisées me sont imposées car dans un CMS et je n'ai pas accès au CSS. Chaque contenu de ligne (intitulé + Fx.Slide) est stocké dans une base de donnée pour administrer plus facilement la page HTMl qui les appèle. Ma question est la suivante: Comment pourrais-je ne remplacer le 6 qui est dans le code par une variable de boucle, ce qui m'évite de mettre la base de données et le JS à jour. J'ai essayé en faisaint une liste complète, anticipativement (Fx.Slide 0 à 68) et ça fonctionne parfaitement mais dés que je retire une ligne ou un Fx.Slide x ou y, c'est fichu et normal, tout reste ouvert. Logique puisque certains toggle status ne sont pas revoyés. le hic c'est que je n'arrive pas à contourner cela. Suis vraiment débutant en javascript du moins.

1 à 5 dans la liste...
suppression item 6 par exemple
7 to 18 dans la liste...

Ci-dessous le js script:

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
51
52
53
54
55
 
window.addEvent('domready', function() { 
        var status = {'true': 'open','false': 'close'}; 
 
(....) 0 à 5 .... 
 
        var myVerticalSlide6 = new Fx.Slide('vertical_slide6'); 
        $('v_slidein6').addEvent('click', function(e){ 
        e.stop();myVerticalSlide6.slideIn();}); 
 
        $('v_slideout6').addEvent('click', function(e){ 
        e.stop();myVerticalSlide6.slideOut();}); 
 
        $('v_toggle6').addEvent('click', function(e){ 
        e.stop();myVerticalSlide6.toggle();}); 
 
        $('v_hide6').addEvent('click', function(e){ 
        e.stop();myVerticalSlide6.hide(); 
        $('vertical_status6').set('html', status[myVerticalSlide6.open]);}); 
 
        $('v_show6').addEvent('click', function(e){ 
        e.stop();myVerticalSlide6.show(); 
        $('vertical_status6').set('html', status[myVerticalSlide6.open]);}); 
 
        myVerticalSlide6.hide(); 
        myVerticalSlide6.addEvent('complete', function() { 
        $('vertical_status6').set('html', status[myVerticalSlide6.open]); 
        }); 
 
(....) 7 à 18 .... 
 
        var myVerticalSlide18 = new Fx.Slide('vertical_slide18'); 
        $('v_slidein18').addEvent('click', function(e){ 
        e.stop();myVerticalSlide18.slideIn();}); 
 
        $('v_slideout18').addEvent('click', function(e){ 
        e.stop();myVerticalSlide18.slideOut();}); 
 
        $('v_toggle18').addEvent('click', function(e){ 
        e.stop();myVerticalSlide18.toggle();}); 
 
        $('v_hide18').addEvent('click', function(e){ 
        e.stop();myVerticalSlide18.hide(); 
        $('vertical_status18').set('html', status[myVerticalSlide18.open]);}); 
 
        $('v_show18').addEvent('click', function(e){ 
        e.stop();myVerticalSlide18.show(); 
        $('vertical_status18').set('html', status[myVerticalSlide18.open]);}); 
 
        myVerticalSlide18.hide(); 
        myVerticalSlide18.addEvent('complete', function() { 
        $('vertical_status18').set('html', status[myVerticalSlide18.open]); 
        }); 
 
});

Est-ce qu'à tout hasard quelqu'un pourrait m'aider ou a une idée pour mettre un for (for i=0; i<=18, i++) ou équivalent. J'ai déjà cherché dans la doc et dans certains tutoriaux mais sans succès. J'ai aussi déjà essayé, mais certainement mal, ne connaissant pas les fonctions et la nomenclature JS et Ajax. Ci-dessous ce que j'aimerais implémenter ou du même genre.

Ligne dans la table:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div class="marginbottom"> 
Name and description of Item 6
<div id="vertical_slide.[i]"><br /> 
<table border="0" align="center" cellspacing="0"> 
<tr><td colspan="2" class="p">Name : Item 6</td></tr> 
<tr><td colspan="2" class="p">Type : Documentation</td></tr> 
<tr><td colspan="2" class="p">Description : Full Tutorial 6</td></tr> 
<tr><td class="p">Document 6</td> 
<td class="p">Tutorial 6</td></tr> 
<tr><td class="p">Illustration 6</td> 
<td class="p">Album 6</td></tr> 
<tr><td class="p">Example 6.1</td> 
<td class="p">Example 6.2</td> 
</tr><tr><td class="p">Example 6.3</td> 
<td class="p"> </td></tr></table><br /> 
<div align="right">- Close</div></div></div>

JS script:

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
 
window.addEvent('domready', function() { 
        var status = {'true': 'open','false': 'close'}; 
        var i=0; 
 
             for i=0;i<=18;i++; 
             { 
             var myVerticalSlide[i] = new Fx.Slide('vertical_slide'.[i] ); 
        $('v_slidein'.[i] ).addEvent('click', function(e){ 
        e.stop();myVerticalSlide.[i].slideIn();}); 
 
        $('v_slideout'.[i] ).addEvent('click', function(e){ 
        e.stop();myVerticalSlide.[i].slideOut();}); 
 
        $('v_toggle'.[i] ).addEvent('click', function(e){ 
        e.stop();myVerticalSlide.[i].toggle();}); 
 
        $('v_hide'.[i]).addEvent('click', function(e){ 
        e.stop();myVerticalSlide.[i].hide(); 
        $('vertical_status'.[i]).set('html', status[myVerticalSlide.[i].open]);}); 
 
        $('v_show'.[i]).addEvent('click', function(e){ 
        e.stop();myVerticalSlide.[i].show(); 
        $('vertical_status'.[i]).set('html', status[myVerticalSlide.[i].open]);}); 
 
        myVerticalSlide.[i].hide(); 
        myVerticalSlide.[i].addEvent('complete', function() { 
        $('vertical_status'.[i]).set('html', status[myVerticalSlide.[i].open]); 
        }); 
             i++; 
             } 
});

J'espère que mon explication est suffisement claire J'ai fait de nombreuses tentatives par moi-même mais sans succès. J'espère sincèrement pouvoir trouver quelqu'un en mesure de m'aider car l'administartion sans ce système serait vraiment lourde et fastidieuse.

J'utilise Mootools 1.2 dans une plateforme CMS.

Merci d'avance pour votre aide.

Polo

Bonjour à toi,

Je te conseil le PHP pour faire ta boucle. Voici donc ce que cela pourrait donné :

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
 
window.addEvent('domready', function() { 
        var status = {'true': 'open','false': 'close'}; 
        var i=0;
<?php
  for ($i=0;$i<=18;$i++) {
?>
        var myVerticalSlide<?php echo $i; ?> = new Fx.Slide('vertical_slide<?php echo $i; ?>'); 
        $('v_slidein<?php echo $i; ?>').addEvent('click', function(e){ 
        e.stop();myVerticalSlide<?php echo $i; ?>.slideIn();}); 
 
        $('v_slideout<?php echo $i; ?>').addEvent('click', function(e){ 
        e.stop();myVerticalSlide<?php echo $i; ?>.slideOut();}); 
 
        $('v_toggle<?php echo $i; ?>').addEvent('click', function(e){ 
        e.stop();myVerticalSlide<?php echo $i; ?>.toggle();}); 
 
        $('v_hide<?php echo $i; ?>').addEvent('click', function(e){ 
        e.stop();myVerticalSlide<?php echo $i; ?>.hide(); 
        $('vertical_status<?php echo $i; ?>').set('html', status[myVerticalSlide<?php echo $i; ?>.open]);}); 
 
        $('v_show<?php echo $i; ?>').addEvent('click', function(e){ 
        e.stop();myVerticalSlide<?php echo $i; ?>.show(); 
        $('vertical_status<?php echo $i; ?>').set('html', status[myVerticalSlide<?php echo $i; ?>.open]);}); 
 
        myVerticalSlide<?php echo $i; ?>.hide(); 
        myVerticalSlide<?php echo $i; ?>.addEvent('complete', function() { 
        $('vertical_status<?php echo $i; ?>').set('html', status[myVerticalSlide<?php echo $i; ?>.open]); 
        });
<?php
  }
?>
});

Merci à toi Adidas.

J'aurais bien aimé mais je n'ai pas la main sur le serveur sur lequel il n'y pas de php... :o((((( On va devoir trouver autre chose... hélas... mais merci quand même...

A mon avis tu vas te maudire d'ici quelques temps...

L'opérateur de concaténation en Javascript est le '+' pas le '.', et en plus je ne vois pas trop ce que vient faire l'opérateur [] dans ton code. Quelque chose comme :

Code:

$('v_slidein'+ i)

Marchera à mon avis beaucoup mieux ;)

2 pièce(s) jointe(s)

Bonjour et merci.

Je ne suis vraiment pas familier au javascrript donc ton coup de pouce m'a déjà fait progressé. J'ai encore de multiples erreurs (cf Pièce jointe) et syntaxique apparement...

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
 
window.addEvent('domready', function() {
	var status = {'true': 'open','false': 'close'};
	var i=0;
 
	for (i=0;i<=4;i++);
	{
	var myVerticalSlide+i = new Fx.Slide('vertical_slide'+i);
	$('v_slidein'+i).addEvent('click', function(e){
	e.stop();myVerticalSlide+i.slideIn();});
 
	$('v_slideout'+i).addEvent('click', function(e){
	e.stop();myVerticalSlide+i.slideOut();});
 
	$('v_toggle'+i).addEvent('click', function(e){
	e.stop();myVerticalSlide+i.toggle();});
 
	$('v_hide'+i).addEvent('click', function(e){
	e.stop();myVerticalSlide+i.hide();
	$('vertical_status'+i).set('html', status[myVerticalSlide+i.open]);});
 
	$('v_show'+i).addEvent('click', function(e){
	e.stop();myVerticalSlide+i.show();
	$('vertical_status+i').set('html', status[myVerticalSlide+i.open]);});
 
	myVerticalSlide+i.hide();
	myVerticalSlide+i.addEvent('complete', function() {
	$('vertical_status'+i).set('html', status[myVerticalSlide+i.open]);
	});
	i++;
	};		
});

Voilà je ne sais pas si ça pourra aider à faire avancer le schmilblik...

Merci en tous cas.

Polo