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>