2020年9月9日 星期三

jQuery UI 學習筆記 (十五) : 工具提示 (Tooltips)

最近暫停 R 語言的學習回頭整理 jQuery UI 筆記已近三周, 快到尾聲了加油! 本篇要測試的元件是工具提示 (Tooltip) 效果, 雖然在 jQuery UI 中這不算重要元件, 但鮮花也要配個好花瓶才能相得益彰不是嗎?

Tooltip API 與教學文件參考 :

# https://jqueryui.com/tooltip/
# http://api.jqueryui.com/tooltip/

jQuery UI 參考書籍如下 :
  1. jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
  2. jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
  3. jQuery 全能權威指南 (上奇, 張亞飛)
  4. Pro jQuery 2.0 2nd ed. (Apress, Freeman Adam)
  5. jQuery UI in Action (Manning, TJ Vantoll)
  6. jQuery 應用程式設計極速上手 (上奇, 羅友志譯)
  7. 打造 jQuery 網頁風暴 (張子秋, 佳魁)
主要參考書目為 No.5 的 jQuery UI in Action 這本.

工具提示是 HTML 元素的 title 屬性所提供的功能, 當滑鼠移動到元素上 (hover) 時就會出現一個方框顯示訊息, 這對表單輸入非常有用, 可提醒使用者如何填寫, 但原始 HTML 的 title 提示功能有下列缺點 :
  1. 外觀與顯示時間, 時長以及位置無法控制.
  2. 顯示內容只能是純文字, 無法使用 HTML, 且顯示效果隨瀏覽器而異.
例如 :


測試 1 : 原始的 HTML 元素 title 屬性提示效果 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <label for="account">帳號</label>
    <input type="text" id="account" title="請輸入帳號"><br>
    <label for="password">密碼</label>
    <input type="password" id="password" title="請輸入密碼(英數字)">
    <button title="提交">登入</button>
    <script>
      $(function(){
        $("button").button();
        });
    </script>
  </body>
</html>

結果如下 :




可見帶 title 屬性的 input 與 button 元素, 其提示訊息就是一個非常陽春的方框. 但若取得這些有 title 屬性元件的 jQuery 物件後呼叫 tooltip() 方法則可美化工具提示框, 並且有跨瀏覽器一致的視覺效果 :

$("input").tooltip();
$("buttont").tooltip();

或者用 document 取得 HTML 文件內的全部元素之 jQuery 物件集合, 這樣全部具有 title 屬性之元素都會套用工具提示效果 :

$(document).tooltip();

例如 :


測試 2 : 呼叫 tooltip() 初始化工具提示效果 : 提示內容寫在 title 屬性中 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <label for="account">帳號</label>
    <input type="text" id="account" title="請輸入帳號"><br>
    <label for="password">密碼</label>
    <input type="password" id="password" title="請輸入密碼(英數字)">
    <button title="提交">登入</button>
    <script>
      $(function(){
        $("button").button();
        $('input').addClass("ui-widget ui-widget-content ui-corner-all");
        $('input').height($("button").innerHeight());
        $(document).tooltip();
        });
    </script>
  </body>
</html>

結果如下 :




可見當滑鼠移到每一個含有 title 屬性的元素時都會跳出具有陰影的美美提示了.

"jQuery UI in Action" 這本書裡提到即使是在呼叫 tooltip() 後才加入的元素仍然有效, 例如 :


測試 3 : 呼叫 tooltip() 初始化後再動態加入之元素仍然有效 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <script>
      $(function(){
        $(document).tooltip();
        $('body').html("<input type='text' title='帳號'><br>");
        $('body').append("<input type='text' title='密碼'>");
        });
    </script>
  </body>
</html>

此例網頁中 body 內原本並無任何表單元素, 我們是在呼叫了 tooltip() 之後再呼叫 html() 與 append() 方法添加兩個 text input, 結果如下 :



可見在呼叫 tooltip() 後才動態加入 DOM 樹狀結構中的元素仍然會套用 Tootip 效果.

jQuery UI 的工具提示元件提供了許多選項屬性可用來設定 tooltip 之功能, 其中比較重要的是 content 與 position, 分別用來設定提示內容與出現之位置.

