MooTools - podpowiedzi
MooTools udostępnia różne podpowiedzi do projektowania niestandardowych stylów i efektów. W tym rozdziale poznamy różne opcje i zdarzenia podpowiedzi, a także kilka narzędzi, które pomogą Ci dodawać lub usuwać podpowiedzi z elementów.
Tworzenie nowej podpowiedzi
Tworzenie podpowiedzi jest bardzo proste. Najpierw musimy stworzyć element, do którego dołączymy podpowiedź. Weźmy przykład, który tworzy znacznik kotwicy i dodaje go do klasy Tips w konstruktorze. Spójrz na poniższy kod.
<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>Spójrz na kod używany do tworzenia podpowiedzi.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);Przykład
Poniższy przykład wyjaśnia podstawową koncepcję etykiet narzędzi. Spójrz na poniższy kod.
<!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>Otrzymasz następujący wynik -
Wynik
Opcje podpowiedzi
W poradach jest tylko pięć opcji i wszystkie są dość oczywiste.
showDelay
Liczba całkowita mierzona w milisekundach, określa opóźnienie przed wyświetleniem podpowiedzi, gdy użytkownik umieści kursor myszy na elemencie. Wartość domyślna to 100.
hideDelay
Podobnie jak showDelay powyżej, ta liczba całkowita (również mierzona w milisekundach) określa, jak długo należy czekać przed ukryciem wskazówki, gdy użytkownik opuści element. Wartość domyślna to 100.
Nazwa klasy
Pozwala to ustawić nazwę klasy dla zawijania podpowiedzi. Wartość domyślna to Null.
Offsetowy
To określa, jak daleko od elementu pojawi się podpowiedź. „x” odnosi się do prawego przesunięcia, gdzie „y” jest dolnym przesunięciem (oba w stosunku do kursora, JEŚLI opcja „stała” jest ustawiona na fałsz, w przeciwnym razie przesunięcie odnosi się do oryginalnego elementu). Wartość domyślna to x: 16, y: 16
Naprawiony
To określa, czy podpowiedź podąży za twoją myszą, jeśli będziesz poruszać się po elemencie. Jeśli ustawisz ją na wartość true, podpowiedź nie będzie się przesuwać podczas przesuwania kursora, ale pozostanie nieruchoma względem oryginalnego elementu. Wartość domyślna to false.
Zdarzenia podpowiedzi
Zdarzenia podpowiedzi pozostają proste, podobnie jak reszta tej klasy. Istnieją dwa zdarzenia - onShow i onHide, które działają zgodnie z oczekiwaniami.
na wystawie()
To zdarzenie jest wykonywane, gdy pojawia się podpowiedź. Jeśli ustawisz opóźnienie, to zdarzenie nie będzie wykonywane, dopóki opóźnienie nie nadejdzie.
onHide ()
Podpowiedź ukrywa się po wykonaniu tego zdarzenia. Jeśli wystąpi opóźnienie, to zdarzenie nie zostanie wykonane, dopóki opóźnienie się nie skończy.
Metody podpowiedzi
Istnieją dwie metody tworzenia etykiet narzędzi - dołączanie i odłączanie. Pozwala to wskazać określony element i dodać go do obiektu podpowiedzi (a tym samym nieodłącznie związanych z wszystkimi ustawieniami w tej instancji klasy) lub odłączyć określony element.
dołączać()
Aby dołączyć nowy element do obiektu podpowiedzi, po prostu wskaż obiekt tip, przypięcie na .attach (); i na koniec umieść selektor elementu w nawiasach kwadratowych ().
Syntax
toolTips.attach('#tooltipID3');odłącz ()
Ta metoda działa tak samo jak metoda .attach, ale wynik jest zupełnie odwrotny. Najpierw określ obiekt tip, następnie dodaj .dettach (), a na koniec umieść selektor elementu wewnątrz ().
Syntax
toolTips.dettach('#tooltipID3');Example
Weźmy przykład, który wyjaśnia podpowiedź. Spójrz na poniższy kod.
<!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>Otrzymasz następujący wynik -
Output