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