+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [jQuery] Création d'une info-bulle (/showthread.php?tid=3906)
Pages :
1
2
[jQuery] Création d'une info-bulle - phenix - 17-04-2009
Bonjour à tous,
Voila, j'ai eu envie de crée mon propre système d'info bulle avec l'aide de jQuery.
Malheureusement je bloque dès le premier niveau :toilette: )
Voici ce que j'ai fais:
Dans le Body:
<div id="tips" style="position:absolute; visibility:hidden; z-index:1000;"></div> C'est la div que je veux faire apparaitre.
Le support:
<a href="#" onmouseover="tips('teste','Banzai !');">teste info bulle</a>Et enfin le code qui ne marche malheureusement pas
(function($) {
$.valmetips = {
tips: function(message, title) {
//Injection du message
$("div.tips").append("<h1>"+title+":</h1>"+message);
//Div visible
$("div.tips").css({visibility: visible; width: 400px; height: 400px;});
}
}
//Accès rapide
tips = function(message, title) {
$.valmetips.tips(message, title);
}
})(jQuery);Le code n'est absolument pas exécuté, il ne ce passe strictement rien... j'ai du louper une étape quelques par...
Merci d'avance de votre aide.
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 17-04-2009
$.valmetips = {
tips: function(message, title) {
//Injection du message
$("div#tips").append("<h1>"+title+":</h1>"+message);
//Div visible
$("div#tips").css({visibility:"visible", width:400, height:"400px"});
}
}
Ah aussi, pourquoi mettre un onmouseover alors qu'il y a une fonction jQuery fait pour (mousemove ?
RE: [jQuery] Création d'une info-bulle - phenix - 17-04-2009
Merci pour ton aide.
Pour le mousemove, cela semble approprier, seulement, comme je fais pour passer des paramètres ?
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 18-04-2009
En fait c'est la fonction dans le mousemove qui va chercher les infos dont t'as besoin. Si tu veux passer des paramètres différent selon l'info-bulle, ça risque d'être un peu dur. Mais j'imagine qu'il n'y aura que du texte, non ? Dans ce cas le plus simple est d'afficher le texte dans le html, le cacher avec le css et avec le js joué sur la visibilité.
J'te montre un exemple
<html>
<head>
<script src="jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
//sélectionne les infobulles
$('a.infoBulle')
//quand la sourie passe dessus
.mousemove(function(){
//sélectionne le texte de l'infobulle.
//(div.infoBulleTexte situé à la suite de a.infoBulle)
//l'affiche
$(this).next('div.infoBulleTexte').css({visibility:"visible", width:400, height:400});
})
//quand la sourie quitte l'élément
.mouseout(function(){
//sélectionne le texte de l'infobulle et le fait disparaître
$(this).next('div.infoBulleTexte').css({visibility:"hidden"});
});
});
--></script>
</head>
<body>
<a href="#" class="infoBulle">teste info bulle</a>
<div class="infoBulleTexte" style="position:absolute; visibility:hidden; z-index:1000;">
<h1>Banzai !</h1>teste
</div>
<a href="#" class="infoBulle">teste info bulle 2</a>
<div class="infoBulleTexte" style="position:absolute; visibility:hidden; z-index:1000;">
<h1>Bambou !</h1>teste 2
</div>
</body>
</html>RE: [jQuery] Création d'une info-bulle - phenix - 18-04-2009
Ce que tu propose est intéressant, seulement sa m'obligerais à revoir une très grosse partie du jeu. De plus les texte change souvent, cela peux aller jusqu'à 400 voir plus, alors pour la lisibilité, je pense que ce ne sera pas top.
Pour le moment j'en suis a ce niveau:
$(document).ready(
function ()
{
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
}
);
(function($) {
$.valmetips = {
//Affichage de l'info-bulle
tips: function(message, title) {
//Injection du message
$("div#tips").append("<h1>"+title+":</h1>"+message);
//Div visible
$("div#tips").css({visibility: "visible", width: "400px", height: "400px", top: sourisTop+20+"px", left: sourisLeft+30+"px"});
}
,
cache_tips: function() {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").css({visibility: "hidden"});
}
}
//Accès rapide
tips = function(message, title) {
$.valmetips.tips(message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
})(jQuery);Il y a un petit soucis, la mise à jour de la position de la souris ne ce fait pas en temps réel. Si quelqu'un a une solution, je suis preneur. Moi je cherche toujours
.
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 18-04-2009
Ouai ok, si tous change est trop compliquer, autant laisser le onmouseover.
$(document).ready(function(){
//Position de la souris
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
});
(function($) {
$.valmetips = {
//Affichage de l'info-bulle
tips: function(ths, message, title) {
//Injection du message
$("div#tips").append("<h1>"+title+":</h1>"+message);
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
var outHandler = function() {
jQuery(ths)
.unbind('mousemove',moveHandler)
.unbind('mouseout',outHandler);
};
jQuery(ths)
.bind('mousemove', moveHandler)
.bind('mouseout',outHandler);
}
,
cache_tips: function() {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").css({visibility: "hidden"});
}
}
//Accès rapide
tips = function(message, title) {
$.valmetips.tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
})(jQuery);
RE: [jQuery] Création d'une info-bulle - phenix - 18-04-2009
Merci, cela marche à merveille !
Malheureusement, il y a quelques petites choses que je n'ai pas comprit:
- A quoi sert la ths ? Si j'ai bien comprit, elle contient le "this". Mais, je ne comprend pas ce que sa vient faire ici. (Et pour tout dire, j'ai toujours eu du mal a comprendre ce que c'était le this.)
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
Tu mes une fonction dans une variable, cela veux dire que la variable permet d'exécuter la fonction ?
Et pour finir, j'ai rien comprit aux fonction unbind et bind, même après avoir lut la doc sur ces fonctions. D'après ce que j'ai comprit cela permet de jouer avec des événements.
Voila, si tu pouvais le commenter tes codes, cela m'aiderais, vu que je ne veux pas me limiter à afficher une info-bulle (Il faut encore faire l'info-bulle persistante aux click de la souris, mais je pense que je dois comprendre tout sa avant.)
Merci de ton aide en tout cas, sa m'aide beaucoup à comprendre le fonctionnement de jQuery.
RE: [jQuery] Création d'une info-bulle - jo_link_noir - 18-04-2009
Ouaip, le ths correspond au this, en fait this se rapporte toujours au « propriétaire » de la fonction. Par exemple, quand tu passe la sourie sur ton lien il appelle la fonction tips. Alors this correspond à la balise qui appelle tips (ici ton lien), un peu comme si tu fessais document.getElementsByTagName("a")[numero_de_mon_lien].
Le jQuery(ths) sélectionne ton lien avec jQuery pour faire les traitement dessus.
Le moveHandler c'est le principe des variables fonctions (je sais pas si ça à un nom), mais ça consiste à créé une variable qui ce comporte comme une fonction. si je fait moveHandler() il va l'exécuter comme si c'était une fonction.
La fonction que tu donne au mousemove dans le début de ton script, t'aurait très bien pu la passé par une variable fonction.
//principe des fonctions anonymes
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
//revient à faire
//variable fonction
maFonc = function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
};
$().mousemove(maFonc);
Quand à bind, c'est une méthode qui permet de rajouter des actions.
Quand je bouge ma sourie je lance moveHandler. Et quand je quitte le lien, j'enlève moveHandler. Pareil avec outHandler.
//je pointe sur le lien où est la sourie
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind('mousemove', moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind('mouseout',outHandler);
//on aurait très bien pu faire
jQuery(ths)
.mousemove(moveHandler)
.mouseout(upHandler);
Autre exemple
$().mousemove(function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
//équivalent à :
$().bind("mousemove", function(e){
sourisLeft = e.pageX;
sourisTop = e.pageY;
});
Un truc qui est pas dit dans la doc que je t'es montré, c'est qu'avec bind (et d'autre j'imagine) tu peux mettre plusieurs événement en même temps :
$().bind("mousemove | click", myfonc)
//au lieu de
$().mousemove(myfonc).click(myfonc)
RE: [jQuery] Création d'une info-bulle - phenix - 18-04-2009
Merci beaucoup pour ces éclaircissements.
J'avais des questions, mais en testant le code que tu m'as donné, j'ai répondu à mes questions.
En faites, tu empile au passage de la souris et désempile quand elle quitte d'où la présence des unbind (qui vide la pile).
Bon je vais m'attaquer au freeze de la div si on clique. C'est pas gagné...
[Edit]
Voila, j'ai presque fini, je poste pour que tu voie ce que j'ai fais, je sais pas si tu l'aurais fait comme sa:
(function($) {
$.valmetips = {
freeze: false,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind('mousemove',moveHandler)
.unbind('mouseout',outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
//Injection du message
$("div#tips").append("<h1>"+title+":</h1>"+message);
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind('mousemove', moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind('mouseout',outHandler);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").css({visibility: "hidden"});
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths)
.unbind();
//On zappe la div
$("div#tips").empty();
//On ajoute le contenu
$("div#tips").append("<h1>"+title+":</h1>"+message);
//on affiche la div
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
$.valmetips.freeze = true;
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
})(jQuery);
J'appelle la fonction click_tips via un onclick
.Sa marche, reste a crée un bouton croix qui efface la bulle.
Merci beaucoup pour ton aide, quand j'aurais fini totalement, je mettrais le script dans les ressource, cela peu servir a d'autre
.
RE: [jQuery] Création d'une info-bulle - phenix - 18-04-2009
Bon, voila, j'y suis presque, j'ai un soucis.
Voici le code complet:
(function($) {
$.valmetips = {
freeze: false,
//Affichage de l'info-bulle
over_tips: function(ths, message, title) {
var moveHandler = function(e) {
//Div visible (e.PageX ou sourisLeft)
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop+20)+"px", left: (sourisLeft+30)+"px"});
};
//On vide les piles
var outHandler = function() {
jQuery(ths)
.unbind('mousemove',moveHandler)
.unbind('mouseout',outHandler);
};
//je pointe sur le lien où est la souris
if (!$.valmetips.freeze)
{
//Injection du message
$("div#tips").append(title+message);
jQuery(ths)
//à chaque fois que la sourie bouge, j'exécute moveHandler
.bind('mousemove', moveHandler)
//quand je quitte le lien, j'exécute outHandler qui va enlever les actions
.bind('mouseout',outHandler);
}
}
,
cache_tips: function() {
if (!$.valmetips.freeze)
{
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").css({visibility: "hidden"});
}
}
,
click_tips: function(ths, message, title) {
//on zappe tout.
jQuery(ths)
.unbind();
//On zappe la div
$("div#tips").empty();
//On ajoute le contenu
$("div#tips").append(title+message);
//on affiche la div
$("div#tips").css({visibility: "visible", width: "400px",height: "400px",
top: (sourisTop)+"px", left: (sourisLeft)+"px"});
//On active le freeze
$.valmetips.freeze = true;
//sortie de l'infobulle
$("div#tips").mouseout(function () {
//On vide la div.
$("div#tips").empty();
//On la rend invisible
$("div#tips").css({visibility: "hidden"});
//On désactive le freeze
$.valmetips.freeze = false;
}
);
}
}
//Accès rapide
over_tips = function(message, title) {
$.valmetips.over_tips(this, message, title);
}
cache_tips = function() {
$.valmetips.cache_tips();
}
click_tips = function(message, title) {
$.valmetips.click_tips(this, message, title);
}
})(jQuery);
sa fonctionne, il y a juste un petit bug. Quand on clique, l'info bulle ce freeze bien, seulement la zone de la bulle semble incorrect, lorsque je descente pour parcourir l'infobulle, elle disparait alors que ma souris de devrait pas l'avoir quitté.
Voila, ce code est presque finis, il reste la touche finale.