Les meilleurs développeurs Full Stack freelances sont sur Codeur.com

Ajax Ouvrir Fermer DIV Mootools1.2

 Terminé·30 à 300 €·3 offres·815 vues


Voir les travaux en cours et le fonctionnement actuel :
[URL visible pour les membres Pro],annuaire.html

Le besoin est simple, je dispose d'un code JS Mootools 1.2 qui me permet d'ouvrir, Fermer des panneaux DIV avec la méthode Fx.Slide.
Je souhaite étendre la fonctionnalité de base et obtenir les comportements suivants :

Etat par défaut au chargement (Ouvert / Fermé)

Modifification de la classe lors du changement d'état (pour appliquer des styles CSS spécifiques)

Possibilité de définir un calque en mode SOLO, ou MULTI (ACCORDEON).

La config du fonctionnement doit se faire en définissant les classes des éléménts DIV.

Besoin Immédiat.

DETAILS DU BESOIN :
___________________

Ouvrir, Fermer des panneaux DIV en utilisant Mootools 1.2 et la méthode Fx.Slide

Code JS Actuel :

$$( '.Panel_Wrapper' ).each(function(item) {
var thisSlider = new Fx.Slide( item.getElement( '.Panel' ), {
duration: 300
});
item.getElement( '.Panel_Toggle' ).addEvent( 'click', function(){
thisSlider.toggle();
});
});

Le code HTML Actuel :

<div class="Panel_Wrapper">
<div class="Panel_Toggle"><a>Ouvrir / Fermer</a><h3></h3></div>
<div class="Panel">
</div>
</div>

Avec le code ci-dessous, les Panneaux sont ouverts par défaut, et le clic sur le calque Panel_Toggle lance un Toggle sur le Calque.

Mon besoin : pouvoir définir via des classes CSS « open et closed » l’état de départ de chaque DIV, sans changer le code JS pour chaque DIV.

Lorsque d’un calque change d’état, modifier dynamiquement le nom de la classe, afin d’en gérer les styles CSS.

Exemple d’Usage :

Le DIV de la carte a la classe <div class="Panel open">
Le DIV du listing a la classe <div class="Panel closed">

Une source à voir : [URL visible pour les membres Pro]

Lorsque le panneau « Liste des liens directs » est ouvert, le div carte est réduit et prend la classe closed,
Le div liens directs est ouvert, prend la classe open.

Les panneaux peuvent soit être liées comme avec la méthode « Accordion », ou indépendants.

Le code JS ne doit pas avoir besoin d’être modifié lors de la création de nouveaux PANNEAUX.

Tout doit se faire en déclarant les classes CSS du panneau : class=’Panel open solo ….’

Budget indicatif : 30 à 300 €

Publication : 06 avril 2009 à 15h27

Profils recherchés : Développeur freelance, Développeur JavaScript freelance

Le profil du client est reservé aux prestataires abonnés

Créer un compte

3 freelances ont répondu à ce projet

1 proposition de devis en moins de 2h

C
C
I
Publier un projet similaire

Projet réalisé par cedric2isigny

C
cedric2isigny
Nantes, 44800

Chaque jour, des centaines de clients utilisent Codeur.com pour trouver un prestataire. Créez votre compte dès maintenant, remplissez votre profil et trouvez de nouveaux clients.

Trouver des nouveaux clients

Votre navigateur Web n’est plus à jour. Il ne permet pas d’afficher correctement le site Codeur.com.
Nous vous invitons à mettre à jour votre navigateur ou à utiliser un autre navigateur plus récent.