MooTools - Descrizioni comandi
MooTools fornisce diversi suggerimenti per progettare stili ed effetti personalizzati. In questo capitolo apprenderemo le varie opzioni ed eventi dei suggerimenti, oltre ad alcuni strumenti che ti aiuteranno ad aggiungere o rimuovere i suggerimenti dagli elementi.
Creazione di un nuovo suggerimento
La creazione di una descrizione comando è molto semplice. Per prima cosa, dobbiamo creare l'elemento in cui allegheremo il suggerimento. Prendiamo un esempio che crea un tag di ancoraggio e lo aggiunge alla classe Tips nel costruttore. Dai un'occhiata al seguente codice.
<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>Dai un'occhiata al codice utilizzato per creare il tooltip.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Esempio
Il seguente esempio spiega l'idea di base di Tooltips. Dai un'occhiata al seguente codice.
<!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>Riceverai il seguente output:
Produzione
Opzioni tooltip
Ci sono solo cinque opzioni in Suggerimenti e sono tutte abbastanza autoesplicative.
showDelay
Un numero intero misurato in millisecondi, questo determinerà il ritardo prima che il suggerimento venga visualizzato una volta che l'utente posiziona il mouse sull'elemento. L'impostazione predefinita è 100.
hideDelay
Proprio come showDelay sopra, questo numero intero (misurato anche in millisecondi) determina quanto tempo aspettare prima di nascondere il suggerimento una volta che l'utente lascia l'elemento. L'impostazione predefinita è 100.
nome della classe
Ciò consente di impostare un nome di classe per il wrapping della descrizione comando. L'impostazione predefinita è Null.
Compensare
Questo determina quanto lontano dall'elemento apparirà il suggerimento. 'x' si riferisce all'offset destro, dove 'y' è l'offset in basso (entrambi relativi al cursore SE l'opzione 'fixed' è impostata su false, altrimenti l'offset è relativo all'elemento originale). L'impostazione predefinita è x: 16, y: 16
Fisso
Questo imposta se il tooltip seguirà il tuo mouse se ti muovi intorno all'elemento. Se lo imposti su true, la descrizione comando non si sposterà quando sposti il cursore, ma rimarrà fissa rispetto all'elemento originale. L'impostazione predefinita è false.
Eventi tooltip
Gli eventi del tooltip rimangono semplici, come il resto di questa classe. Ci sono due eventi, onShow e onHide, e funzionano come ci si aspetterebbe.
onShow ()
Questo evento viene eseguito quando viene visualizzato il suggerimento. Se si imposta un ritardo, questo evento non verrà eseguito fino a quando il ritardo non è scaduto.
onHide ()
Il tooltip si nasconde con l'esecuzione di questo evento. Se c'è un ritardo, questo evento non verrà eseguito fino a quando il ritardo non sarà scaduto.
Metodi tooltip
Esistono due metodi per le descrizioni comandi: collega e scollega. Ciò consente di scegliere come target un elemento specifico e aggiungerlo a un oggetto tooltip (e quindi, inerente a tutte le impostazioni in quell'istanza di classe) o staccare un particolare elemento.
allegare ()
Per attaccare un nuovo elemento a un oggetto tooltip, è sufficiente indicare l'oggetto tip, virare su .attach (); e infine posizionare il selettore di elementi tra parentesi ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Questo metodo funziona esattamente come il metodo .attach, ma il risultato è completamente l'opposto. Innanzitutto, indica l'oggetto tip, quindi aggiungi .dettach () e infine posiziona il selettore di elementi all'interno ().
Syntax
toolTips.dettach('#tooltipID3');Example
Prendiamo un esempio che spieghi il tooltip. Dai un'occhiata al seguente codice.
<!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>Riceverai il seguente output:
Output