Je construis (ou du moins j'essaie !) un site avec le CMS Joomla, et j'ai ajouté sur ce site le module Yoodrawer, visible ici :http://tools.yootheme.com/yootools/exte ... rawer.html
Comme vous pouvez le voir sur la démo en default style, quand on ouvre un item en passant dessus avec la souris, l'item reste ouvert une fois qu'on dirige la souris ailleurs.
J'aimerais énormément pouvoir trouver la modif à faire pour que l'item que l'on a ouvert en passant dessus se referme automatiquement une fois que le pointeur de la souris s'en va, et que le module revienne donc avec le premier item visible.
J'ai trouvé un fichier .js au sein de ce module, mais là je coince. J'ai vu qu'il y avait une fonction de transition mootools et une fonction mouseenter. Après avoir regardé un peu partout, j'en conclus qu'il faudrait que je rajoute la fonction "mouseleave" pour que les items se referment après le départ de la souris, mais je ne sais pas du tout comment faire.
Je m'y connais un peu en css mais en javascript ...
Voici le code .js :
Code: Select all
var YOOdrawer = new Class({
initialize: function(wrapper, items, options) {
this.setOptions({
layout: 'vertical',
itemstyle: 'top',
shiftSize: 50,
transition: Fx.Transitions.Expo.easeOut
}, options);
this.wrapper = $(wrapper);
this.items = $$(items);
this.fx = new Fx.Elements(this.items, {wait: false, duration: 600, transition: this.options.transition });
if (this.options.layout != 'vertical') this.options.itemstyle = 'left';
var pos = {};
this.items.each(function(item, i) {
pos[i] = item.getStyle(this.options.itemstyle).toInt();
item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]));
}, this);
},
itemFx: function(pos, item, i) {
var o = {};
item.addClass('active');
this.items.each(function(other, j) {
var s = other.getStyle(this.options.itemstyle).toInt();
if (j >= i) {
if (s != pos[j]) o[j] = this.itemStyle(s, pos[j]);
} else {
if (s != pos[j] - this.options.shiftSize) o[j] = this.itemStyle(s, pos[j] - this.options.shiftSize);
}
if (j != i) {
other.removeClass('active');
}
}, this);
this.fx.start(o);
},
itemStyle: function(startVal, endVal) {
if (this.options.layout == 'vertical') { return {top: [startVal, endVal]}; } else { return {left: [startVal, endVal]}; }
}
});
YOOdrawer.implement(new Options);
Code: Select all
item.addEvent('mouseleave', mais là je ne sais pas quoi mettre !);
Code: Select all
item.addEvent('mouseenter', this.itemFx.bind(this, [pos, item, i]));
Est-ce que ça inspire quelqu'un ?