2022年12月30日 星期五
jQuery UI 學習筆記 (十七) : 用下拉式選單做倒數日數計數器
2022年12月28日 星期三
jQuery UI SPA 函式庫索引
# jQuery UI SPA 應用程式 (一) : 環境配置與程式架構
# jQuery UI SPA 應用程式 (二) : 動態表格 DataTables
# jQuery UI SPA 應用程式 (三) : 按鈕與對話盒
# jQuery UI SPA 應用程式 (四) : 檔案處理函式庫
最近打算用這些函式庫打造新的維運工具, 可能會常常查閱.
2021年6月12日 星期六
GitHub 個人網站設計 (一) : 頁首 logo 與主架構
2020年10月29日 星期四
用 PHP 與 jQuery Ajax 存取資料庫 (習題)
前陣子網友詢問如何依據輸入的身分證從資料庫中提取有效日期且可進行修改, 參考下面這篇底下的留言 :
# 測試 jQuery 的 Ajax 函數 $.ajax()
因我這陣子在忙 jQuery Mobile 沒時間思考, 今天稍微告一段落, 就來做一下這道習題, 順便複習一下 jQuery UI 與 PHP, 久沒做還真的會生鏽. 此測試參考了之前的文章 :
首先在 MySQL 建一個資料表 pid_valid_date, 根據網友問題描述, 需要兩個欄位 :
- pid : varchar(10) 儲存身分證
- valid_date : varchar(10) 儲存 YYYY-MM-DD 格式之有效日期
建資料表的 SQL 指令如下 :
建好後輸入如下測試資料, SQL 指令為 :
下面是只用 HTML5+jQuery 的範例 :
測試 1 : 使用 HTML5 原生元件 [看原始碼]
此例網頁中有三個元件 : 一個用來選擇身分證字號的下拉式選單, 一個用來顯示有效期限的單行文字欄位, 以及一個更新按鈕. 下拉式選單初始僅有提示用的文字選項, 身分證選項是透過 Ajax 向後端程式 get_pid.php 從資料庫取得, 此程式內容如下 :
此 PHP 程式會搜尋資料表 pid_valid_date 的 pid 欄位, 並在碟帶回圈中製作 option 元素組成的 HTML 回應字串, 此字串會在回應給前端網頁時傳入 append() 方法插入預設的 option 後面. 結果如下 :
選取身分證字號會產生 change 事件並攜帶 pid 參數向後端程式 get_valid_date.php 提出 Ajax 請求, 此程式會搜尋 pid_valid_date 資料表中該 pid 的 valid_date 欄位值後傳回, 前端網頁收到回應後將其填入 valid_date 單行文字欄位中, 程式內容如下 :
測試 2 : 使用 jQueryUI 元件 [看原始碼]
將將, 完成啦!
2020年9月18日 星期五
Javascript 函數傳回 return false 的問題
- href="#" : 表示導向該網頁中的一個錨點 (anchor)
- href="hello.htm" : 表示導向此網站的另一個網頁 hello.htm
- href="http://www.foo.com/bar.htm" : 表示導向另一個網站之網頁
測試 1 : 超連結導向本網頁錨點 href="#" [看原始碼]
傳回 false 常見於將 a 元素當作按鈕用時, 當按下按鈕會執行事件處理函數, 如果不禁止其執行預設之網頁重導向動作, 事件處理函數執行完後網頁會回到網頁最上方 (href="#" 的預設動作), 造成網頁移動的不好觀感, 例如 :
但是在 "jQuery 應用程式設計極速上手" (Jay Blanchard, 上奇) 這本書裡的第 1-15 頁提到, 使用 return false 來停止預設動作可能會有問題, 因為 return false 實際上會先後呼叫事件物件 e 的e.preventDefault() 與 e.stopPropogation() 函數, 前者會停止預設動作, 後者會停止事件上升 (bubble up) 功能, 因此會把之後加入之超連結的 click 事件給阻擋掉, 使得預期的功能沒有出現.
比較妥當的做法應該是呼叫 preventDefault() 即可而不是 return false :
2020年9月12日 星期六
一個 jQuery UI 的 Web App 介面架構
上面的主導覽區作者使用精靈動畫 (sprite) 來製作圖片超連結; 次導覽區使用手風琴 (accordion, 摺疊選單), 右側則是透過 Ajax 方式載入之內容區.
作者曾為此書設立如下網站以便讀者可下載範例程式碼, 但現在已經關站了 :
# http://www.appliedjquery.com (無法連接)
於是我只好照書本內容逐一拼湊出原始程式樣貌 (但沒有處理上方主導覽區的精靈動畫, 因為我覺得有點複雜), 紀錄如下 :
測試 1 : jQuery UI 單頁應用程式 [看原始碼]
<!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;
height: 100%;
margin: 0px auto;
overflow-x: auto !important;
overflow-y: hidden !important
}
.ui-widget {font-size:80%;}
#mainNavBar {height: 75px;
padding: 0px 0px 0px 25px;
}
#content1 {width: 20%;
height: 80%;
background-color: transparent;
vertical-align: bottom;
float: left;
margin: 5px 5px 0px 10px;
position: relative;
bottom: 0px;
}
#contentArea1 {position: relative;
padding: 10px;
}
#content2 {width: 77%;
height: 80%;
background-color: transparent;
vertical-align: top;
float: left;
margin: 5px 5px 0px 0px;
position: relative;
}
#contentArea2 {position: relative;
padding: 10px;
overflow: auto;
}
#footer {width: 99%;
height: 75px;
position: absolute;
bottom: 0px;
margin: 5px 5px 0px 5px;
}
#mainNavBar, content1, #content2, #footer {
border: 1px dashed #ffff00;
}
#contentArea1, #contentArea2 {
border: 1px dashed #00ff00;
}
</style>
</head>
<body>
<!--上方主導覽列-->
<div id="mainNavBar">
</div>
<!--左方次導覽列-->
<div id="content1">
<div id="contentArea1">
<div id="accordion">
<h2><a href="#">第 1 列標題</a></h2>
<div>
<ul style="padding: 0px; margin: 0px;">
<li><a href="http://www.google.com.tw">Google</a></li>
<li><a href="http://tw.yahoo.com">Yahoo</a></li>
</ul>
</div>
<h2><a href="#">第 2 列標題</a></h2>
<div>第 2 列內容</div>
<h2><a href="#">第 3 列標題</a></h2>
<div>第 3 列內容</div>
</div>
</div>
</div>
<!--右方主內容區-->
<div id="content2">
<div id="contentArea2">
<div id="tabs">
<ul>
<li><a href="#tab1">頁籤 1</a></li>
<li><a href="#tab2">頁籤 2</a></li>
<li><a href="#tab3">頁籤 3</a></li>
<li><a href="#tab4">頁籤 4</a></li>
</ul>
<div id="tab1">
<p>這是頁籤 1</p>
</div>
<div id="tab2">
<p>這是頁籤 2</p>
</div>
<div id="tab3">
<p>這是頁籤 3</p>
</div>
<div id="tab4">
<p>這是頁籤 4</p>
</div>
</div>
</div>
</div>
<!--頁尾-->
<div id="footer">
</div>
<script>
$(function(){
$(window).resize(function(){
var windowHeight=$(window).height();
$("#content1").height(windowHeight - 175 + "px");
$("#contentArea1").height(windowHeight - 205 + "px");
$("#content2").height(windowHeight - 175 + "px");
$("#contentArea2").height(windowHeight - 205 + "px");
});
$("#accordion").accordion();
$("#tabs").tabs();
});
</script>
</body>
</html>
結果如下 :
看起來似乎還不錯, 但 Ajax 部分需要補強一下, 先記錄結果, 等有空再繼續. 以前在寫 EasyUICMS 時曾使用其 Layout 元件排版, 參考 :
# 用 jQuery EasyUI 打造輕量級 CMS (一)
但由於 jQuery UI 本身沒有這種元件, 必須透過 plug-in 外掛 UI Layout 支援才行, 參考 :
# http://layout.jquery-dev.net/
# jQuery佈局外掛UI Layout簡介及使用方法
2020年9月11日 星期五
jQuery UI 學習筆記 (十六) : 凸顯 (Hightlight) 與錯誤 (Error) 訊息
# 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 學習筆記索引
(這是第一個將全部主題寫完的學習筆記耶)
2020年9月9日 星期三
jQuery UI 學習筆記 (十五) : 工具提示 (Tooltips)
Tooltip API 與教學文件參考 :
# https://jqueryui.com/tooltip/
# http://api.jqueryui.com/tooltip/
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 網頁風暴 (張子秋, 佳魁)
工具提示是 HTML 元素的 title 屬性所提供的功能, 當滑鼠移動到元素上 (hover) 時就會出現一個方框顯示訊息, 這對表單輸入非常有用, 可提醒使用者如何填寫, 但原始 HTML 的 title 提示功能有下列缺點 :
- 外觀與顯示時間, 時長以及位置無法控制.
- 顯示內容只能是純文字, 無法使用 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, 結果如下 :
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.
jQuery UI 學習筆記 (十四) : 文字輸入框的主題樣式
測試 1 : 原始的 HTML 文字輸入元素效果 [看原始碼]
<!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="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
});
</script>
</body>
</html>
此例的 text input 與 textarea 仍為 HTML 原始外觀, 不像按鈕可呼叫 button() 方法套用主題樣式, 在視覺上不甚搭配 :
解決辦法可參考下列文章 :
# jQuery UI styled text input box
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
例如 :
測試 2 : 套用 ui-widget 相關樣式類別之效果 [看原始碼]
<!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="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
});
</script>
</body>
</html>
結果如下 :
可見 text input 與 textarea 元素外觀變美了, 邊框不僅變成圓角, 且套用了佈景主題樣式.
不過還有一個缺點 : text input 的高度似乎太小, 與按鈕的高度不協調, 這可以透過 height() 方法來設定, 例如 :
測試 3 : 設定 text input 元素高度與按鈕同高 [看原始碼]
<!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="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
$('input').height($("button").innerHeight());
});
</script>
</body>
</html>
此例先呼叫 button 元素物件之 innerHeight() 取得元素本身 (內) 高度, 傳回值為高度 px 數值, 然後將其傳給 text input 元素物件之 height() 方法設定高度, 結果如下 :
這樣看起來就搭調多了. 最後我們為範例 3 加上主題布景選擇器 :
測試 3 : 外觀隨主題佈景切換之文字輸入框 [看原始碼]
<!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 id="theme" 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="themes">布景</label>
<!-- 主題佈景選擇器 -->
<select id="themes">
<option value="base">base</option>
<option value="black-tie">black-tie</option>
<option value="blitzer">blitzer</option>
<option value="cupertino">cupertino</option>
<option value="dark-hive">dark-hive</option>
<option value="dot-luv">dot-luv</option>
<option value="eggplant">eggplant</option>
<option value="excite-bike">excite-bike</option>
<option value="flick">flick</option>
<option value="hot-sneaks">hot-sneaks</option>
<option value="humanity">humanity</option>
<option value="le-frog">le-frog</option>
<option value="mint-choc">mint-choc</option>
<option value="overcast">overcast</option>
<option value="pepper-grinder">pepper-grinder</option>
<option value="redmond">redmond</option>
<option value="smoothness">smoothness</option>
<option value="south-street">south-street</option>
<option value="start">start</option>
<option value="sunny">sunny</option>
<option value="swanky-purse">swanky-purse</option>
<option value="trontastic">trontastic</option>
<option value="ui-darkness">ui-darkness</option>
<option value="ui-lightness">ui-lightness</option>
<option value="vader">vader</option>
</select>
<script>
$(function(){
$("#themes").selectmenu();
$("#themes").val("hot-sneaks");
$("#themes").selectmenu("refresh");
$('#themes').on('selectmenuchange', function() {
var theme=$(this).val();
var href="https://code.jquery.com/ui/1.12.1/themes/" + theme +
"/jquery-ui.min.css";
$("#theme").attr("href", href);
});
});
</script>
<br><br>
<label for="memo">備註</label>
<textarea id="memo" rows="4" cols="28"></textarea><br>
<label for="category">類別</label>
<input type="text" id="category">
<button title="儲存">儲存</button>
<script>
$(function(){
$("button").button();
$('input, textarea').addClass("ui-widget ui-widget-content ui-corner-all");
$('input').height($("button").innerHeight());
});
</script>
</body>
</html>
此例利用選擇器切換主題佈景觀察文字輸入框外框是否隨之改變, 結果如下 :
可見這樣的設定確實可讓 text input 與 textarea 華麗轉身.
以上範例全部放在 GitHub 個人網頁空間, 拿 GitHub 當靜態網頁伺服器真的好棒棒耶.
























