jQuery UI - 工具提示

上一頁
下一頁

jQuery UI 的工具提示小部件替換了原生工具提示。此小部件添加了新的主題並允許自定義。首先讓我們瞭解什麼是工具提示？工具提示可以附加到任何元素。要顯示工具提示，只需向輸入元素新增title屬性，標題屬性值將用作工具提示。當您將滑鼠懸停在元素上時，標題屬性將顯示在元素旁邊的一個小方框中。

jQuery UI 提供了tooltip()方法，可以向您想要顯示工具提示的任何元素新增工具提示。與僅切換可見性相比，這預設情況下會提供淡入淡出動畫以顯示和隱藏工具提示。

語法

tooltip()方法可以兩種形式使用：

$(selector, context).tooltip (options) 方法

tooltip (options)方法宣告可以向HTML元素新增工具提示。options引數是一個物件，用於指定工具提示的行為和外觀。

語法

$(selector, context).tooltip(options);

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：

$(selector, context).tooltip({option1: value1, option2: value2..... });

下表列出了可與此方法一起使用的不同options：

序號 選項和說明
1 content

此選項表示工具提示的內容。預設值為返回 title 屬性的函式。

選項 - content

此選項表示工具提示的內容。預設值為返回 title 屬性的函式。它可以是以下型別：

  • 函式 - 回撥函式可以直接返回內容，或者呼叫第一個引數，傳入內容，例如對於 ajax 內容。

  • 字串 - 用於工具提示內容的HTML字串。

語法

$(".selector").tooltip(
   { content: "Some content!" }
);
2 disabled

將此選項設定為true會停用工具提示。預設值為false。

選項 - disabled

將此選項設定為true會停用工具提示。預設值為false。

語法

$(".selector").tooltip(
   { disabled: true }
);
3 hide

此選項表示隱藏工具提示時的動畫效果。預設值為true。

選項 - hide

此選項表示隱藏工具提示時的動畫效果。預設值為true。它可以是以下型別：

  • 布林值 - 可以是true或false。設定為true時，工具提示將以預設持續時間和預設緩動效果淡出。

  • 數字 - 工具提示將以指定的持續時間和預設緩動效果淡出。

  • 字串 - 工具提示將使用指定的效果隱藏，例如"slideUp", "fold"。

  • 物件 - 可能的值是effect, delay, duration,和easing。

語法

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
4 items

此選項指示哪些專案可以顯示工具提示。預設值為[title]。

選項 - items

此選項指示哪些專案可以顯示工具提示。預設值為[title]。

語法

$(".selector").tooltip(
   { items: "img[alt]" }
);
5 position

此選項決定工具提示相對於關聯的目標元素的位置。預設值為返回 title 屬性的函式。可能的值為：my, at, of, collision, using, within.

選項 - position

此選項決定工具提示相對於關聯的目標元素的位置。預設值為返回 title 屬性的函式。可能的值為：my, at, of, collision, using, within.

語法

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
6 show

此選項表示如何設定工具提示的顯示動畫。預設值為true。

選項 - show

此選項表示如何設定工具提示的顯示動畫。預設值為true。它可以是以下型別：

  • 布林值 - 可以是true或false。設定為true時，工具提示將以預設持續時間和預設緩動效果淡出。

  • 數字 - 工具提示將以指定的持續時間和預設緩動效果淡出。

  • 字串 - 工具提示將使用指定的效果隱藏，例如"slideUp", "fold"。

  • 物件 - 可能的值是effect, delay, duration,和easing。

語法

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
7 tooltipClass

此選項是一個類，可以新增到工具提示小部件中，用於警告或錯誤之類的工具提示。預設值為null。

選項 - tooltipClass

此選項是一個類，可以新增到工具提示小部件中，用於警告或錯誤之類的工具提示。預設值為null。

語法

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
8 track

將此選項設定為true時，工具提示將跟隨/跟蹤滑鼠。預設值為false。

選項 - track

將此選項設定為true時，工具提示將跟隨/跟蹤滑鼠。預設值為false。

語法

$(".selector").tooltip(
   { track: true }
);

下一節將向您展示一些關於工具提示功能的實際示例。

預設功能

以下示例演示了工具提示功能的簡單示例，未向tooltip()方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

讓我們將以上程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

在上面的示例中，將滑鼠懸停在上面的連結上或使用Tab鍵迴圈在每個元素上切換焦點。

使用內容、跟蹤和停用

以下示例顯示了在 jQuery UI 的 tooltip 函式中使用三個重要選項(a) content (b) track和(c) disabled。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

讓我們將以上程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

在上面的示例中，第一個框的工具提示內容是使用content選項設定的。您還可以注意到工具提示跟隨滑鼠。第二個輸入框的工具提示被停用了。

