Menu Dynamique en JQUERY

jquery logo

Dans ma conception de script je me suis confronté au problème d’un code JQUERY qui ne passait pas au travers d’un FORM. Aussi je suis tombé sur ce code qui modifié suivant vos besoin vous permet de l’inclure ou vous le souhaitez. La modification est très simple.
Le script utilise un systeme de class pour identifier chaque élément et lui applique les paramètres en fonction de vos demandes.

Je décris ci-dessous les divers opérations du script, $(‘.tab a’) permet d’appliquer au éléments de type lien via une class « tab », .live définit que TOUT les éléments du sélecteur seront concernés, $(‘.content’).load($(this).attr(‘href’)); est assez explicite au chargement de l’événement (ici « click ») le contenu est chargé dans la div ayant pour CLASS « content » depuis sont attribut « href ». preventDefault() vous permet de ne pas déclencher l’action par défaut.

Pour trigger() je vous invique à visiter ce site qui détail plus l’utilisation.( Documentation trigger Jquery)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function(){
            $('.tab a').live('click', function(e){
                $('.content').load($(this).attr('href'));
                e.preventDefault();
            });
            $('.tab a:first').trigger('click');
        });
        // </script>
        <div class="tab">
            <ul>
                <li>Page 1</li>
                <li>Page 2</li>
                <div class="clear"></div>
            </ul>
            <div class="content"></div>
        </div>

Laisser un commentaire