Discussion :

[xess91]

Bonjour à tous,

je souhaite attribuer un argument à une fonction ajoutée en DOM sur des boutons créer dans une boucle.

Mon code :

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
 
function createBoutons()
     {
     this.boutons = null ;
     this.bouton = null ;
     }
 
createBoutons.prototype.assignEvent = function()
     {
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
          {
           bouton = document.getElementById(boutons[i])  ;
           bouton.onclick = function(){ objet.catchEvent(i) ; } ;
          }
     }
 
createBoutons.prototype.catchEvent = function(value)
     {
     alert(value) ;
     }
 
var cBtn = new createBoutons()  ;
cBtn.boutons = Array("btn1", "btn2", "btn3")  ;
cBtn.assignEvent() ;

Lors d'un clic sur n'importe lequel des boutons l'argument "value" à toujours la même valeur, c'est à dire la dernière valeur qu'à pris "i". Si j'ai trois boutons "value" vaudra deux, si j'ai quatre boutons "value" vaudra trois.

Je souhaiterai savoir comment faire pour que les arguments de chaque boutons correspondent au "i" au moment de la création de l'écouteur d'évènement "onclick" et aussi comment savoir de quel bouton provient l'évènement.

Merci à tous pour vos réponses.

[SpaceFrog]

Code :

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

1
2
3
4
5
6
7
8
9
createBoutons.prototype.assignEvent = function(params)
     {
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
          {
           bouton = document.getElementById(boutons[i])  ;
           bouton.onclick = function(params){ objet.catchEvent(i) ; } ;
          }
     }

avec params etant par exemple un objet json que tu peux exploiter dans ton click

[Willpower]

Code :

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

1
2
3
4
5
6
7
8
9
createBoutons.prototype.assignEvent = function(params)
     {
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
          {
           bouton = document.getElementById(boutons[i])  ;
           bouton.onclick = function(params){ objet.catchEvent(i) ; } ;
          }
     }

avec params etant par exemple un objet json que tu peux exploiter dans ton click

Heu.. je sais pas s'il pourra passer le param à là fonction...

Enfin, deja ça me semble bizarre que ça ne fonctionne pas. P-e qu'en déclarant une "var value = i" dans là boucle ou dans là fonction ça corrigera le problème.

Autrement, je sais que dans mon jeune temps, quand j'étais un noob en js, j'avais résolu ce problème en attachant une value (ou un objet) à mon dom objet. Du genre "bouton.myvalue = i" puis je récupérai ma value grace à event.target.myvalue. ( ou qqes chose du genre.) :-)

[Bovino]

Code :

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

bouton.onclick = function(){ objet.catchEvent(i) ; } ;

A moins de cliquer sur le bouton pendant l'exécution de la boucle, quelle est selon toi la valeur de i lors du clic

Il faut attribuer une propriété à l'objet en question :

Code :

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

1
2
bouton.valeur = i;
bouton.onclick = function(){ objet.catchEvent(this.valeur) ; } ;

[Willpower]

Code :

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

bouton.onclick = function(){ objet.catchEvent(i) ; } ;

A moins de cliquer sur le bouton pendant l'exécution de la boucle, quelle est selon toi la valeur de i lors du clic

Il faut attribuer une propriété à l'objet en question :

Code :

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

1
2
bouton.valeur = i;
bouton.onclick = function(){ objet.catchEvent(this.valeur) ; } ;

J'ai pas de quoi tester sous la main mais je ne suis pas sur qu'il ait accès au bon this, dans quel cas il pourra tjs récupérer son dom objet avec event.target ( ou ses variantes selon IE)

[Willpower]

Heu.. je sais pas s'il pourra passer le param à là fonction...

Enfin, deja ça me semble bizarre que ça ne fonctionne pas. P-e qu'en déclarant une "var value = i" dans là boucle ou dans là fonction ça corrigera le problème.

Autrement, je sais que dans mon jeune temps, quand j'étais un noob en js, j'avais résolu ce problème en attachant une value (ou un objet) à mon dom objet. Du genre "bouton.myvalue = i" puis je récupérai ma value grace à event.target.myvalue. ( ou qqes chose du genre.) :-)

J'étais bien fatigué ce matin. Essaye de voir si déclarer une variable local dans la boucle ne résout pas ton problème ? :-)

[sekaijin]

Code :

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

bouton.onclick = function(){ objet.catchEvent(i) ; } ;