使用位置

以下示例顯示了在 jQuery UI 的 tooltip 函式中使用選項position。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

讓我們將以上程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：

在上面的示例中，工具提示位置設定在輸入框的頂部。

$(selector, context).tooltip ("action", [params]) 方法

tooltip (action, params)方法可以對工具提示元素執行操作，例如停用工具提示。action在第一個引數中指定為字串，並且可以根據給定的操作選擇性地提供一個或多個params。

基本上，這裡的操作只不過是以字串形式使用的 jQuery 方法。

語法

$(selector, context).tooltip ("action", [params]);

下表列出了此方法的操作：

序號 操作和說明
1 close()

此操作關閉工具提示。此方法不接受任何引數。

操作 - close()

此操作關閉工具提示。此方法不接受任何引數。

語法

$(".selector").tooltip("close");
2 destroy()

此操作完全刪除工具提示功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

操作 - destroy()

此操作完全刪除工具提示功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。

語法

$(".selector").tooltip("destroy");
3 disable()

此操作停用工具提示。此方法不接受任何引數。

操作 - disable()

此操作停用工具提示。此方法不接受任何引數。

語法

$(".selector").tooltip("disable");
4 enable()

此操作啟用工具提示。此方法不接受任何引數。

操作 - enable()

此操作啟用工具提示。此方法不接受任何引數。

語法

$(".selector").tooltip("enable");
5 open()

此操作以程式設計方式開啟工具提示。此方法不接受任何引數。

操作 - open()

此操作以程式設計方式開啟工具提示。此方法不接受任何引數。

語法

$(".selector").tooltip("open");
6 option( optionName )

此操作獲取與工具提示關聯的optionName的值。此方法不接受任何引數。

操作 - option( optionName )

此操作獲取與工具提示關聯的optionName的值。此方法不接受任何引數。

語法

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7 option()

此操作獲取一個包含鍵/值對的物件，表示當前工具提示選項雜湊。此方法不接受任何引數。

操作 - option()

此操作獲取一個包含鍵/值對的物件，表示當前工具提示選項雜湊。此方法不接受任何引數。

語法

$(".selector").tooltip("option");
8 option( optionName, value )

此操作設定與指定的optionName關聯的工具提示選項的值。

操作 - option( optionName, value )

此操作設定與指定的optionName關聯的工具提示選項的值。

語法

$( ".selector" ).tooltip( "option", "disabled", true );
9 option( options )

此操作為工具提示設定一個或多個選項。

操作 - option( options )

此操作為工具提示設定一個或多個選項。

語法

$( ".selector" ).tooltip( "option", { disabled: true } );
10 widget()

此操作返回一個包含原始元素的 jQuery 物件。此方法不接受任何引數。

操作 - widget()

此操作返回一個包含原始元素的 jQuery 物件。此方法不接受任何引數。

語法

$(".selector").tooltip("widget");

示例

現在讓我們看看一個使用上表中操作的示例。以下示例演示了操作disable和enable的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

讓我們將以上程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：

在上面的示例中，單擊myBtn按鈕，就會彈出一個工具提示。

工具提示元素上的事件管理

除了我們在前面幾節中看到的 tooltip (options) 方法之外，jQuery UI 還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：

序號 事件方法和說明
1 create(event, ui)

建立工具提示時觸發。其中event的型別為Event，ui的型別為Object。

事件 - create(event, ui)

建立工具提示時觸發。其中event的型別為Event，ui的型別為Object。

語法

$(".selector").tooltip(
   create: function(event, ui) {}
);
2 close(event, ui)

關閉工具提示時觸發。通常在focusout或mouseleave時觸發。其中event的型別為Event，ui的型別為Object。

事件 - close(event, ui)

關閉工具提示時觸發。通常在focusout或mouseleave時觸發。其中event的型別為Event，ui的型別為Object。ui的可能值為：

  • tooltip - 生成的工具提示元素。

語法

$(".selector").tooltip(
   close: function(event, ui) {}
);
3 open(event, ui)

顯示工具提示時觸發。通常在focusin或mouseover時觸發。其中event的型別為Event，ui的型別為Object。

事件 - open(event, ui)

顯示工具提示時觸發。通常在focusin或mouseover時觸發。其中event的型別為Event，ui的型別為Object。ui的可能值為：

  • tooltip - 生成的工具提示元素。

語法

$(".selector").tooltip(
   open: function(event, ui) {}
);

示例

以下示例演示了工具提示功能期間事件方法的使用。此示例演示了open和close事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：

在上面的示例中，Hover over me!的工具提示會立即消失，而Hover over me too!的工具提示會在1000毫秒的持續時間後淡出。

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