Objet et prototype.. un peu perdu !
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:
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:
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 :aie: .. 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 !