A moins de cliquer sur le bouton pendant l'exécution de la boucle, quelle est selon toi la valeur de i lors du clic

Il faut attribuer une propriété à l'objet en question :

Code :

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

1
2
bouton.valeur = i;
bouton.onclick = function(){ objet.catchEvent(this.valeur) ; } ;

J'ai pas de quoi tester sous la main mais je ne suis pas sur qu'il ait accès au bon this, dans quel cas il pourra tjs récupérer son dom objet avec event.target ( ou ses variantes selon IE)

bonsoir
j'aurais mois aussi utilisé cette approche
et oui quelque soit le navigateur la méthode onclick à accès à this et le this en question est une référence à l'objet sur lequel on a cliqué

J'utilise beaucoup cette approche
tu peux faire un view source sur
http://jeanyves.terrien.free.fr/DomTabs.html
la propriété currentTab sur l'objet ul fonctionne ainsi

attention tout de même à ne pas utiliser comme nom de propriété une propriété ou un attribut de l'objet

pour aller jusque au bout tu pouvais aussi utiliser cette méthode pour l'objet this de la méthode

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
createBoutons.prototype.assignEvent = function()
{
     for(var 1 = 0; i < boutons.length; i++)
          {
           bouton = document.getElementById(boutons[i])  ;
           bouton.data = {
                object:this, 
                index:i,
                fn: function() { this.objet.catchEvent(this.index); }
           }
           bouton.onclick = function(){ this.data.fn(); } ;
          }
     }

note que tout ce dont à besoin l'événement est dans l'objet data
comme tu fais ça dans ta méthode assignEvent tu passe directement l'objet this pas besoin de créer une variable locale object

l'autre approche est celle que tu avait utiliser pour object c'est a dire définir une variable dont la porté serait accessible à la méthode onclick

cette approche est utilisé par certain framework elle consiste à avoir une fonction createCallBack qui construit un fonction annonyme dans une closure contenant les éléments de contexte nécessaire celle ci-si étant affecté onclick
voir
http://dev.sencha.com/deploy/dev/docs/?class=Function
ta méthode deviendrait alors quelque chose comme

Code :

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

1
2
3
4
5
6
7
8
9
createBoutons.prototype.assignEvent = function()
     {
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
          {
           bouton = document.getElementById(boutons[i])  ;
           bouton.onclick = objet.catchEvent.createCallback(i);
          }
     }

A+JYT

[Willpower]

bon, je viens de tester sur un vrai pc :

le code que t'as filé ne ressemble à rien, il ne "compile" de nulle part, donc je ne comprend pas comment tu peux avoir des problèmes avec la valeur de i ?

tu ne déclares même pas i ! (1 = 0) ^^

ensuite, la solution :

Code js :

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
function createBoutons()
     {
     this.boutons = null ;
     }
 
createBoutons.prototype.assignEvent = function()
     {
     for(var i = 0; i < this.boutons.length; ++i)
          (function(objet,value){
           bouton = document.getElementById(objet.boutons[value])  ;
           bouton.onclick = function(){ objet.catchEvent(value+1) ; } ;
          })(this,i);
     };
 
createBoutons.prototype.catchEvent = function(value)
     {
     alert(value) ;
     };
 
var cBtn = new createBoutons()  ;
cBtn.boutons = Array("btn1", "btn2", "btn3")  ;
cBtn.assignEvent() ;

edit:
ps: je ne connais pas l'étendu de ton code, mais si ton code se limite plus ou moins à ce que tu nous montres, alors tu n'as peut-être pas besoin de jouer avec les objets et leurs prototypes : (parce que là, on essaye d'adapter le code pour garder l'esprit de ton code original, çàd appeler catchEvent sur l'objet "cBtn.boutons" (ce qui à mon avis, n'est pas forcément ton idée).

une autre solution (simplifiée mais p-e suffisante pour ton utilisation):

Code js :

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
function assignEvent(tableau)
{
	for(var i = 0; i < tableau.length; ++i)	{
			bouton = document.getElementById(tableau[i]);
			bouton.value = i;
			bouton.onclick = catchEvent;
	}
}
 
function catchEvent()
{
     alert(this.value) ;
}
 
var btn =  ["btn1", "btn2", "btn3"];
assignEvent(btn);

[NoSmoking]

