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 主线程的相关问题