Merci encore à Sébastien.

Après un petit test, voici une solution qui fonctionne plutôt pas mal pour le fondu :

Démo : http://delistage.net/tutos/tab-panel-simple-mootools/fondu.html

panels.js, ajouter après la ligne 20 :
contentDiv.addClass('panel-display'); // La ligne 20 pour le repère
contentDiv.setStyle('opacity', 0);
contentDiv.fade('in');

En espérant que ça puisse aider,

Sébastien

Tout d’abord merci à Sebastien pour ce script.

Une petite question.
Comment ajouter un léger effet pour une transition en fondu ?

Merci de vos réponses

Si des personnes ne comprennent pas que c’est cliquable, il faut peut-être faire les onglets un petit peu plus gros.

Autrement sans avoir le temps de creuser plus (beaucoup de boulot), quand tu cliques sur un de ces liens, il faut qu’il déselectionne tous les onglets avec quelque chose comme (à adapter) :

// On déselectionne tous les onglets
panelElt.getFirst('ul').getElements('li').removeClass('panel-active');

Ensuite, il faut sélectionner l’onglet voulu comme par exemple :

this.getParent().addClass('panel-active');

Ou alors vu ton code :

$('link1').addClass('panel-active');

En espérant que ça puisse te mettre sur la voie.

Sébastien

Je viens d’y jeter un oeil et c’est plutôt pas mal comme effet. Je me suis permis de regarder ton code et il y a moyen de l’améliorer un peu.
- Plutôt que de faire :
window.addEvent('domready', function() {
panelManager();
});
window.addEvent('domready', function(){
var scroll = new Fx.Scroll('wrapper', {
[...]

Tu peux tout faire dans la première fonction :

window.addEvent('domready', function() {
panelManager();

var scroll = new Fx.Scroll('wrapper', {
[...]

Ca te fait gagner 2 lignes mais surtout diminue le nombre d’appels de fonction, ce qui fait au final gagner un peu de temps.

De la même manière, tu as ça :

event = new Event(event).stop();

« event » est déjà une instance de la classe Event, donc tu n’as pas besoin de l’instancier de nouveau. Teste voir ceci qui devrait normalement fonctionner de la même manière :

event.stop();

Et merci, je viens de voir une petite erreur dans mon code que je viens de corriger : la fonction panelManager() attend un paramètre mais je m’en sers pas par la suite.

Déjà attention aux versions. J’ai utilisé la version 1.2 pour tester ce script. Le lien que tu as donné présente les démos de la version 1.1. Etant donné que j’ai pas testé avec cette version, je peux pas te dire s’il fonctionne correctement ou pas avec (mais bon y’a pas de raison).

Ensuite tu veux simplement rajouter des effets de transition lors de chaque clic si j’ai bien compris. J’avoue que je ne me suis pas du tout penché sur le sujet quand je l’ai écrit. Par contre, je peux te conseiller ces quelques liens qui ressemblent à ce que j’ai cru comprendre que tu voulais réaliser :
- http://www.silverscripting.com/mootabs/ : pour une transition sur l’axe vertical,
- http://woork.blogspot.com/2009/01/ultra-versatile-slider-for-websites.html : pour une transition sur l’axe horizontal (à adapter par contre pour ajouter les onglets).

J’espère que ça pourra t’aider. ;)

Par exemple la version par CSS que tu proposes ne présente pas le même comportement : les panels passent au dessus du texte, même si je suis sûr que ça doit être modifiable.

Par contre la version JS, ça serait dommage pour moi d’utiliser une librairie JS (en l’occurence Mootools dans mon cas) un peu partout sur le site et de pondre un code 100% JS natif/pur/sans librairie pour les panels. C’est facilement faisable, mais autant faire quelque chose d’un minimum cohérent pour faciliter les mises à jours en cas de besoin et utiliser les fonctionnalités proposées par le framework (comme la fonction Element.each() qui fait gagner pas mal de temps). Sans compter également que mon code fait un peu plus de 15 lignes sans commentaires, là où la solution que t’as linké en fait près du double. ;)

Et puis si un jour j’ai envie de rajouter un peu d’animation, c’est juste quelques petites lignes supplémentaires à rajouter. :)