on peut également passer par un variable à laquelle on assigne une fonction retournant la méthode catchEvent

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
createBoutons.prototype.assignEvent = function(){
  var objet = this ;
  // la fonction a mettre sur le click
  var fnClick = function( param){
    return function(){
      objet.catchEvent(param);
    }
  }
  for(var i = 0; i < objet.boutons.length; i++){
    bouton = document.getElementById( objet.boutons[i])  ;
    // affectation de la fonction  
     bouton.onclick = fnClick( i);
  }
}

[xess91]

Bonjour à vous,

D'ors et déjà merci d'avoir participé à cette discussion...

WillPower, tu as bien vu j'ai fait une erreur de rédaction à ce niveau :

createBoutons.prototype.assignEvent = function(params)
{
var objet = this ;
for(var 1 = 0; i < boutons.length; i++)

celle-ci n'est pas chez moi, je suis désolé en reproduisant une partie du script
j'ai fait une bêtise . En remplaçant le "var 1" par "var i" le code compile normalement.

...mais si ton code se limite plus ou moins à ce que tu nous montres, alors tu n'as peut-être pas besoin de jouer avec les objets et leurs prototypes...

Non non, il ne se limite pas qu'à ça, j'ai exposé seulement la partie qui me pose problème. La totalité de mon code crée un objet "diaporama" qui génère des boutons à la volée en fonction du nombre d'éléments à "slider"/glisser. Ces boutons contrôlent le diaporama, permettant à l'utilisateur de naviguer d'un élément à un autre.

De ce fait j'ai besoin d'appliquer une fonction à chaque bouton qui sera créé et d'attribuer un paramètre afin de pouvoir "slider" jusqu'à l'élément souhaité par l'internaute.

Cette solution me paraît-être la plus rapide à mettre en place, parce que je la comprend :

bouton.valeur = i;
bouton.onclick = function(){ objet.catchEvent(this.valeur) ; } ;

Sinon je ne connais pas cette façon de faire :

for(var 1 = 0; i < boutons.length; i++)
{
bouton = document.getElementById(boutons[i]) ;
bouton.data = {
object:this,
index:i,
fn: function() { this.objet.catchEvent(this.index); }
}
bouton.onclick = function(){ this.data.fn(); } ;
}

ça attise ma curiosité je vais de ce pas suivre tes liens Sekaijin.

Encore merci pour votre participation, je viens faire un retour une fois que j'ai fait le tour de toutes vos suggestions.

J'adore ce forum !!! Je fais une license concepteur/développeur et lors d'un cours un des profs à critiqué développez ké . Merci à vous.

Edit:

Un petit édit pour noSmoking, merci pour ta soluce je vais la prendre en considération également.

[Willpower]

En fait ce qui me semblait étrange dans ta solution, c'était de faire :
unBouton.onclick = tousMesBoutons.catchEvent();
Est-ce vraiment utile d'appliquer cela sur "tousMesBoutons" ?

[Willpower]

celle-ci n'est pas chez moi, je suis désolé en reproduisant une partie du script
j'ai fait une bêtise . En remplaçant le "var 1" par "var i" le code compile normalement.

Excuse-moi de te contredire mais non, mon navigateur a crié gare qqes fois quand j'ai voulu exécuter ton code. Notamment les variables "boutons" qui devraient être des "this.boutons". :-)

[xess91]

oui aussi tu as raison !

[Oscar Hiboux]

Les fonctions anonymes & fermetures (closures) à la rescousse...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
createBoutons.prototype.assignEvent = function()
{
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
     {
           bouton = document.getElementById(boutons[i])  ;
           (function(index) {
               bouton.onclick = function(){ objet.catchEvent(index) ; } ;
           })(i);
     }
}

Le bout de code supplémentaire définit une fonction, anonyme, à la volée et l'appel d'emblée avec pour argument la valeur courante de ton compteur "i". Toutes les variables du cadre (scope) courant restent accessibles et inchangées mais par cette astuce tu peux "immortaliser" la valeur de "i" pour les appels futurs à ta fonction de rappel (callback). Note : tu peux également utiliser "i" au lieu de "index", mais par souci de clarté j'ai préféré lui donner un autre nom.
C'est très similaire à ce que t'as déjà proposé NoSmoking, et dans le fond, si tu veux le nom de la technique convenant dans ton énoncé, il s'agit du currying. Cf. ce billet.

[sekaijin]

Les fonctions anonymes & fermetures (closures) à la rescousse...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
createBoutons.prototype.assignEvent = function()
{
     var objet = this ;
     for(var 1 = 0; i < boutons.length; i++)
     {
           bouton = document.getElementById(boutons[i])  ;
           (function(index) {
               bouton.onclick = function(){ objet.catchEvent(index) ; } ;
           })(i);
     }
}

Le bout de code supplémentaire définit une fonction, anonyme, à la volée et l'appel d'emblée avec pour argument la valeur courante de ton compteur "i". Toutes les variables du cadre (scope) courant restent accessibles et inchangées mais par cette astuce tu peux "immortaliser" la valeur de "i" pour les appels futurs à ta fonction de rappel (callback). Note : tu peux également utiliser "i" au lieu de "index", mais par souci de clarté j'ai préféré lui donner un autre nom.
C'est très similaire à ce que t'as déjà proposé NoSmoking, et dans le fond, si tu veux le nom de la technique convenant dans ton énoncé, il s'agit du currying. Cf. ce billet.

C'est l'approche que j'évoquais dans mon post sans la citer. en fait on peut la pousser jusque au bout et en faire un principe de programmation.

dès lors une bonne pratique est d'éviter d'utiliser les variables du scope courant même si cela reste possible et de ne passer à la closure que celle qu'on utilise.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
createBoutons.prototype.assignEvent = function()
{
  /*var objet = this ;*/
  for(var 1 = 0; i < boutons.length; i++)
  {
    (function(index, objet, btn) {
      var bouton = document.getElementById(btn)  ;
      bouton.onclick = function(){ objet.catchEvent(index) ; } ;
    })(i, this,  boutons[i]));
  }
}

