MooTools - 工具提示

上一頁
下一頁

MooTools 提供不同的工具提示來設計自定義樣式和效果。本章我們將學習工具提示的各種選項和事件，以及一些幫助您向元素新增或刪除工具提示的工具。

建立新的工具提示

建立工具提示非常簡單。首先，我們必須建立我們將附加工具提示的元素。讓我們來看一個建立錨標記並將其新增到建構函式中 Tips 類的示例。請看下面的程式碼。

<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
   rel = "here is the default 'text' for toll tip demo" 
   href = "https://tutorialspoint.tw">Tool tip _demo</a>

請檢視用於建立工具提示的程式碼。

var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);

示例

以下示例解釋了工具提示的基本思想。請看下面的程式碼。

<!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 = "https://tutorialspoint.tw">Tool tip _demo</a>
   </body>
   
</html>

您將收到以下輸出：

輸出

工具提示選項

Tips 中只有五個選項，而且它們都非常不言自明。

showDelay

以毫秒為單位的整數，這將決定使用者將滑鼠移到元素上後顯示工具提示之前的延遲。預設設定為 100。

hideDelay

與上面的 showDelay 一樣，這個整數（也以毫秒為單位）決定了使用者離開元素後等待多長時間才能隱藏提示。預設設定為 100。

className

這允許您為工具提示包裝器設定一個類名。預設設定為 Null。

Offset

這決定了工具提示與元素的距離。“x”指的是右側偏移量，“y”指的是向下偏移量（如果“fixed”選項設定為 false，則相對於游標，否則偏移量相對於原始元素）。預設為 x: 16, y: 16

Fixed

這設定瞭如果您在元素周圍移動滑鼠，工具提示是否會跟隨您的滑鼠。如果您將其設定為 true，則當您移動游標時，工具提示不會移動，但會相對於原始元素保持固定。預設設定為 false。

工具提示事件

與該類的其餘部分一樣，工具提示事件仍然很簡單。有兩個事件——onShow 和 onHide，它們的工作方式與您預期的一樣。

onShow()

當工具提示出現時，此事件將執行。如果您設定了延遲，則此事件只有在延遲結束後才會執行。

onHide()

工具提示在此事件執行時隱藏。如果有延遲，則此事件只有在延遲結束後才會執行。

工具提示方法

工具提示有兩種方法——attach 和 detach。這允許您定位特定元素並將其新增到工具提示物件（從而繼承該類例項中的所有設定）或分離特定元素。

attach()

要將新元素附加到工具提示物件，只需宣告提示物件，然後新增 .attach();，最後將元素選擇器放在括號 () 中。

語法

toolTips.attach('#tooltipID3');

dettach()

此方法的工作方式與 .attach 方法相同，但結果完全相反。首先，宣告提示物件，然後新增 .dettach()，最後將您的元素選擇器放在 () 中。

語法

toolTips.dettach('#tooltipID3');

示例

讓我們來看一個解釋工具提示的示例。請看下面的程式碼。

<!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 = "https://tutorialspoint.tw">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 = "https://tutorialspoint.tw">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 = "https://tutorialspoint.tw">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 = "https://tutorialspoint.tw">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 = "https://tutorialspoint.tw/">A differently styled tool tip</a></p>
         
   </body>
</html>

您將收到以下輸出：

輸出

列印頁面
上一頁
下一頁
廣告
© . All rights reserved.