Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > jQuery
jQuery Forum d'entraide sur le framework jQuery. Avant de poster : Tutoriels jQuery, FAQ jQuery, Tous les tutoriels JavaScript, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 02/01/2011, 20h03   #1
Membre habitué
 
Homme
Développeur Web
Inscription : janvier 2008
Messages : 365
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 24
Localisation : France

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2008
Messages : 365
Points : 140
Points : 140
Par défaut plugin BubblePopup. Modifier le innerhtml pour chaque element

Bonjour,

J'ai un script jQuery :

Code :
1
2
3
4
5
6
7
8
$(document).ready(function(){
     $('#Boutton').CreateBubblePopup({
     position : 'top',
     align	 : 'center',
     innerHtml: 'Message bulle',
     innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
     });
});
Je voudrais pouvoir intégrer ce code directement dans ma page en passant des paramètres :

par exemple :

Code :
OnMouseOver="AfficherBulle('Message')"
Est-ce possible ?

Merci
Khleo est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 02/01/2011, 20h33   #2
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 001
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 001
Points : 45 077
Points : 45 077
se charge du mouseover ...

"Boutton" étant l'id de lelement qui doit declencher l'affichage au survol
et le message etant dans les paramètres

Code :
 innerHtml: 'Message bulle',
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 02/01/2011, 21h02   #3
Membre habitué
 
Homme
Développeur Web
Inscription : janvier 2008
Messages : 365
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 24
Localisation : France

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2008
Messages : 365
Points : 140
Points : 140
Oui le script fonctionne très bien tel qu'elle, mais il est difficile de le rendre dynamique car le message est stocké dans l’entête de la page.

Ça pose problème si je veux afficher 10 bulles différentes dans le même page.

Merci
Khleo est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 02/01/2011, 22h49   #4
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 001
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 001
Points : 45 077
Points : 45 077
rien ne t'empeche de stocker le message dans le alt de la balise
et d'attribuer les bubbles au moyen d'une classe

Code :
1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
     $('.bubble').CreateBubblePopup({
     position : 'top',
     align	 : 'center',
     innerHtml: $(this).attr('alt'),
     innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
     });
});

Code :
<div class="bubble" alt="message à afficher"> ...
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 02/01/2011, 23h07   #5
Membre habitué
 
Homme
Développeur Web
Inscription : janvier 2008
Messages : 365
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 24
Localisation : France

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2008
Messages : 365
Points : 140
Points : 140
Ca ne semble pas fonctionner :


Code :
1
2
3
4
5
6
7
$(document).ready(function(){
     $('.TestClass').CreateBubblePopup({
          position : 'top',
          align	 : 'center',
          innerHtml: 'Message: '+$(this).attr('alt'),
          innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
});
Code :
<div class="TestClass" alt="Txt de la bulle">BlaBla</div>
Il m'affiche : Message: undefined

Merci
Khleo est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 03/01/2011, 08h13   #6
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 001
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 001
Points : 45 077
Points : 45 077
Tu peux nous mettre le lien vers la le plugin que je puisse le telecharger et tester ?
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 03/01/2011, 11h05   #7
Rédacteur
 
Avatar de danielhagnoul
 
Homme Daniel Hagnoul
Étudiant perpétuel
Inscription : février 2009
Messages : 3 221
Détails du profil
Informations personnelles :
Nom : Homme Daniel Hagnoul
Âge : 61
Localisation : Belgique

Informations professionnelles :
Activité : Étudiant perpétuel
Secteur : Enseignement

Informations forums :
Inscription : février 2009
Messages : 3 221
Points : 6 767
Points : 6 767
Bonjour

Liens utiles :
__________________

FAQ jQuery

Mon cahier d’exercices sur jQuery & Co

Si un message vous a aidé ou vous semble pertinent, votez pour lui !
danielhagnoul est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/01/2011, 14h37   #8
Membre habitué
 
Homme
Développeur Web
Inscription : janvier 2008
Messages : 365
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 24
Localisation : France

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2008
Messages : 365
Points : 140
Points : 140
Le problème vient du $(this) car quand je fais

Code :
innerHtml : $('#BouttonPartager').attr('alt')
il me retourne bien l'attribut alt.

Dans la documentation technique ils mettent :

Citation:
SetBubblePopupInnerHtml : The function sets permanently the "innerHtml" of all Bubble Popups associated to the elements in the set of matched elements;
it takes an optional parameter to know if the new "innerHtml" must be saved permanently or not, by default is true.
Note: before using this function, you must call the function .CreateBubblePopup()
Mais je n'arrive pas à l'utiliser, je n'ai trouvé aucun exemple ...

Merci
Khleo est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/01/2011, 15h53   #9
Rédacteur/Modérateur
 
Avatar de SpaceFrog
 
Homme
Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Inscription : mars 2002
Messages : 30 001
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : Royaume-Uni

Informations professionnelles :
Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur
Secteur : Industrie

Informations forums :
Inscription : mars 2002
Messages : 30 001
Points : 45 077
Points : 45 077
modifie le innerHTML sur le mouseneter

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
$(document).ready(function(){
     BubbleOptions={
		          position : 'top',
       		   align	 : 'center',
		          innerHtml: '',
       		   innerHtmlStyle: {color:'#000000', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'
       		   }
     $('.TestClass').CreateBubblePopup(BubbleOptions).mouseenter( function(){$(this).SetBubblePopupInnerHtml('Message: '+$(this).attr('alt'),false) });
 
});
</script>
</head>
<body>
<div class="TestClass" id="foo" title="Txt de la bulle">BlaBla</div><div class="TestClass" title="autre Texte de la bulle">BlaBla</div>
 
</body>
Ici j'ai utilisé title pour être plus correct, mais fonctionne aussi avec alt ..
__________________
Ma page Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag


réalisations :www.planet-languages.com|www.saftair.com| www.ouestisol.fr | www.sebemex.fr | www.extramiante.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
SpaceFrog est déconnecté   Envoyer un message privé Réponse avec citation 10
Vieux 04/01/2011, 16h10   #10
Membre habitué
 
Homme
Développeur Web
Inscription : janvier 2008
Messages : 365
Détails du profil
Informations personnelles :
Sexe : Homme
Âge : 24
Localisation : France

Informations professionnelles :
Activité : Développeur Web

Informations forums :
Inscription : janvier 2008
Messages : 365
Points : 140
Points : 140
Merci beaucoup !

J'ai effectué quelques modifications car il affichait de temps à autre des bulles vides :

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function(){
    $('.TestClass').CreateBubblePopup({
		          position : 'top',
       		          align : 'center',
		          innerHtml: '',
       		          innerHtmlStyle: {color:'#FFFFFF', 'text-align':'center'}, themeName:'all-black', themePath:'img/jquerybubblepopup-theme'});
 
	$('.TestClass').mouseenter(function()
	{
		$(this).SetBubblePopupInnerHtml($(this).attr('alt'), true)
	})
});
</script>
Code :
1
2
<div class="TestClass" alt="Txt de la bulle">BlaBla</div>
<div class="TestClass" alt="autre Texte de la bulle">BlaBla</div>
Et à priori ça fonctionne sur tous les navigateurs.

Merci
Khleo est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 14h49.


 
 
 
 
Partenaires

Hébergement Web