ce n'est nullement une obligation
mais en agissant ainsi de façon systématique on écrit dans le code les variable que l'on veux voir à porté de la closure
cela évite la création de variable locale juste pour pour l'utiliser dans la closure ainsi la variable object n'a plus lieu d'être elle est un paramètre de la closure. dans mon code la closure comme l'a montré Oscar Hiboux peut directement utiliser la variable boutons (boutons[i]). utiliser un paramètre btn permet de voir que la closure n'utilisera que l'objet boutons[i] et non tout le tableau boutons
je vous ai mis des couleurs pour montrer les correspondances le corps de la closure n'utilise que les paramètres
index, objet, btn
et les valeur qui lui sont passé sont
i, this, boutons[i]

enfin on peut noter la présence de var devant bouton qui limite la porter de cette variable à la closure.

A+JYT

[Willpower]

http://www.developpez.net/forums/d10...t/#post5728710


:-)

[xess91]

Bonjour à tous,

je reviens comme convenu faire un retour, ou plutôt poster ma réalisation et surprise de nouvelles réponses viennent compléter les précédentes, alors déjà MERCI.

Je ne suis pas suffisamment technicien pour pouvoir déterminer parmi toutes vos propositions quelle est la meilleure. Du moins pour le moment puisque je vais étudier vos réponses .

Plutôt que de faire un long discours, je vous joins ce que j'ai fait :

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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> 
	<head>
		<meta name="TITLE" content="" />
		<meta name="DESCRIPTION" content="" />
		<meta name="KEYWORDS" content="" />
		<meta name="SUBJECT" content="" />
		<meta name="CATEGORY" content="" />
		<meta name="AUTHOR" content="" />
		<meta name="REPLY-TO" content="" />
		<meta name="REVISIT-AFTER" content="7 DAYS" />
		<meta name="LANGUAGE" content="FR" />
		<meta name="ROBOTS" content="All" />
		<meta http-equiv="PRAGMA" content="NO-CHACHE" />
		<title>
		SlideIn
		</title>
		<script type="text/javascript">
