MooTools - Info-bulles
MooTools fournit différentes info-bulles pour concevoir des styles et des effets personnalisés. Dans ce chapitre, nous allons découvrir les différentes options et événements des info-bulles, ainsi que quelques outils qui vous aideront à ajouter ou supprimer des info-bulles d'éléments.
Créer une nouvelle info-bulle
La création d'une info-bulle est très simple. Tout d'abord, nous devons créer l'élément où nous allons attacher l'info-bulle. Prenons un exemple qui crée une balise d'ancrage et l'ajoute à la classe Tips dans le constructeur. Jetez un œil au code suivant.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Jetez un œil au code utilisé pour créer une info-bulle.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Exemple
L'exemple suivant explique l'idée de base des info-bulles. Jetez un œil au code suivant.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Vous recevrez la sortie suivante -
Production
Options d'info-bulle
Il n'y a que cinq options dans Astuces et elles sont toutes assez explicites.
showDelay
Un entier mesuré en millisecondes, cela déterminera le délai avant que l'info-bulle ne s'affiche une fois la souris de l'utilisateur sur l'élément. La valeur par défaut est fixée à 100.
hideDelay
Tout comme showDelay ci-dessus, cet entier (également mesuré en millisecondes) détermine combien de temps attendre avant de masquer le conseil une fois que l'utilisateur quitte l'élément. La valeur par défaut est fixée à 100.
nom du cours
Cela vous permet de définir un nom de classe pour l'habillage de l'infobulle. La valeur par défaut est définie sur Null.
Décalage
Cela détermine à quelle distance de l'élément l'info-bulle apparaîtra. «x» fait référence au décalage de droite, où «y» est le décalage vers le bas (tous deux relatifs au curseur SI l'option «fixed» est définie sur false, sinon le décalage est relatif à l'élément d'origine). La valeur par défaut est x: 16, y: 16
Fixé
Cela définit si l'info-bulle suivra ou non votre souris si vous vous déplacez autour de l'élément. Si vous le définissez sur true, l'info-bulle ne bougera pas lorsque vous déplacez votre curseur, mais restera fixe par rapport à l'élément d'origine. La valeur par défaut est false.
Événements d'info-bulle
Les événements d'info-bulle restent simples, comme le reste de cette classe. Il y a deux événements - onShow et onHide, et ils fonctionnent comme prévu.
onShow ()
Cet événement s'exécute lorsque l'info-bulle apparaît. Si vous définissez un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.
onHide ()
L'info-bulle se masque lors de l'exécution de cet événement. S'il y a un délai, cet événement ne s'exécutera pas tant que le délai ne sera pas écoulé.
Méthodes des info-bulles
Il existe deux méthodes pour les info-bulles: attacher et détacher. Cela vous permet de cibler un élément spécifique et de l'ajouter à un objet d'info-bulle (et par conséquent, inhérent à tous les paramètres de cette instance de classe) ou de détacher un élément particulier.
attacher()
Pour attacher un nouvel élément à un objet info-bulle, indiquez simplement l'objet info-bulle, le point d'accrochage sur .attach ();, et placez enfin le sélecteur d'élément entre crochets ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Cette méthode fonctionne exactement comme la méthode .attach, mais le résultat est complètement le contraire. Tout d'abord, indiquez l'objet tip, puis ajoutez .dettach (), et enfin placez votre sélecteur d'élément dans ().
Syntax
toolTips.dettach('#tooltipID3');Example
Prenons un exemple qui explique l'info-bulle. Jetez un œil au code suivant.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Vous recevrez la sortie suivante -
Output