Retourner à la page d'accueil de TJS

Script infobulle2 : Script info-bulle optimisé

Exemple du script info-bulle du livre, avec les fonctionnalités minimales
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 183

Exécution du script

Emulation de la console

Code source

<html><head><style type="text/css">#bottomright {    position:absolute;    right:15px;    bottom:15px;    background: #eee;    padding:5px;    border:1px solid #666;}#topright {    position:absolute;    right:15px;    top:15px;    background: #eee;    padding:5px;    border:1px solid #666;}.definition {  border-bottom:1px dashed #999;    }.infobulle {  cursor: help;}div.infobulleJS {  position:absolute;  padding:3px;  margin-right:10px;  border:1px solid #000;  background: #ccc;  color:#000;  box-shadow: 3px 3px 3px #000;  max-width:200px;}/* Ajout de la flè;che sur l'infobulle par défaut */div.infobulleJS::before {  position:absolute;  content:" ";  border-width:8px;  border-style:solid;  border-color:transparent;}div.infobulleJS::after {  position:absolute;  content:" ";  border-width:7px;  border-style:solid;  border-color:transparent;}div.infobulleJSLeft::before {  left:30px;    margin-left:-16px;}div.infobulleJSLeft::after {  left:30px;   margin-left:-15px; }div.infobulleJSTop::before {  bottom:100%;      border-bottom-color:#000;}div.infobulleJSTop::after {  bottom:100%;      border-bottom-color:#ccc;}div.infobulleJSRight::before {  right:30px ;   margin-right:-16px; }div.infobulleJSRight::after {  right:30px ;   margin-right:-15px; }div.infobulleJSBottom::before {  top:100%;  border-top-color:#000;  }div.infobulleJSBottom::after {  top:100%;  border-top-color:#ccc;}div.infobulleJSTop.infobulleAnimateIn {  animation: infobulleAnimateInTop 0.5s 1;}@keyframes infobulleAnimateInTop {  from {     opacity: 0;     margin: 30px 0px 0px 0px;    }  to   {     margin-bottom:0px 0px 0px 0px;    opacity: 1;   }}div.infobulleJSTop.infobulleAnimateOut {  animation: infobulleAnimateOutTop 0.5s 1;}@keyframes infobulleAnimateOutTop {  from {     opacity: 1;     margin: 0px 0px 0px 0px;    }  to   {     margin-bottom:30px 0px 0px 0px;    opacity: 0;   }}div.infobulleJSBottom.infobulleAnimateIn {  animation: infobulleAnimateInBottom 0.5s 1;}@keyframes infobulleAnimateInBottom {  from {     opacity: 0;     margin-top: -30px;    }  to   {     margin-top: 0px;    opacity: 1;   }}div.infobulleJSBottom.infobulleAnimateOut {  animation: infobulleAnimateOutBottom 0.5s 1;}@keyframes infobulleAnimateOutBottom {  from {     opacity: 1;     margin-top: 0px;    }  to   {     margin-top: -30px;    opacity: 0;   }}</style><title>Exemple complet optimisé du chapitre Manipulation du document</title><script type="text/javascript">    /* Programmation objet */    var TJSbulle = {        delai: 500, /* Délai d'attente avant effacement de la bulle */    init: function() {        document.addEventListener("readystatechange", function(evt) {          if (document.readyState=="interactive") {            console.log("TJSbulle initialisé");            /* Trouver et parcourir tous les éléments de classe infobulle */            var elts=document.getElementsByClassName("infobulle");            for (var i=0; i<elts.length; i++) {              elts[i].dataset.bulleId="";              /* Transformer l'attribut title en dataset title */              elts[i].dataset.title=elts[i].getAttribute("title");              elts[i].setAttribute("title", "");              /* Ajouter le gestionnaire d'événement sur le mouseenter */                elts[i].addEventListener("mouseenter", TJSbulle.show);              /* Ajouter le gestionnaire d'événement sur le mouseleave */                elts[i].addEventListener("mouseleave", TJSbulle.leave);            }          }        });            },    show: function(evt) {        var elt=evt.target;        /* Création de la bulle si elle n'existe pas déjà */        if (elt.dataset.bulleId!="") {            return false;        }        var bulle=document.createElement("div");        var id="TJSbulle"+new Date().getTime();        bulle.setAttribute("id", id);        bulle.className="infobulleJS";        bulle.innerHTML=elt.dataset.title;        /* Positionnement initial de la bulle  */        bulle.style.top=20;        bulle.style.left=20;        document.body.appendChild(bulle);                var rect=elt.getBoundingClientRect();        var size=bulle.getBoundingClientRect()                /* Vérification de la position horizontale */        console.log(rect.left+" "+size.width+" >? "+document.body.getBoundingClientRect().width);        if (rect.left+size.width+20>document.body.getBoundingClientRect().width) {            console.log("bulle à deplacer sur la gauche");            bulle.style.left=document.body.getBoundingClientRect().width-size.width+window.scrollX;            bulle.className+=" infobulleJSRight";        } else {            bulle.style.left=rect.left+Math.round(rect.width/2)+window.scrollX;            bulle.className+=" infobulleJSLeft";                    }                /* Vérification de la position verticale */                console.log(rect.top+" "+rect.height+" >? "+document.body.getBoundingClientRect().height);        if (rect.top+rect.height+20>document.body.getBoundingClientRect().height) {            console.log("bulle à deplacer vers le haut ");            bulle.style.top=document.body.getBoundingClientRect().height-rect.height-size.height-5+window.scrollY;            bulle.className+=" infobulleJSBottom";        } else {            bulle.style.top=rect.top+rect.height+10+window.scrollY;            bulle.className+=" infobulleJSTop";                    }                console.log("Bulle en position ("+bulle.style.left+" , "+bulle.style.top+ ")");                        /* Enregistrement de l'id de la bulle dans dataset */        elt.dataset.bulleId=id;                /* Ajout de la bulle sur le document */        bulle.className+=" infobulleAnimateIn";                            },    leave: function(evt) {        setTimeout(function() {            TJSbulle.hide(evt.target.dataset.bulleId, evt.target);        }, TJSbulle.delai);    },    hide: function(bulleId, elt) {        var bulle=document.getElementById(bulleId);        if (bulle) {            bulle.className=bulle.className.replace("infobulleAnimateIn", "infobulleAnimateOut");            setTimeout(function() {                document.body.removeChild(bulle);                elt.dataset.bulleId="";            }, 300);        }    }    }    /* Initialisation de l'outil d'info bulles */    TJSbulle.init();     </script></head><body>  <h1 id="monH1" class="titre">Affichage d'info-bulles optimisé</h1>  <p>Qu'est-ce qu'une <span class="infobulle definition" title="Message d'information qui apparaît au survol de la souris. Le nom bulle vient de l'univers de la bande dessinée.">info-bulle</span> ?</p>  <p>On peut en mettre partout <span class="infobulle definition" title="Une autre bulle">info-bulle 2 </span> et même <span class="infobulle definition" title="Encore une autre bulle">beaucoup</span> ?</p>  <p>Le script passe en programmation objet avec la création de l'objet <code>TJSbulle</code> et de son appel <code>TJSbulle.init()</code>.</p>      Notez que les bulles restent affichées une demi seconde, même à la perte du focus.</p>  <p>Les bulles sont repositionnées pour rester toujours affichées correctement et entièrement dans la page visible.</p>    <div id="topright">Essayez la bulle en <span class="infobulle definition" title="Cette bulle se positionne automatiquement sur la gauche">bord de page</span></div>  <div id="bottomright">Essayez la bulle en <span class="infobulle definition" title="Cette bulle se positionne de manière à être visible, même aux limites de l'écran">bord de page inférieur</span></div></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 14 novembre 2019

Version papier à 29€90
Format électronique à 22€99.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 04/04/2020 06:11:56 sur php7 en 96.54 ms