function slideIn()
	{
	//array des "id" des éléments à slider
	this.elements = null ;
	//élément à slider
	this.element = null ;
 
	//données du bloc qui contient les éléments à slider
	this.contenerId = null ;
	this.contenerEl = null ; 
	this.contenerW = null ;
 
	//données sur le bloc qui contient les boutons
	this.controlersBloc = null ;
	this.boutons = "" ;
	this.bouton = null ;
	this.boutonId = null ;
 
	this.timer = null ;
 
	//mémorise timePause lors d'une action de l'utilisateur
	this.pause = null ;
 
	//données de l'élément afficher dans le slide
	this.currentEl = 0 ;
	this.currentElement = null ;
	this.currentElementLeft = null ;
 
	//données de l'élément à venir
	this.nextEl = 1 ;
	this.nextElement = null ;
	this.nextElementLeft = null ;
 
	//élément demandé par l'utilisateur à afficher
	this.goToElement = this.nextEl ;
 
	//informations paramètrables lors de la création de l'objet pour modifier le temps de pause entre les slides, la vitesse et le pas d'incrémentation
	this.timePause = 3000 ;
	this.speed = 5 ;
	this.increment = 10 ;
 
	//information paramètrables lors de la création de l'objet pour modifier l'apparence des boutons créés
	this.police = "inherit" ;
	this.sizeFont = "10px" ;
 
	//bouton
	this.controlerBg = "#ffffff" ;
	this.controlerW = "20px" ;
	this.controlerH = "15px" ;
	this.controlerColor = "#000000" ;
 
	//bouton du slide en cours
	this.controlerOverBg = "#000000" ;
	this.controlerOverW = this.controlerW ;
	this.controlerOverH = this.controlerH ;
	this.controlerOverColor = "#ffffff" ;
	}
 
//configuration des éléments à slider, du contener et création des boutons 
slideIn.prototype.configuration = function()
	{
	//config du contener
	this.contenerEl = document.getElementById(this.contenerId) ;
	this.contenerW = this.contenerEl.offsetWidth ;
 
	this.contenerEl.style.position = "relative" ;
	this.contenerEl.style.overflow = "hidden" ;
	this.contenerEl.style.whiteSpace = "nowrap" ;
 
	//config du bloc boutons
	this.controlersBloc = "<div id='controlersSlideIn'></div>" ;
	this.contenerEl.innerHTML = this.contenerEl.innerHTML + this.controlersBloc ;
 
	this.controlersBloc = document.getElementById("controlersSlideIn") ;
	this.controlersBloc.style.position = "absolute" ;
	this.controlersBloc.style.right = 0+"px" ;
	this.controlersBloc.style.bottom = 0+"px" ;
        this.controlersBloc.style.height = this.controlerH ;
	this.controlersBloc.style.width = (parseInt(this.controlerW) * (this.elements.length - 1)) + parseInt(this.controlerOverW)+"px";
	this.controlersBloc.style.zIndex = 2 ;
 
	//positionnement du premier élément à slider
	document.getElementById(this.elements[0]).style.left = 0+"px" ;
	document.getElementById(this.elements[0]).style.position = "absolute" ;
	document.getElementById(this.elements[0]).style.top = 0+"px" ;
	document.getElementById(this.elements[0]).style.zIndex = 1 ;
 
	//création du bouton correspondant au premier élément
	this.boutons += "<span id='c-"+this.elements[0]+"'></span>" ;
 
	//positionnement des autres éléments à slider et création de leur bouton
	for(var i = 1; i < this.elements.length; i++)
		{
		this.element = document.getElementById(this.elements[i]);
 
		this.element.style.position = "absolute" ;
		this.element.style.top = 0+"px" ;
		this.element.style.zIndex = 1 ;
		this.element.style.left = this.contenerW+"px" ;
 
		this.boutons += "<span id='c-"+this.elements[i]+"'></span>" ;
		}
 
	//insertion des boutons
	this.controlersBloc.innerHTML = this.boutons ;
 
	//configuration CSS des boutons
	this.configBoutons() ;
	//attribution des fonctions aux boutons
	this.setCallback() ;
 
	return true ;
	} ;
 
//configuration CSS des boutons
slideIn.prototype.configBoutons = function()
	{
	var objet = this ;
	for(var i = 0; i < this.elements.length; i++)
		{
		this.boutonId = "c-"+this.elements[i] ;
 
		this.bouton = document.getElementById(this.boutonId);
		this.bouton.innerHTML = i + 1 ;
 
		this.bouton.style.position = "relative" ;
 
		if(navigator.appName != 'Microsoft Internet Explorer') this.bouton.style.display = "-moz-inline-block" ; 
 
		this.bouton.style.display = "inline-block" ;
		this.bouton.style.fontWeight = "bold" ;
		this.bouton.style.fontFamily = this.police ;
		this.bouton.style.fontSize = this.sizeFont ;
		this.bouton.style.textAlign = "center" ;		
		this.bouton.style.cursor = "pointer" ;		
		this.bouton.style.width =  this.controlerW ;
		this.bouton.style.height =  this.controlerH ;
		this.bouton.style.background = this.controlerBg ;
		this.bouton.style.color = this.controlerColor ;
 
		//si i vaut l'élément en cours
		if(i == this.currentEl)
			{
			this.bouton.style.width =  this.controlerOverW ;
			this.bouton.style.height =  this.controlerOverH ;
			this.bouton.style.background = this.controlerOverBg ;
			this.bouton.style.color = this.controlerOverColor ;
			}
		}
	} ;
 
