Jquery (utilisation)
Leskate
Messages postés
80
Date d'inscription
Statut
Membre
Dernière intervention
-
IdleMan Messages postés 243 Date d'inscription Statut Membre Dernière intervention -
IdleMan Messages postés 243 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis en train de développer un site et j'ai récupérer le framework Jquery (http://jquery.developpeur-web2.com/documentation/effets.php en JavaScript.
Cependant, je n'arrive pas à l'utiliser, étant un nouveau sur le marché du JS ^^
Je voudrais afficher un texte au survole d'un lien en utilisant un effet de ce framework. Puis masquer ce texte lorsque la souris n'est plus sur ce lien, toujours en utilisant un effet de Jquery.
Pour le moment, n'importe quel effet, je le couplerais à un petit PHP pour avoir un effet aléatoire ;)
Merci d'avance!
Je répondrais a vos différentes demande de précision.
le_skate_666 AT hotmail DOT com (si vous voulez me contacter en direct)
je suis en train de développer un site et j'ai récupérer le framework Jquery (http://jquery.developpeur-web2.com/documentation/effets.php en JavaScript.
Cependant, je n'arrive pas à l'utiliser, étant un nouveau sur le marché du JS ^^
Je voudrais afficher un texte au survole d'un lien en utilisant un effet de ce framework. Puis masquer ce texte lorsque la souris n'est plus sur ce lien, toujours en utilisant un effet de Jquery.
Pour le moment, n'importe quel effet, je le couplerais à un petit PHP pour avoir un effet aléatoire ;)
Merci d'avance!
Je répondrais a vos différentes demande de précision.
le_skate_666 AT hotmail DOT com (si vous voulez me contacter en direct)
A voir également:
- Jquery (utilisation)
- Utilisation chromecast - Guide
- Télécharger gratuitement notice d'utilisation - Guide
- Manuel utilisation batigest connect pdf - Forum compta / gestion
- La ressource demandée est en cours d'utilisation ✓ - Forum Logiciels
- Family link temps d'utilisation ne fonctionne pas - Forum Contrôle parental
3 réponses
Moi j'utilise le plugin interface.js couplé a jquery , il permet de faire des effets par transitions de classes qui sont tres interessant , donc dans ton cas tu a juste a faire une classe en display none et une classe en display block et tu applique un code semblable au mien (bien sur adapté a tes id et a tes classes) :
Cela dis un afficher /masquer ils y a une fonction de jquery qui le fait sans avoir besoin d'interface.js , par exemple la fonction hide( ) : https://jquery.com/
Mais si c'est un simple affiché caché sans transition ni rien tu n'a pas besoin de jquery , tu peut le faire en simple javascript.
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
$(document).ready(function(){
$('#menu1').bind('mouseover',function(){
$('#menu1').animate({className: 'menuhover'},parseInt(200));
});
$('#menu1').bind('mouseout',function(){
$('#menu1').animate({className: 'menup'},parseInt(200));
});
});
Cela dis un afficher /masquer ils y a une fonction de jquery qui le fait sans avoir besoin d'interface.js , par exemple la fonction hide( ) : https://jquery.com/
Mais si c'est un simple affiché caché sans transition ni rien tu n'a pas besoin de jquery , tu peut le faire en simple javascript.
Je te propose de te filer un ptit code que j'ai fait spécialement pour toi (je suis trop bon) voila ce qu'il fait :
http://all.pandas.are.free.fr/lib/jquery/123456/
voila ou tu peut le télécharger :
http://all.pandas.are.free.fr/lib/jquery/123456/123456.zip
Pour modifier l'effet , il suffit de modifier les classes css qui gerent l'avant/apres , jquery et le plugin interface faisant la transition tout seul .
http://all.pandas.are.free.fr/lib/jquery/123456/
voila ou tu peut le télécharger :
http://all.pandas.are.free.fr/lib/jquery/123456/123456.zip
Pour modifier l'effet , il suffit de modifier les classes css qui gerent l'avant/apres , jquery et le plugin interface faisant la transition tout seul .
Très bien :-)
Ça marche parfaitement !
Mais je dois prévoir un "div" et une fonction Js pour chaque lien, ou il est possible de rendre tout cela dynamique?
De plus, pour modifier l'effet, tu me conseilles de modifier la css... tu aurais un exemple dont je pourrais m'inspirer?
Merci pour tout ce que tu fais, ça m'aide pas mal ^_^
Ça marche parfaitement !
Mais je dois prévoir un "div" et une fonction Js pour chaque lien, ou il est possible de rendre tout cela dynamique?
De plus, pour modifier l'effet, tu me conseilles de modifier la css... tu aurais un exemple dont je pourrais m'inspirer?
Merci pour tout ce que tu fais, ça m'aide pas mal ^_^
Pour le css l'exemple est dans ce que je t'ai donné , a savoir que le script migre progressivement d'une classe css vers une autre , si tu veut changer l'effet il te suffit donc de modifier ces deux classes .
Tu peut effectivement rendre cela plus dynamique en appliquand le script non a une id (ici 'monlien') mais a toutes les balises <a> bien sur si tu fais cela le script s'enclenchera sur tous les liens des que tu passera sur un seul lien , c'est pourquoi il te faut reflechir a un petit subterfuge en javascript , j'ai bien une petite idée mais je vais pas tout te faire non plus :p
Tu peut effectivement rendre cela plus dynamique en appliquand le script non a une id (ici 'monlien') mais a toutes les balises <a> bien sur si tu fais cela le script s'enclenchera sur tous les liens des que tu passera sur un seul lien , c'est pourquoi il te faut reflechir a un petit subterfuge en javascript , j'ai bien une petite idée mais je vais pas tout te faire non plus :p
Je précise que j'aimerais une animation , d'où l'utilité de JQuery!
Voici mon code pour le moment (sans animation)
<html> <head> <script type="text/javascript" src="include/jquery-1.2.3.js.js"></script> <script language="javascript"> var cmp = 0; function AideTextile (cadre) { cmp++; // technique permetant d'afficher/cacher l'aide, grâce à un seul bouton. if (cmp%2) { document.getElementById(cadre).innerHTML = "Liste des différentes possibilité offerte par le Textile"; } else { document.getElementById(cadre).innerHTML = ""; } // a remplir return; } </script> </head> <body> <a href="javascript:AideTextile('Aide_Textile')"/ >Aide textile</a> <div id="Aide_Textile"></div> </body> </html>Il manque bien sur tout le coté 'animation' que je n'arrive vraiment pas a utiliser.