jQuery Mobile學習筆記（五）——表單元件

作為一個APP，表單是不可或缺的元件，無論注冊，發帖，評論，購物等等，都是表單的變形。

這一章講解jQuery Mobile（JM）中的表單。

預設情況下，JM會嘗試通過架構中Ajax發送表單。如果強制不适用AJax，可以在form标簽中使用data-ajax=“false”，或加上target=“_blank”來強制使用Ajax。

表單可以使用（二）中的data-transition，data-direction屬性來改變彈出樣式。

使用Ajax時，整個頁面共享一個DOM，是以送出form時，需要保證各個form元素的ID在整個站點中唯一。

1.文本标簽

應該為每個控件包含一個label元素，并将控件for屬性指向該控件id。當使用者點選label時，對應的表單控件會得到焦點。對觸摸裝置來說，增加了得到焦點的區域，便于點選。

<label for="company">Company Name:</label>
<input type="text" id="company">

如果想隐藏它，可以加上class=“ui-hidden-accessible”

2.域容器（可選的文本标簽/部件包裝器，類似于DIV）

容器的作用：會将内部的文本标簽和表單控件自動對齊，并會添加一個細邊框作為字段分隔符；會根據裝置的寬度自動調整布局。

<div data-role="fieldcontainer">
<label for="company">Company Name:</label>
<input type="text" id="company" name="company">
</div>
<div data-role="fieldcontainer">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>

3.文本輸入框

<textarea> //當文本過多時，架構會自動擴充該文本區域以适合新行。

可以選擇的文本屬性有required（必需）、pattern（驗證用正規表達式）、placeholder（提示文字）和min、max（僅用于type=“number”）

4.日期輸入框

<div data-role="fieldcontainer">
<label for="birth">Your Birthdate:</label>
<input type="date" id="birth" name="birth">

<label for="favmonth">Your favorite month:</label>
<input type="month" id="favmonth" name="favmonth">
</div>

type可選屬性：

type	格式
date	年、月、日
datetime	年、月、日、小時、分鐘
time	小時、分鐘
datetime-local	完整的日期選擇，不帶時區資訊
month	月份
week	星期

日期輸入框支援min和max屬性。

5.滑塊

<div data-role="fieldcontainer">
<label for="qty">Quantity:</label>
<input type="range" id="qty" name="qty" min="1" max="100" step="2" value="5" data-theme="e" 
data-track-theme="b">
</div>

data-track-theme隻影響滾動條，data-theme隻對數字輸入框有效

6.平移切換開關（需要顯式指定data-role）

<label for="updated">Receive updates</label>
<select id="updated" name="updated" <span style="background-color: rgb(51, 204, 255);">data-role="slider"</span>>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>

7.選擇菜單（預設會占用整個寬度，除非包含在一個域容器中）

單選：

<label for="training">Training</label>
<select id="training" name="training">
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>

多選：（可以用optgroup和option元素将選項分組）

<label for="lang">Languages you like</label>
<select id="lang" name="lang" <span style="background-color: rgb(51, 204, 255);">multiple</span>>
<option value="1">C/C++</option>
<option value="2">Objective-C</option>
<option value="3">Java</option>
<option value="4">C#</option>
<option value="5">Visual Basic</option>
<option value="6">ActionScript</option>
<option value="7">Delphi</option>
<option value="8">Phyton</option>
</select>

組合選擇菜單：（垂直和水準）

label會被隐藏，可以使用legend元素來定義一個應用到整個分組的文本标簽

<div data-role="controlgroup">
<legend>Color and Size</legend>

<label for="color">color</label>
<select id="color" name="color">
<option value="1">Blue</option>
<option value="2">White</option>
<option value="3">Red</option>
<option value="4">Black</option>
<option value="5">Pink</option>
</select>
<select id="size" name="size">
<option value="1">X-Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">X-Large</option>
</select>
</div>

