Googlemap pro et jQuery

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Googlemap pro et jQuery

    Bonjour à tous,

    Je suis en train de développer un petit code jQuery pour faire apparaitre la liste des catégories de la carte googlemap en cliquant sur un bouton. Puis une fois avoir sélectionné ma catégorie refermer la liste en cliquant sur un autre bouton.

    Voici le code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var $j = jQuery.noConflict(); //j'évite les conflits avec les autres librairies
    $j(document).ready(function(){
    $j('#gCatForm').hide(); //je cache la liste des catégories
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); // j'insère la div avant la liste des catégories
    $j('.revelateur').click(function(){
    $j(this).parent().next().fadeIn(); //lorsque je click sur le bouton d'ouverture j'affiche l'élément suivant
    $j(this).parent().remove(); //je supprime mon bouton d'ouverture
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/suivant.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); //je remplace le bouton d'ouverture par mon bouton de fermeture
    $j('.revelateur').click(function(){
    $j(this).parent().next().hide(); //un fois que je click sur le bouton de fermeture la liste des catégories disparait
    $j(this).parent().remove(); //je supprime le bouton de fermeture
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value=""/></div>').insertBefore('#gCatForm'); //j'affiche de nouveau le bouton d'ouverture
    });
    });
    });
    </script>

    Le script fonctionne bien mais mon soucis c que sans recharger la page je peux faire le cycle qu'une seule fois (normal). J'aimerais savoir comment je peux boucler mon script pour que les visiteurs puissent ouvrir ou fermer autant de fois qu'ils le souhaitent la liste des catégories. Cela doit se jouer avec une boucle mais je bloque.

    Merci par avance pour votre aide.

    A+
    Dernière édition par kirra13 à 04/02/2012, 11h38

  • #2
    Re : Googlemap pro et jQuery

    Bonjour,

    J'ai résolu le soucis. Voici le script qui fonctionne.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(){
    $j('#gCatForm').hide();
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value="Cliquez ici pour afficher"/></div>').insertBefore('#gCatForm');
    $j('.revelateur').live('click', function(){
    $j(this).parent().next().fadeIn();
    $j(this).parent().hide();
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur1" value="Cliquez ici pour effacer"/></div>').insertBefore('#gCatForm');
    $j('.revelateur1').click(function(){
    $j(this).parent().next().fadeOut();
    $j(this).parent().remove();
    $j ('<div class="cats"><input type="button" style="background:url(http://127.0.0.1/direct/templates/yoo_phoenix/images/choix.png)no-repeat;border:0px;" class="revelateur" value="Cliquez pour afficher les catégories"/></div>').insertBefore('#gCatForm');
    });
    });
    });
    </script>

    A+

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X