因為表單元件太多了, 所以把後半部拆到這篇來. 本系列之前的文章參考 :
參考書籍 :
- 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 原生的 input[type=range] 元素 :
參考 :
其中 min 與 max 屬性用來設定滑桿數值上下限, step 屬性用來設定步階值 (預設為 1), 而 value 屬性則是用來設定初始值. 繪製時除了滑桿外前面還會有一個較短的文字欄位顯示即時的滑桿數值, 而且焦點在這個文字欄位上按上下鍵也可以調整滑桿的位置與數值. 此外也可以加上 jQuery Mobile 提供的 data-highlight="true" 來凸顯目前的滑桿位置 :
<input type="range" name="slider" min="0" max="100" step="5" value="0" data-highlight="true">
也可以用具有 data-role="rangeslider" 屬性的 div 元素包覆兩個 range 元素來製作雙柄滑桿 (range slider) :
<div data-role="rangeslider">
<input type="range" name="slidera" min="0" max="100" step="5" value="20">
<input type="range" name="sliderb" min="0" max="100" step="5" value="80">
</div>
例如 :
<!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_3_1.php">
<div data-role="fieldcontain">
<label for="slider1">單柄滑桿1</label>
<input type="range" id="slider1" name="slider1" min="0" max="30">
</div>
<div data-role="fieldcontain">
<label for="slider1">單柄滑桿2</label>
<input type="range" id="slider2" name="slider2" min="0" max="30" step="2" data-highlight="true">
</div>
<button id="ok_btn">確定</button>
</form>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
$("#ok_btn").on("click", function(e) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
此例中有兩個滑桿, 第一個沒有 step 屬性預設為 1, 第二個添加了 data-highlight="true" 屬性, 拉動滑桿時左側會變成藍色, 結果如下 :
按確定會將表單提交給後端程式 form_test_3_1.php 處理並輸出 jQuery Mobile 網頁, 程式如下 :
<!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="滑桿1=".$_REQUEST["slider1"]."<br>".
"滑桿2=".$_REQUEST["slider2"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code 如下 :
下面範例為利用滑桿製作的調色盤 :
測試 3-2 : 用單柄滑桿製作調色盤 [看原始碼]
<!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_3_2.php">
<div data-role="fieldcontain">
<label for="R">R</label>
<input type="range" id="R" name="R" min="0" max="255" step="1" value="0">
</div>
<div data-role="fieldcontain">
<label for="G">G</label>
<input type="range" id="G" name="G" min="0" max="255" step="1" value="0">
</div>
<div data-role="fieldcontain">
<label for="B">B</label>
<input type="range" id="B" name="B" min="0" max="255" step="1" value="0">
</div>
<button id="ok_btn">確定</button>
</form>
<div id="canvas" style="height:50px;"></div>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
//$("#R,#G,#B").val(0);
$("#R,#G,#B").on("change", function(e) {
var R=$("#R").val();
var G=$("#G").val();
var B=$("#B").val();
var bgcolor="rgb(" + R + "," + G + "," + B + ")";
$("#canvas").css("background-color", bgcolor);
});
$("#ok_btn").on("click", function(e) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
此例在頁面中放置了三個滑桿用來調整 R, G, B 顏色值 (用 min 與 max 屬性設定範圍在 0~255, 用 step 屬性設定滑動時數值變化步階為 1), 同時用 value 屬性設定滑桿的初始值為 0 (也可以在初始化時用 jQuery 程式設定). 在表單底下放置了一個 div 元素作為調色盤, 滑桿移動時會觸發 change 事件, 在 Javascript 程式中用群組選擇器 $("#R, #G, #B") 取得這三個滑桿元件後綁定 change 事件, 用 css() 方法即時更新調色盤之底色, 結果如下 :
按確定鈕提交表單給後端程式 form_test_3_2.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="R=".$_REQUEST["R"]."<br>G=".$_REQUEST["G"]."<br>B=".$_REQUEST["B"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code 如下 :
四. 日期時間元件 :
日期元件在行動 App 中很常用, 例如在日曆中設定提醒等等. 下面範例使用 HTML5 原生的 input[type=date] 元素 :
測試 4-1 : HTML5 原生的日期元件 input[type=date] [看原始碼]
<!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_1.php">
<div data-role="fieldcontain">
<label for="set_date">日期設定</label>
<input type="date" id="set_date" name="set_date">
</div>
<button id="ok_btn">確定</button>
</form>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
$("#ok_btn").on("click", function(e) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
結果如下 :
點日期欄位輸入框會彈出一張日曆供選擇日期, 按設定預設會以 YYYY-MM-DD 日期格式字串填入日期欄位中 :
按確定提交表單給後端程式 form_test_4_1.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_date"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code 如下 :
此例我請姊姊用她的 iPhone 的 Safari 瀏覽器測試結果為 :
不同瀏覽器繪製的外觀不一樣. 我在參考書籍 No.1 "jQuery Mobile 智慧型手機程式開發" 這本書的第九章看到 datebox 外掛的介紹, 這是一家叫 JTSage 的公司開發的, 參考 :
使用此外掛需下載相關 Javascript 函式庫, databox 提供了許多日曆模式 (mode), 需配合選用之模式匯入不同函式庫, 例如下面是 mode=datebox 所需之函式庫 :
<script src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.core.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
在 input[type=date] 元素上可用 data-options 屬性設定日期格式, 例如 :
<input type="date" id="set_date" name="set_date" data-role="datebox" data-options='{"mode": "datebox", "dateFormat": "YYYY-MM-DD", "fieldsOrderOveride": ["y", "m", "d"]}'>
下面是根據書本範例與 GitHub 說明進行測試之結果 :
測試 4-2 : 使用 JTSage 的 datebox 外掛 [看原始碼]
<!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">
<script src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.core.min.js"></script>
<script src="http://cdn.jtsage.com/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
</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_1.php">
<div data-role="fieldcontain">
<label for="set_date">日期設定</label>
<input type="date" id="set_date" name="set_date" data-role="datebox" data-options='{"mode": "datebox", "dateFormat": "YYYY-MM-DD", "fieldsOrderOveride": ["y", "m", "d"]}'>
</div>
<button id="ok_btn">確定</button>
</form>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
<script>
$(document).on("pageinit", "#page1", function(e) {
$("#ok_btn").on("click", function(e) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
此例在 PC 的 Chrome 上測試結果如下 :
但在 Android 手機卻跟上面範例 4-1 一樣, 在 iPhone 的 Safari 測試亦是如此, 也就是說無效. 此例網址 QR code 如下 :
接下來測試時間輸入元件, 即 input[type=time] 元素 :
測試 4-3 : HTML5 原生的時間元件 input[type=time] [看原始碼]
<!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_3.php">
<div data-role="fieldcontain">
<label for="set_time">時間設定</label>
<input type="time" id="set_time" name="set_time">
</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) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
在 Android 手機測試結果如下 :
內圈是 hour, 外圈是 minute, 按設定會將設定值填入時間框內 :
按確定提交給後端程式 form_test_4_3.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_time"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code :
在 iPhone 測試顯示之時間設定畫面如下 :
如果要日期與時間同時設定, 必須用 datetime-local, 用 datetime 無效, 參考 :
測試 4-4 : HTML5 原生的時間元件 input[type=time] [看原始碼]
<!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_4.php">
<div data-role="fieldcontain">
<label for="set_time">時間設定</label>
<input type="datetime-local" id="set_datetime_local" name="set_datetime_local">
</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) {
this.form.submit();
});
});
</script>
</section>
</body>
</html>
結果如下 :
按設定會將所選日期時間填入文字欄位內 :
按確定會向後端程式 form_test_4_4.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_datetime_local"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
結果如下 :
此例網址 QR code :
關於 HTML5 的時間與日期相關元件還有 week 與 month, 為了節省篇幅, 我將它們整合在下列範例中測試 :
測試 4-5 : HTML5 原生的周次與月份元件 input[type=week/month] [看原始碼]
<!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_5.php">
<div data-role="fieldcontain">
<label for="set_week">周次設定</label>
<input type="week" id="set_week" name="set_week">
</div>
<div data-role="fieldcontain">
<label for="set_month">月份設定</label>
<input type="month" id="set_month" name="set_month">
</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="周次=" + $("#set_week").val() + "\n" +
"月份=" + $("#set_month").val();
alert(msg);
this.form.submit();
});
});
</script>
</section>
</body>
</html>
結果如下 :
按確定會向後端程式 form_test_4_5.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_week"]."<br>".
"設定月份=".$_REQUEST["set_month"];
echo $msg;
?>
</article>
<footer data-role="footer">
<h3>頁尾</h3>
</footer>
</section>
</body>
</html>
此例網址 QR code :
沒有留言:
張貼留言