# https://jqueryui.com/height/
# http://api.jqueryui.com/height/
# https://jqueryui.com/error/
# http://api.jqueryui.com/error/
jQuery UI 參考書籍如下 :
- jQuery UI 使用者介面設計 (歐萊里, Studio Tib. 譯)
- jQuery UI 與 Plugin 開發實戰 (悅知文化, 吳哲穎譯)
- jQuery 全能權威指南 (上奇, 張亞飛)
- Pro jQuery 2.0 2nd ed. (Apress, Freeman Adam)
- jQuery UI in Action (Manning, TJ Vantoll)
- jQuery 應用程式設計極速上手 (上奇, 羅友志譯)
- 打造 jQuery 網頁風暴 (張子秋, 佳魁)
嚴格來說這兩個元件其實只是套用了 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 學習筆記索引
(這是第一個將全部主題寫完的學習筆記耶)
沒有留言 :
張貼留言