<div data-role="controlgroup" data-type="horizontal">
<legend>Week day and time</legend>
<select id="weekday" name="weekday" multiple>
<option value="1">Mon</option>
<option value="2">Tue</option>
<option value="3">Wed</option>
<option value="4">Thu</option>
<option value="5">Fri</option>
</select>
<select id="time" name="time">
<option value="1">Morning</option>
<option value="2">Midday</option>
<option value="3">Afternoon</option>
</select>

非原生選擇菜單：

<label for="training">Training</label>
<select id="training" name="training" <span style="background-color: rgb(51, 204, 255);">data-native-menu="false"</span>>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>

如果選項過多，打開菜單時将建立一個對話頁面

<label for="training">Training</label>
<select id="training" name="training" data-native-menu="false" <span style="background-color: rgb(51, 204, 255);">data-overlay-theme="e"</span>>
<option value="0" <span style="background-color: rgb(51, 204, 255);">data-placeholder="true"</span>>Select your training</option>
<option value="1">HTML5</option>
<option value="2">jQuery Mobile</option>
<option value="3">iOS</option>
<option value="4">Android</option>
<option value="5">BlackBerry</option>
<option value="6">Qt for Meego</option>
</select>

data-overlay-theme來指定菜單覆寫層的色樣，如果value=‘’或data-placehoder=“true”将被用作覆寫層的标題。

8.單選

放在controlgroup中，樣式會友好一些，不會鋪滿螢幕。

name值必須一緻，id唯一，label唯一

<div data-role="controlgroup">
<legend>Menu type</legend>

<label for="menuNative1">Native menu, single selection</label>
<input type="radio" id="menuNative1" name="menuType" value="1">

<label for="menuNative2">Native menu, multiple selection</label>
<input type="radio" id="menuNative2" name="menuType" value="2">

<label for="menuNonNative1">Non-native menu, single selection</label>
<input type="radio" id="menuNonNative1" name="menuType" value="3">

<label for="menuNonNative2">Non-native menu, multiple selection</label>
<input type="radio" id="menuNonNative2" name="menuType" value="4">
</div>

水準單選（類似于開關）

<legend>Delivery method</legend>

<div data-role="controlgroup" data-type="horizontal">

<label for="deliveryUPS">UPS</label>
<input type="radio" id="deliveryUPS" name="delivery" value="ups">

<label for="deliveryDHL">DHL</label>
<input type="radio" id="deliveryDHL" name="delivery" value="dhl">

<label for="deliveryFedex">FedEx</label>
<input type="radio" id="deliveryFedex" name="delivery" value="fedex">

</div>

9.複選框（data-type="horizontal"加上後會變成多選開關按鈕）

<legend>Delivery options</legend>

<div data-role="controlgroup" <span style="background-color: rgb(51, 204, 255);">data-type="horizontal"</span>>

<label for="optionGift">Pack it as a Gift</label>
<input type="checkbox" id="optionGift" name="optionGift" value="yes">

<label for="optionBag">Send it with a bag</label>
<input type="checkbox" id="optionBag" name="optionBag" value="yes">

<label for="optionRemove">Remove the box</label>
<input type="checkbox" id="optionRemove" name="optionRemove" value="yes">

</div>

10上傳檔案

<input type="file">目前不被IOS、Android支援，web可以。

jQuery Mobile學習筆記（五）——表單元件

繼續閱讀

推技術聊天室的實作(下)

Redux三部曲之曲一《還闊以》

領域模組化實作思考

推薦一些前端移動裝置常用的架構！

UI設計師/前端開發工程師招聘

如何減少UI設計師産品與前端工程師的溝通成本

項目管理那些事兒

pmbok學習筆記（1）

wecenter二次開發系列（三）——多個wc架構同域網站共享cookie

下載下傳APP顯示伺服器檢索資訊出錯 ”RPC:S-7:AEC-0“等

RCP應用程式開發之四——應用程式窗體生成過程1

SSM架構（二）------------表現層的SpringMVC

阿裡巴巴分布式服務架構 Dubbo 團隊成員梁飛專訪

[轉]如何成長為一名全棧工程師全棧工程師

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

android 主線程的相關問題