在提示內容不一定要預先寫在元素的 title 屬性中, 可以在呼叫 tooltip() 初始化元素之工具提示功能時傳入含有 content 屬性之選項物件去設定, 其值可以是字串或函數, 此函數要 return 提示訊息字串 :

obj.tooltip({content: "提示訊息"});
obj.tooltip({content: function(){return "提示訊息"}});

例如 :


測試 4 : 呼叫 tooltip() 初始化工具提示效果 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <label for="account">帳號</label>
    <input type="text" id="account" title=""><br>
    <label for="password">密碼</label>
    <input type="password" id="password" title="">
    <script>
      $(function(){
        $("#account").tooltip({content: "<b>請輸入帳號</b>"});
        $("#password").tooltip({
          content: function() {return "<i>請輸入密碼(英數字)</i>";}     
          });
        });
    </script>
  </body>
</html>

此例中兩個 text input 元素的工具提示訊息並非事先寫在 title 屬性中, 而是在呼叫 tooltip() 進行初始化時以 content 選項設定, 第一個 text input 的 content 屬性直接用字串, 第二個則用函數傳回字串, 這個做法的好處是可使用 HTML 語法來呈現提示內容, 因為在 title 屬性中無法使用 HTML 標籤, 結果如下 :




可見 content 中的粗體元素 b 與斜體元素 i 都顯現效果於提示訊息中. 注意, 雖然提示訊息改在 content 中設定, 但是 title 屬性還是必須存在, 因為 tooltip() 的作用對向必須具有 title 屬性, 只要賦予空值即可.

除了在初始化時用選項物件設定外, 也可以在初始化後用 option 方法來設定 content 屬性 :

obj.tootip("option", "content", "提示訊息")
obj.tootip("option", "content", "提示訊息")


測試 5 : 初始化後用 option 方法設定 content 屬性 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <label for="account">帳號</label>
    <input type="text" id="account" title=""><br>
    <label for="password">密碼</label>
    <input type="password" id="password" title="">
    <script>
      $(function(){
        $("#account").tooltip();       //一定要先初始化
        $("#password").tooltip();     //一定要先初始化
        $("#account").tooltip("option", "content", "<b>請輸入帳號</b>");
        $("#password").tooltip("option", "content", "<i>請輸入密碼(英數字)</i>");
        });
    </script>
  </body>
</html>

此例先呼叫 tooltip() 初始化後再呼叫 option 方法去設定 content 屬性, 結果與上面範例 4 一樣. 注意, 一定要先做初始化才能呼叫 option 方法, 否則會出現物件不存在之錯誤訊息. 同樣地, 表單元素中也一定要有 title 屬性.

工具提示元件預設會套用到具有 title 屬性的元素上, 但這可以在初始化時用 items 選項來設定, 例如 id 屬性可用 [id], 另外圖片的提示是放在 alt 屬性上則指定為 img[alt], 如果要指定到任何元素則用 * :

obj.tooltip({itmes: "[id]"});         //將提示套用到有 id 屬性的元素上
obj.tooltip({itmes: "img[alt]"});  //將提示套用到有 alt 屬性的 img 元素上
obj.tooltip({itmes: "*"});             //將提示套用到所有元素上

也可以在初始化後利用 option 方法設定 items 選項 :

obj.tootip();
obj.tootip("option", "items", "[id]");

例如 :

測試 6 : 初始將工具提示套用到所有元素上 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <label for="account">帳號</label>
    <input type="text" id="account"><br>
    <label for="password">密碼</label>
    <input type="password" id="password">
    <script>
      $(function(){
        $("#account").tooltip({
          content: function() {return this.id},
          items: "[id]" 
          });
        $("#password").tooltip({
          content: "<i>請輸入密碼(英數字)</i>",
          items: "*" 
          });
        });
    </script>
  </body>
</html>

此例中兩個 input 元素並無 title 屬性, 但透過初始化時以 items 屬性指定套用的對象, 前者為套用到有 id 屬性者 (items: "[id]"), 後者為套用到任何元素 (items: "*"), 這就更改了預設對象為具有 title 屬性者, 因此仍能正常顯示工具提示訊息, 如果少了 items 選項就不會顯示了, 結果如下 :



由於 id=account 的 input 元素其提示訊息為透過函數傳回本身 id, 故提示訊息為 account.

張貼者： 於
標籤： , ,

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )