Discussion :

[zevince]

Bonjour,

J'essaye d'adapter un script pour faire une animation d'ouverture de menu. Dans le script original, il n'y a qu'un seul menu dans la page, la il y en aura plusieurs.
J'en profite pour essayer de comprendre un peu mieux la structure objet, les prototypes, et faire cela de façon "propre"..

le code html est une série de div avec une class rm-container.

Pour le moment, mon objet ressemble à ca :

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
function Menu(container) {
 
	//console.log(container);
	this.container = container;
	//console.log(this.container);
	this.cover = this.container.find( 'div.rm-cover' );
	this.middle = this.container.find( 'div.rm-middle' );
	this.right = this.container.find( 'div.rm-right' ); 
	this.open  = this.cover.find('a.rm-button-open'); 
	this.close  = this.right.find('span.rm-close');
	this.details  = this.container.find( 'a.rm-viewdetails' );
 
    if( typeof Menu.initialized == "undefined" ) {
 
        Menu.prototype.init = function() {
			that = this;
			this.open.on( 'click', function( event ) {
				that.openMenu();
				return false;
			});
			this.close.on( 'click', function( event ) {
				that.closeMenu();
				return false;
			});
			this.details.on( 'click', function( event ) {
				this.container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
				that.viewDetails( $( this ) );
				return false;
			});
        };
 
		Menu.prototype.openMenu = function() {
			console.log(this.container);
			this.container.addClass( 'rm-open' );
		};
 
		Menu.prototype.closeMenu = function() {
			this.container.removeClass( 'rm-open rm-nodelay rm-in' );
		};
 
		Menu.prototype.viewDetails = function(recipe) {
			var title = recipe.text(),
				img = recipe.data( 'thumb' ),
				description = recipe.parent().next().text(),
				url = recipe.attr( 'href' );
			var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
			$modal.appendTo( this.container );
			var h = $modal.outerHeight( true );
			$modal.css( 'margin-top', -h / 2 );
			setTimeout( function() {
				this.container.addClass( 'rm-in rm-nodelay' );
				$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
					this.container.removeClass( 'rm-in' );
				});
			}, 0);
		};
 
        Menu.initialized = true; 
    }
}

je les appelle comme ceci :

Code :

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

1
2
3
4
5
6
7
$(function() {
	var Menus = [];
	$(".rm-container").each(function(i) {
		Menus[i] = new Menu($(this));
		Menus[i].init();
	});
});

ça fonctionne a peu près.. à un détail gênant près .. quelque soit le lien d'ouverture que je clique, c'est toujours le dernier menu de la page qui est ouvert.. et non pas celui sur lequel on a cliqué.. je clique sur le lien "voir le menu" sur le 1er ou 2e, et c'est le 3e qui s'ouvre..

je suppose que c'est un problème de perte de référence, écrasée par la nouvelle valeur, et je dois mal utiliser / comprendre l'emploi du prototype..

Mais je suis un peu perdu.. un peu d'aide ? Merci d'avance !

[zevince]

Bon.. je suis vraiment pas un pro en js, donc je capte pas vraiment tout du pourquoi et du comment.. mais comme ca, ca marche :

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
var Menu = { 
    init: function(container) {
		cover = container.find( 'div.rm-cover' ),
		middle = container.find( 'div.rm-middle' ),
		right = container.find( 'div.rm-right' ),
		open = cover.find('a.rm-button-open'),
		close = right.find('span.rm-close'),
		details = container.find( 'a.rm-viewdetails' ),
		that = this;
		open.on( 'click', function( event ) {
			that.openMenu(container);
			return false;
		});
		close.on( 'click', function( event ) {
			that.closeMenu(container);
			return false;
		});
		details.on( 'click', function( event ) {
			container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
			that.viewDetails( $( this ) );
			return false;
		});
    },
	openMenu: function(container) {
		container.addClass( 'rm-open' );
	},
	closeMenu: function(container) {
		container.removeClass( 'rm-open rm-nodelay rm-in' );
	},
	viewDetails: function(recipe) {
		var title = recipe.text(),
			img = recipe.data( 'thumb' ),
			description = recipe.parent().next().text(),
			url = recipe.attr( 'href' );
		var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
		$modal.appendTo( this.container );
		var h = $modal.outerHeight( true );
		$modal.css( 'margin-top', -h / 2 );
		setTimeout( function() {
			this.container.addClass( 'rm-in rm-nodelay' );
			$modal.find( 'span.rm-close-modal' ).on( 'click', function() {
				this.container.removeClass( 'rm-in' );
			});
		}, 0);
	},
}

Code :

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

1
2
3
4
5
6
7
8
9
$(function() {
	var Menus = [];
	$(".rm-container").each(function(i) {
		//$(this).css('display', 'none');
		Menus[i] = Menu;
		Menus[i].init($(this));
	});
	console.log(Menus);
});

J'aimerais quand meme bien avoir plus d'infos sur ces comportements.. j'ai parcouru un peu les docs javascript mais ca reste un peu confus

[meeuuaahh]

En ayant jeté un rapide coup d'oeil a ton code je dirais que la surcharge n'est pas au bon endroit. Tu crees d'abord l'object ensuite tu "prototypes". Ton proto est inclus dans ton objet.
D'ou les effets de bord