script : bubulle
langage : javascript
catégorie : module
usage : Des bulles d'aide personnalisées par css.
tags : ergonomie
Ce genre d'infobulles {survolez-moi} c'est bien, mais c'est parfois un peu léger. Il y a des fois où on voudrait bien les rendre plus jolies, et des fois aussi où on voudrait pouvoir mettre plus que du texte dedans ! bubulle est là pour ça, et fonctionne en toute simplicité.
bubulle offre les caractéristiques suivantes :
Collez de plus près au graphisme de votre site,
Et profitez allègrement des css3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
<input type="button" />)
Il faut déjà charger le script, en insérant le code suivant entre les balises <head> et </head> de la page :
<script src="bubulle.mins.js" type="text/javascript"></script>
Puis on déclare les bulles à l'intérieur d'une nouvelle balise <script> placée en fin de page :
bubulle.apply(document.getElementById('mon_element'), 'Sali-salut Homer');
On peut aussi préparer le contenu des bulles dans des éléments masqués.
Pour se simplifier la vie, on peut préparer le contenu de la bulle dans un élément masqué, et reproduire ce contenu dans la bulle :
<div id="source" style="display:none;"><!-- remarquez le display:none; --> <ul> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ul> </div>
var cible = document.getElementById('mon_element'); var source = document.getElementById('source').innerHTML; bubulle.apply(cible, source);
Sachez que la bulle reçoit un attribut id="bubulle". Vous pouvez donc la styliser via son id :
#bubulle { background-color: #fafaff; border: 1px solid #aaf; }
Mais si vous voulez afficher dans une même page plusieurs bulles avec des styles différents, il sera plus pratique d'utiliser des styles de classes :
.bulle1 { background-color: #fafaff; border: 1px solid #aaf; } .bulle2 { color: #fff; background-color: #000; border: 1px solid #f00; }
Vous ajouterez alors une option à la méthode bubulle.apply() :
(plus d'explications à propos des options juste un peu plus bas.)
bubulle.hop(contenu, {classe:'bulle1'});
bubulle.apply() accepte plusieurs options, que l'on indique en troisième paramètre de la méthode. Ces options doivent être déclarées dans un tableau associatif, sous la forme suivante :
var options = { option1 : valeur1, option2 : valeur2, optionN : valeurN }; bubulle.apply(declencheur, contenu, options);
Voici la liste des options disponibles :
| options | type | description | par défaut |
| classe | String
|
classe css à appliquer à la bulle | null
|
|---|---|---|---|
| survolBulle | Boolean | indique si la bulle doit rester ouverte quand la souris la survolle. | 0 |
| delai | Integer | permet de n'afficher la bulle que si la souris reste un certain temps au dessus de l'élément déclencheur. Cette durée est exprimée en millisecondes. |
200 |
| persistance | Integer | Normalement, la bulle disparaît immédiatement lorsque la souris ne survole plus l'élément qui l'a ouverte. L'option persistance permet de faire en sorte que la bulle ne disparaisse qu'après un certain délai, exprimé en millisecondes. Avec persistance:-1 , la bulle ne disparaîtra pas tant que la méthode bubulle.pop() n'aura pas été appelée par vos soins (grâce à un bouton de fermeture, par exemple). |
0 |
| fixeApres | Integer |
avant ce délai (exprimé en milliseconde), la bulle bouge avec la souris.
|
200 |
| contenuAjax | String | url du fichier à interroger, en cas de chargement du contenu de la bulle par ajax. Cette option requiert bubulle.extras.js pour fonctionner (fourni dans le zip). |
null
|
| fonduOpt | function
|
liste d'options pour l'apparition en fondu. (Voir fade.js pour le détail de ces options) Cette option requier bubulle.extras.js pour fonctionner (fourni dans le zip). |
null |
Vous trouverez dans ce zip une version minifiée du script (3,6Ko), une autre commentée, ainsi qu'un fichier supplémentaire (optionnel) pour les effets de fondu et le chargement du contenu par ajax.
compatibilité :
(autres navigateurs non testés)
Notez que ce module embarque plusieurs fragments de code présentés sur ce site : getPos, qui permet de connaître la position d'un élément html dans la page, mousePos, qui nous renseigne sur la position de la souris, scrolled, qui mesure le défilement de la page, winDim, qui retourne les mesures de la fenêtre, ainsi que setOpacity et fade pour l'effet d'apparition en fondu, et encore AjReq, pour les requêtes ajax.
contenuAjax: "monfichier.php?id=XXX"$_GET['id']
