2020年9月11日 星期五

jQuery UI 學習筆記 (十六) : 凸顯 (Hightlight) 與錯誤 (Error) 訊息

經過一個月來的努力, 終於來到 jQuery UI 元件測試的尾聲, 本篇測試的對象是用來在網頁中凸顯重要性或輸出錯誤訊息的 Highlight 與 Error 元件. 其 API 與教學文件參考 :

https://jqueryui.com/height/
http://api.jqueryui.com/height/
https://jqueryui.com/error/
http://api.jqueryui.com/error/

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 這本.

    嚴格來說這兩個元件其實只是套用了 jQuery UI 特定樣式類別的 H1~H3, P, 或 DIV 等區塊式元素, 使用時並不需要呼叫物件方法加以初始化.

    Highlight 元件的的樣式類別為 "ui-state-highlight", 其外觀為黃底訊息框; 而 Error 元件之樣式類別為 "ui-state-error", 其外觀為紅底訊息框, 通常為了美觀都會再加上圓角樣式 "ui-corner-all", 例如 :


    測試 1 : 凸顯訊息 (highlight) 的效果 [看原始碼]

    <!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>
        <div class="ui-state-highlight ui-corner-all" style="padding: 5px; margin: 5px;">
          <p>
            <span class="ui-icon ui-icon-info"></span>
            <span style="font-weight: bold;">您的密碼將在 5 日後到期.</span>
          </p>
        </div>
        <h3 class="ui-state-highlight ui-corner-all" style="padding: 5px; margin: 5px;">
          <p>
            <span class="ui-icon ui-icon-info"></span>
            <span style="font-weight: bold;">您的密碼將在 5 日後到期.</span>
          </p>
        </h3>
        <p class="ui-state-highlight ui-corner-all" style="padding: 5px; margin: 5px;">
          <span class="ui-icon ui-icon-info"></span>
          <span style="font-weight: bold;">您的密碼將在 5 日後到期.</span>
        </p>
        <script>
          $(function(){
            });
        </script>
      </body>
    </html>

    此例中有三個凸顯訊息, 分別用 div, h1~h6, 以及 p 元素當容器, 只要為其套用 "ui-state-highlight ui-corner-all" 樣式類別, 即可將其改裝成圓角黃底外觀的訊息容器, 其內容通常會用兩個 span 元素包起來, 第一個 span 元素用來放置 icon 小圖示, 這只要套用 jQuery UI 內見的小圖示樣式類別即可, 例如 "ui-icon ui-icon-info" (i 圖示), 更多 icon 樣式類別參考 :

    https://api.jqueryui.com/resources/icons-list.html

    訊息內容的第二個 span 元素則用來包覆文字訊息, 結果如下 :




    可見用 p 元素的訊息容器高度會比較貼近訊息高度.

    錯誤訊息類似凸顯訊息, 差別只是訊息容器套用 "ui-state-error ui-corner-all" 樣式類別, 而小圖示改為 "ui-icon ui-icon-alert" 樣式類別而已, 例如 :


    測試 2 : 錯誤訊息 (error) 的效果 [看原始碼]

    <!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>
        <div class="ui-state-error ui-corner-all" style="padding: 5px; margin: 5px;">
          <p>
            <span class="ui-icon ui-icon-alert"></span>
            <span style="font-weight: bold;">您輸入的帳號或密碼錯誤.</span>
          </p>
        </div>
        <h3 class="ui-state-error ui-corner-all" style="padding: 5px; margin: 5px;">
          <p>
            <span class="ui-icon ui-icon-alert"></span>
            <span style="font-weight: bold;">您輸入的帳號或密碼錯誤.</span>
          </p>
        </h3>
        <p class="ui-state-error ui-corner-all" style="padding: 5px; margin: 5px;">
          <span class="ui-icon ui-icon-alert"></span>
          <span style="font-weight: bold;">您輸入的帳號或密碼錯誤.</span>
        </p>
        <script>
          $(function(){
            });
        </script>
      </body>
    </html>

    結果如下 :




    當然也可以選擇其他的小圖示, 但 ! 圖示應該是蠻適合表示錯誤意涵的.

    到此終於把 jQuery UI 的全部元件用法都測完了, 大功告成, 收兵!

    # jQuery UI 學習筆記索引

    (這是第一個將全部主題寫完的學習筆記耶)

    沒有留言 :