Discussion :

[Goundy]

Bonjour

j'essaye deséspéremment de développer un slideshow en jquery... J'ai un problème avec l'orienté objet que j'ai du mal à cerner 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
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
 
 
$(document).ready(function(){
  $(".slideshow").SlideShowManager();
});
 
jQuery.fn.SlideShowManager = function() {
  return this.each(function(){
    var slideshow = new SlideShow(this);
    $.extend(this, slideshow);
  });
};
 
 
function SlideShow(base){
 
  this.currentPosition = 0;
  this.slideWidth = 560;
  this.slides = $('.slide', base);
  this.numberOfSlides = this.slides.length;
 
  this.slides.wrapAll('<div class="slideInner"></div>').css({'float':'left','width':this.slideWidth});
 
  $('.slidesContainer',base).css('overflow', 'hidden');
  $('.slideInner',base).css ('width', this.slideWidth * this.numberOfSlides);
  $(base)
	.prepend('<span class="leftControl">Move left</span>')
	.append('<span  class="rightControl">Move right</span>');
 
  $('.leftControl',base).bind('click', this.onLeftControlClick);
  $('.rightControl',base).bind('click', this.onRightControlClick);
 
  this.manageControls();
}
 
SlideShow.prototype.manageControls = function(){
  if (this.currentPosition == 0){
    $('.leftControl', this).hide();
  }
  else
  {
    $('.leftControl', this).show();
  }
 
  if (this.currentPosition == (this.numberOfSlides - 1)){
    $('.rightControl', this).hide();
  }
  else
  {
    $('.rightControl', this).show();
  }
}
 
SlideShow.prototype.animate = function(){
  alert('Anime');
  $('.slideInner', this).animate({ 'marginLeft' : this.slideWidth * (-this.currentPosition)});
}
 
SlideShow.prototype.onLeftControlClick = function(){
  alert('Hit left');
  this.currentPosition++;
  this.manageControls();
  this.animate();
}
 
SlideShow.prototype.onRightControlClick = function(){
  alert('Hit Right');
  this.currentPosition--;
  this.manageControls();
  this.animate();
}

En effet, lorsque onRightControlClick() est exécutée, j'ai l'alert "hit right" pis après firebug me dit:

this.manageControls is not a function
file:///home/goundy/WebDev/JS_Training/slide/slideshow.js
Line 68

Ca me fait pareil lorsque je clique sur le left donc, comment se fait-il qu'il me dise cela ?
Pourtant j'ai crée un objet à part et j'arrive à appeler des méthodes dans des méthodes,

voici la structure du html au cas ou ca pourrait aider:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
  <div class="slideshow">
    <div class="slidesContainer">
      <div class="slide">
              textes + images... etc
      </div>
      <div class="slide">
              textes + images... etc
      </div>
      <div class="slide">
              textes + images... etc
      </div>
    </div>
  </div>

Merci d'avance

[Sourrisseau]

dans tes fonctions onLeftControlClick et Right tu fais référence a this qui est en fait un objet de type SlideShow. Quand tu cliques sur un bouton ( gauche droite ) tu as bien mémoriser une fonction mais c'est un objet jquery qui l'appelle . D'ailleurs - this.currentPosition- n'existe pas non plus. Pour connaitre les propriétés de this tu peux faire un debug du type :

Code :

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

1
2
3
4
5
6
7
 
SlideShow.prototype.onLeftControlClick = function(){
  for( k in this)   console.log(k);
  this.currentPosition++;
  this.manageControls();
  this.animate();
}

C'est une difficulté bien connu de javascript. Comprendre un espace de nommage et les closures sont des notions importantes en javascript pour faire le genre de manip que tu veux faire.

Pour la solution a ton problème , il faudrait que j'ai un peu de temps et je ne te garantie rien avant 2 jours. Sinon tu as un tutto super clair sur la manière la plus simple de faire des plugins en jquery.

[Goundy]

Salut,

Merci pour ta réponse Sourrisseau
Cependant, j'ai du mal à comprendr epourquoi mon code ne marche pas, car j'ai testé, à part, avec un objet:

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
 
function Base(value){
  if (typeof Base.Counter == 'undefined') Base.Counter = 1;
  else Base.Counter++;
  this.value = value;
}
 
