本篇紀錄剩餘的 HTML5 表單元件 number 與 color 之測試, 本系列之前的文章參考 :
# jQuery Mobile 學習筆記 (三) : 工具列
# jQuery Mobile 學習筆記 (四) : 對話框
# jQuery Mobile 學習筆記 (四) : 對話框
參考書籍 :
- jQuery Mobile 智慧型手機程式開發 (博碩, 岡本隆史)
- HTML5+CSS3+jQuery Mobile 輕鬆打造 App 與行動網站 (博碩, 陳婉凌)
- PhoneGap 跨平台手機程式開發實戰 (上奇, 張亞飛)
- 徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)
- jQuery Mobile 跨平台開發寶典 (上奇, 陶國榮)
- PHP+MySQL+jQuery Mobile 跨行動裝置網站開發 (碁峰, 陳會安)
- Visual Studio 2015 X Cordova跨平台App實戰特訓班 (碁峰, 文淵閣工作室)
- Javascript + jQuery Mobile + Node.js 跨平台網頁設計範例教本 (碁峰, 陳會安)
- 錢沾計畫啟動：jQuery Mobile 跨平台賺錢 App 錢途無量 (佳魁, 李科泉)
- 第一次開發跨平台網頁與 App 就上手 (碁峰, 蔡文龍)
關於 HTML5 表單參考 :
首先是只能輸入數值的 number 元件測試 :
測試 4-6 : HTML5 原生的數值輸入元件 input[type=number] [看原始碼]
<!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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>表單元件測試</h1>
</header>
<article data-role="content">
<form method="post" action="http://tony1966.xyz/test/jqmtest/form_test_4_6.php">
<div data-role="fieldcontain">
<label for="income">月入 :</label>
<input type="number" id="income" name="income" min="0" max="300000" value="26000" step="1000">
</div>
<div data-role="fieldcontain">
<button id="ok_btn">確定</button>
</div>
</form>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
$("#ok_btn").on("click", function(e) {
var msg="月入=" + $("#income").val();
alert(msg);
this.form.submit();
});
});
</script>
</section>
</body>
</html>
此例之 number 元件雖然外觀與 type=text 的單行文字輸入一樣, 但 number 只能輸入數字與小數點, 輸入文字無反應. 在 PC 上用 Chrome 測試時點擊輸入框時右側會出現上下小按鈕, 點一下會依據 step 屬性值為步階上下跳動, 但 Android 上的 Chrome 卻沒有上下調整的小按鈕, 因此 step 屬性無作用, 需完整輸入數值, 結果如下 :
按確定會向後端程式 form_test_4_6.php 提交表單, 其內容如下 :
<!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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>表單元件測試</h1>
</header>
<article data-role="content">
<?php
$msg="月入=".$_REQUEST["income"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
最後是 color 元件, 用來從調色盤中挑選色彩值, 其設定值為例如 "#2a0c1d" 的色彩值 :
測試 4-7 : HTML5 原生的色彩選擇元件 input[type=color] [看原始碼]
<!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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>表單元件測試</h1>
</header>
<article data-role="content">
<form method="post" action="http://tony1966.xyz/test/jqmtest/form_test_4_7.php">
<div data-role="fieldcontain">
<label for="set_color">顏色設定</label>
<input type="color" value="#ff0000">
</div>
<div data-role="fieldcontain">
<button id="ok_btn">確定</button>
</div>
</form>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
$("#ok_btn").on("click", function(e) {
alert("設定顏色=" + $("#set_color").val());
this.form.submit();
});
});
</script>
</section>
</body>
</html>
此例用 value 屬性值 "#ff0000" 將調色盤預設為紅色, 會顯示在中間的色條中, 點按色條會彈出選取顏色快取視窗 :
若快取選單中無所要之顏色, 可按 "更多" 自選顏色 :
移動滑桿設定想要的顏色 (結果顯示在右上角的色塊中), 按 "設定" 即可 :
按確定會向後端程式 form_test_4_7.php 提交表單, 其內容如下 :
<!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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
</head>
<body>
<!-- 第一頁頁面 -->
<section data-role="page" id="page1">
<header data-role="header">
<h1>表單元件測試</h1>
</header>
<article data-role="content">
<?php
$msg="設定顏色=".$_REQUEST["set_color"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code 如下 :
OK, 終於測完全部表單元件了.
沒有留言 :
張貼留言