plugin BubblePopup. Modifier le innerhtml pour chaque element [Résolu]

Khleo · 02/01/2011, 20h03

Bonjour,

J'ai un script jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

OnMouseOver="AfficherBulle('Message')"

Est-ce possible ?

Merci

SpaceFrog · 02/01/2011, 20h33

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.CreateBubblePopup

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

 innerHtml: 'Message bulle',

Khleo · 02/01/2011, 21h02

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

SpaceFrog · 02/01/2011, 22h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="bubble" alt="message à afficher"> ...

Khleo · 02/01/2011, 23h07

Ca ne semble pas fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="TestClass" alt="Txt de la bulle">BlaBla</div>

Il m'affiche : Message: undefined

Merci

SpaceFrog · 03/01/2011, 08h13

Tu peux nous mettre le lien vers la le plugin que je puisse le telecharger et tester ?

danielhagnoul · 03/01/2011, 11h05

Bonjour

Liens utiles :

Khleo · 04/01/2011, 14h37

Le problème vient du $(this) car quand je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

SpaceFrog · 04/01/2011, 15h53

modifie le innerHTML sur le mouseneter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ..

Khleo · 04/01/2011, 16h10

Merci beaucoup !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

02/01/2011, 20h33	#2
SpaceFrog Rédacteur/Modérateur 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 : 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	Code : Sélectionner tout - Visualiser dans une fenêtre à part .CreateBubblePopup 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 : Sélectionner tout - Visualiser dans une fenêtre à part 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
	00

03/01/2011, 08h13	#6
SpaceFrog Rédacteur/Modérateur 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 : 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
	00

03/01/2011, 11h05	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : 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 : http://plugins.jquery.com/project/jqBubblePopup http://maxvergelli.wordpress.com/jquery-bubble-popup/ __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

02/01/2011, 21h02	#3
Khleo Membre habitué Développeur Web Inscription : janvier 2008 Messages : 365 Détails du profil Informations personnelles : Sexe : Â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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email