Base.prototype.getValue = function (){
  this.twitt();
  return this.value;
}
 
Base.prototype.setValue = function (newVal){
  this.value = newVal;
}
 
Base.prototype.twitt = function (){
  alert(this.value);
}

Je l'utilise par exemple:

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
 
  <script type="text/javascript">
 
    var b = new Base (10);
    document.write(Base.Counter + "<br/>");
    b.getValue();
    var b2 = new Base (3);
    document.write(Base.Counter + "<br/>");
    var b3 = new Base (3);
    var b4 = new Base (8);
    var b65 = new Base (329);
    document.write(Base.Counter + "<br/>");
    b2.getValue();
 
    b.twitt();
  </script>

Et ca fonctionne à merveille, les variables ET les fonctions sont bien existantes.... etc
J'ai lu 3 tutos sur les plugins mais bon je vois pas exactement le point auquel tu fais références, je vais tout de même revisiter le lien que tu m'as passé

Merci

EDIT:

J'ai déjà lu ce tutorial en fait, et ils font pas du tout ce que je veux voir, je dis ca dans le sens ou moi lorsque je récupère mes composants avec: $('.slideshow').manage() je prend chaque composant (div) et je lis ses children pour y faire des trucs également.
Tout ce que fait le tuto c'est appliquer un style CSS à tous div qu'il récupère, il ne va pas chercher les children... Coincé :p

[danielhagnoul]

Bonsoir.