//attribution de fonctions aux boutons
slideIn.prototype.setCallback = function()
	{
	var objet = this ;
	for(var i = 0; i < this.elements.length; i++)
		{
		this.boutonId = "c-"+this.elements[i] ;
 
		this.bouton = document.getElementById(this.boutonId);
 
		this.bouton.data = {
		object:this, 
		index:i,
		fn: function() { objet.goTo(this.index); }
		}
 
		this.bouton.onclick = function(){ this.data.fn(); } ;
		}
	} ;
 
//suppression de fonctions aux boutons
slideIn.prototype.resetCallback = function()
	{
	for(var i = 0; i < this.elements.length; i++)
		{
		this.boutonId = "c-"+this.elements[i] ;
 
		this.bouton = document.getElementById(this.boutonId);	
		this.bouton.onclick = function(){ } ;
		}
	} ;
 
 
//fonction appelé par l'utilisateur
slideIn.prototype.goTo = function(i)
	{
	this.goToElement = i ;
	//supprime les fonctions pour empeicher l'utilisateur d'exécuter deux actions simultannées 
	this.resetCallback() ;
	this.play() ;
	} ;
 
//lance le slide au chargement
slideIn.prototype.start = function()
	{
	var objet = this ;
	this.timer = setTimeout(function(){objet.play()}, this.timePause) ;
	} ;
 
//positionne l'élément à venir	
slideIn.prototype.play = function()
	{
	clearTimeout(this.timer) ;
	this.timer = null ;
 
	this.resetCallback() ;
 
	this.nextElement = document.getElementById(this.elements[this.nextEl]) ;
 
	this.nextElement.style.left = this.contenerW+"px" ;
 
	this.playGo();
	} ;
 
//slide des l'éléments en cours et à venir
slideIn.prototype.playGo = function()
	{
	clearTimeout(this.timer) ;
	this.timer = null ;
 
	var objet = this ;
 
	this.currentElement =  document.getElementById(this.elements[this.currentEl]) ;
	this.nextElement = document.getElementById(this.elements[this.nextEl]) ;
 
	this.currentElementLeft = parseInt(this.currentElement.style.left) ;
	this.nextElementLeft = parseInt(this.nextElement.style.left) ;
 
	if(this.nextElementLeft == 0)
		{
		this.currentEl = this.nextEl ;
		this.configBoutons() ;
 
		if(this.currentEl == (this.elements.length - 1)) this.nextEl = 0 ; 
		else this.nextEl += 1 ; 
 
		if(this.currentEl != this.goToElement) this.pause = 0; 
		else { this.pause = this.timePause ; this.goToElement = this.nextEl ; this.setCallback() ; }
 
		this.timer = setTimeout(function(){objet.play()}, this.pause) ;
		}
	else
		{
		if((this.nextElementLeft - this.increment) <= 0)
			{
			this.currentElement.style.left = this.currentElementLeft - this.increment+"px" ;
			this.nextElement.style.left = 0+"px" ;
			}
		else
			{
			this.currentElement.style.left = this.currentElementLeft - this.increment+"px" ;
			this.nextElement.style.left = this.nextElementLeft - this.increment+"px" ;
			}
 
		this.timer = setTimeout(function(){objet.playGo()}, this.speed) ;
		}
	} ;
		</script>
	</head>
<body>
<div id="contener" style="width:500px;height:200px;">
	<div id="el1" style="width:100%;height:100%;background:purple;">
	1
	</div>
	<div id="el2" style="width:100%;height:100%;background:orange;">
	2
	</div>
	<div id="el3" style="width:100%;height:100%;background:pink;">
	3
	</div>
</div>
<script type="text/javascript">
var slide = new slideIn() ;
slide.elements = Array('el1', 'el2', 'el3');
slide.contenerId = "contener" ;
 
if(slide.configuration())
	{
	slide.start() ;
	}
</script>
</body>
</html>

Fonctionne sur IE >= 7 (pas testé sur 6), Mozilla, Chrome, Safari, Opera...

[xess91]

Qu'en pensez-vous ? Votre avis m'intéresse !