Je n'ai pas la totalité du code, impossible donc de tester mes modifications :

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
<script type="text/javascript">
    (function($){
        function SlideShow(base){
            this.currentPosition = 0;
            this.slideWidth = 560;
            this.slides = $('.slide', base);
            this.numberOfSlides = this.slides.length;
 
            // attention jQuery peut modifier this
            var self = this;
 
            // j'ai réécrit ce passage pour le plaisir,
            // mais sous cette forme il demande jQuery 1.4 !!
            this.slides.wrapAll(
                $("<div/>", {
                    class: "slideInner",
                    css: {
                        float:"left",
                        width:self.slideWidth
                    }
                };
            );
 
            $('.slidesContainer',base).css('overflow', 'hidden');
            $('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);
 
            $(base)
            .prepend('<span class="leftControl">Move left</span>')
            .append('<span  class="rightControl">Move right</span>');
 
            $('.leftControl', base).bind('click', self.onLeftControlClick);
            $('.rightControl', base).bind('click', self.onRightControlClick);
 
            this.manageControls();
        }
 
        SlideShow.prototype.manageControls = function(){
            if (this.currentPosition == 0){
                $('.leftControl', this).hide();
            }
            else
            {
                $('.leftControl', this).show();
            }
 
            if (this.currentPosition == (this.numberOfSlides - 1)){
                $('.rightControl', this).hide();
            }
            else
            {
                $('.rightControl', this).show();
            }
        }
 
        SlideShow.prototype.animate = function(){
 
            // attention jQuery peut modifier this
            var self = this;
 
            alert('Anime');
            $('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
        }
 
        SlideShow.prototype.onLeftControlClick = function(){
            alert('Hit left');
            this.currentPosition++;
            this.manageControls();
            this.animate();
        }
 
        SlideShow.prototype.onRightControlClick = function(){
            alert('Hit Right');
            this.currentPosition--;
            this.manageControls();
            this.animate();
        }
 
        $.fn.SlideShowManager = function() {
          return this.each(function(){
            $.extend(this, new SlideShow(this));
          });
        };
    })(jQuery);
 
    $(function(){
        $(".slideshow").SlideShowManager();
    });
</script>

[Goundy]

danielhagnoul merci pour ta réponse

J'ai appliqué les modifications mais ca ne marche toujours pas.
En fait le problème est que lorsque managecontrols est appelée via le constructeur (this.manageControls()) elle est bien exécutée... Plus tard, lorsque l'utilisateur clique sur un bouton, l'évenement OnClick donc est exécuté et dedans je refais: this.manageControls et c'est là qu'il me dit: this.manageControls n'est pas une fonction
Donc pourquoi elle n'est plus reconnue ?

Merci encore

[danielhagnoul]

Bonsoir.

J'ai oublié des ;

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
<script>
	(function($){
		function SlideShow(base){
			this.currentPosition = 0;
			this.slideWidth = 560;
			this.slides = $('.slide', base);
			this.numberOfSlides = this.slides.length;
 
			// attention jQuery peut modifier this
			var self = this;
 
			// j'ai réécrit ce passage pour le plaisir,
			// mais sous cette forme il demande jQuery 1.4 !!
			this.slides.wrapAll(
				$("<div/>", {
					class: "slideInner",
					css: {
						float:"left",
						width:self.slideWidth
					}
				};
			);
 
			$('.slidesContainer',base).css('overflow', 'hidden');
			$('.slideInner',base).css('width', self.slideWidth * self.numberOfSlides);
 
			$(base)
			.prepend('<span class="leftControl">Move left</span>')
			.append('<span  class="rightControl">Move right</span>');
 
			$('.leftControl', base).bind('click', self.onLeftControlClick);
			$('.rightControl', base).bind('click', self.onRightControlClick);
 
			this.manageControls();
		}
 
		SlideShow.prototype.manageControls = function(){
			if (this.currentPosition == 0){
				$('.leftControl', this).hide();
			}
			else
			{
				$('.leftControl', this).show();
			}
 
			if (this.currentPosition == (this.numberOfSlides - 1)){
				$('.rightControl', this).hide();
			}
			else
			{
				$('.rightControl', this).show();
			}
		};
 
		SlideShow.prototype.animate = function(){
 
			// attention jQuery peut modifier this
			var self = this;
 
			alert('Anime');
			$('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
		};
 
		SlideShow.prototype.onLeftControlClick = function(){
			alert('Hit left');
			this.currentPosition++;
			this.manageControls();
			this.animate();
		};
 
		SlideShow.prototype.onRightControlClick = function(){
			alert('Hit Right');
			this.currentPosition--;
			this.manageControls();
			this.animate();
		};
 
		$.fn.SlideShowManager = function() {
		  return this.each(function(){
			$.extend(this, new SlideShow(this));
		  });
		};
	})(jQuery);
 
	$(function(){
		$(".slideshow").SlideShowManager();
	});
</script>

[danielhagnoul]

J'ai compris !

Vous avez absolument besoin de jQuery 1.4, car vous devez utilisez la nouvelle fonction $.proxy().

$.proxy() est particulièrement utile pour lier un gestionnaire d'événement à un élément dont le contexte est dirigé vers un objet différent.

$.proxy() retourne une nouvelle fonction qui aura toujours un contexte particulier.

$.proxy(fonction, contexte)

fonction dont le contexte sera changé.
contexte pour lequel le champ d'application de la fonction doit être défini.

Pour arriver à ce résultat, j'ai utilisé le code de test suivant :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#FFFFFF;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
	</style>
	<script charset="utf-8" src="../lib/jquery-1.4.min.js"></script>
<script>
	(function($){
		function SlideShow(base){
			console.log("SlideShow this : " + this);
			console.log("SlideShow base : " + base);
 
			var self = this;
 
			$('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
			$('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));
 
			this.manageControls();
		}
 
		SlideShow.prototype.manageControls = function(){
			alert("manageControls OK");
		};
 
		SlideShow.prototype.animate = function(){
			alert("animate OK");
		};
 
		SlideShow.prototype.onLeftControlClick = function(){
			console.log("onLeftControlClick this : " + this);
 
			this.manageControls();
			this.animate();
		};
 
		SlideShow.prototype.onRightControlClick = function(){
			console.log("onRightControlClick this : " + this);
 
			this.manageControls();
			this.animate();
		};
 
		$.fn.SlideShowManager = function() {
		  return this.each(function(){
			console.log(this);
 
			$.extend(this, new SlideShow(this));
 
			console.log(this);
		  });
		};
	})(jQuery);
 
	$(function(){
		$("#affiche").SlideShowManager();
	});
</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche">
			<button class="leftControl">left</button>
			<button class="rightControl">right</button>			
		</div>
	</div>
</body>
</html>

Par rapport au code de mon message précédent, il faut donc modifier les deux lignes suivantes :

Code :

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

1
2
$('.leftControl', base).bind('click', $.proxy(self.onLeftControlClick, self));
$('.rightControl', base).bind('click', $.proxy(self.onRightControlClick, self));

[Sourrisseau]

ce travail de recherche et ce résultat . Je n'ai pas eut le temps encore d'étudier cette fonction proxy() mais visiblement cela ouvre de très belles perspectives. Jquery 1.4 propose quelques très belles innovations . Merci encore danielhagnoul !!!

[Goundy]

danielhagnoul je ne sais comment vous remercier ! Vous êtes un monstre (dans le bon sens du terme éventuellement )

Cependant, j'ai un dérnier tout petit problème. C'est avec animate:
A la base j'avais ceci:

Code :

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

1
2
3
4
 
$('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });

Donc slideInner fût un id et non une classe, et ca fonctionnait parfaitement.

Maintenant j'ai:

Code :

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

1
2
3
4
5
6
 
        SlideShow.prototype.animate = function(){
            var self = this;
 
            $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
        }

Et là il n'y a plus d'animation bizarrement... pourtant self.slideWidth et self.currentPosition ont les bonnes valeurs (j'ai debogué).

Une dernière idée quant à l'animation ? Car pour l'instant tout marche sauf que ca ne change pas de solide étant donné que l'animation ne passe plus

Merci encore pour tout


EDIT:
le code d'animate:

Code :

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

1
2
3
4
5
 
        SlideShow.prototype.animate = function(){
            var self = this;
            $('.slideInner', self).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
        }

J'ai debug un peu et je me suis rendu compte que même si je change le css plutôt qu'animer:

Code :

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

1
2
3
	    $('.slideInner', self).css({
		    'marginLeft' : self.slideWidth*(-self.currentPosition)
		  });

Rien n'est modifié, j'utilise Firebug et je vois que sur le script d'avant (avec les ids) ca se modifiait, mais dans mon code non... Pourtant je récupère le bon élément et tout.... Bizarre

EDIT:

J'ai résolu le problème en stoquant le inner:

Code :

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

this.inner = $('.slideInner',base);

et donc j'annime directement celui ci

Code :

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

self.inner.animate()

ca veut donc dire que dans la fonction animate() l'instruction $('.slideInner', self) ne rend pas le bon élément
Une idée pour rester propre ?

[danielhagnoul]

Bonsoir.

J'ai repris le code que vous avez donné au départ :

Code :

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

1
2
3
4
5
6
7
8
SlideShow.prototype.animate = function(){
 
    // attention jQuery peut modifier this
    var self = this;
 
    alert('Anime');
    $('.slideInner', this).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
};

Mais l'élément HTML de classe .slideInner ne peut pas être dans this qui représente l'objet SlideShow. Il est sans doute incorporé dans base ?

Si c'est le cas :

Code :

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

1
2
3
4
5
 
function SlideShow(base){
   this.base = base;
   ...
}

et alors :

Code :

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

1
2
3
4
5
6
7
8
SlideShow.prototype.animate = function(){
 
    // attention jQuery peut modifier this
    var self = this;
 
    alert('Anime');
    $('.slideInner', this.base).animate({ 'marginLeft' : self.slideWidth * (-self.currentPosition)});
};

[Goundy]

Oh danielhagnoul ....
Même si je fais un extend ? cf.:

Code :

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

1
2
3
4
5
jQuery.fn.SlideShowManager = function() {
    return this.each(function(){
	$.extend(this, new SlideShow(this));
  });
};

Je pensais que ca permettait de "merger" les objets ensemble.... Donc c'est ca ma bétise :p

Merci !

[danielhagnoul]

Je dois dire que je n'ai jamais eu à utiliser $.entend et que je n'ai pas compris ce que vous vouliez faire en l'utilisant.

Documentation : http://api.jquery.com/jQuery.extend/

Si on écrit :

Code :

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

1
2
3
4
5
6
7
8
 
$.fn.SlideShowManager = function() {
   return this.each(function(i, item){
       var obj = $.extend({}, this, new SlideShow(item));
 
       console.log("plugin obj = " + obj);
   });
};

alors, on voit que obj contient tout, mais ce n'est d'aucune utilité dans SlideShow.

[Goundy]

Merci beaucoup !
Problème donc résolu