jQuery Mobile框架中的表单组件基础使用教程框架中的表单组件基础使用教程
jQuery Mobile框架主要针对移动端的Web UI设计,其中丰富的表单组件调用起来也是相当方便,接下来就为大家
整理了一份jQuery Mobile框架中的表单组件基础使用教程,需要的朋友可以参考下
一一.表单组件基础表单组件基础
1.组件简介组件简介
jQuery Mobile 中的表单组件是基于标准 HTML ，然后在此基础上增强样式，因此即使浏览器不支持 jQuery Mobile 表单仍可
正常使用。需要注意的是， jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式，因此对于 iphone/ipad 与
Android 使用 Web 表单将会变得非常方便。
jQuery Mobile 的表单组件有以下几种：
（1）文本输入框， type="text" 标记的 input 元素会自动增强为 jQuery Mobile 样式，无需额外添加 data-role 属性。
（2）文本输入域， textarea 元素会被自动增强，无需额外添加 data-role 属性，用于多行输入文本，jQuery Mobile 会自动增
大文本域的高度，避免在移动设备中很难找到滚动条的情况。
（3）搜索输入框， type="search" 标记的 input 元素会自动增强，无需额外添加 data-role 属性，这是一个新的 HTML 元素，
增强后的输入框左边有一个放大镜图标，点击触发搜索，在输入内容后，输入框的右边还会出现一个叉的图标，点击清除已输
入的内容，非常方便。
（4）单选按钮， type="radio" 标记的 input 元素会自动增强，无需额外添加 data-role 属性。
（5）复选按钮， type="checkbox" 标记的 input 元素会自动增强，无需额外添加 data-role 属性。
（6）选择列表， select 元素会被自动增强，无需额外添加 data-role 属性。
（7）划杆， type="range" 标记的 input 元素会自动增强，无需额外添加 data-role 属性。
（8）开关， select 元素添·加 data-role="slider" 属性后会被增强会 jQuery Mobile 的开关组件， select 中只能有两个 option。
2.组件使用规范组件使用规范
所有的表单组件，只要是需要与服务器传送数据，都应该包裹在一个 form 标签内，并且应该指定好 form 的 action 和 method
属性。当然如果你使用的是 Web SQL Database 这类本地储存，即数据并不需要与服务器传送，可以不用 form 标签和
sumbit 提交。另外 form 的 id 需要在整站中唯一，由于 jQuery Mobile 使用 Ajax 导航，因此不同的 page 可以同时加载到一个
DOM 中，因此 form id 必须整站唯一以保证每个 DOM 的表单 id 都是不同的。
每一个表单元素应该要有相应的 label 对应，label 的 for 值要与元素的 id 相同，使其在语义上相关，并且可以使用一个带有
data-role="fieldcontain" 属性的 div 或 fieldset 容器包裹， jQuery Mobile 会自动在容器底部增加一条细边框作为分隔。
二二.表单组件详解表单组件详解
1.文本输入框文本输入框
在 jQuery Mobile 中，文本输入框和文本输入域都是使用标准 HTML 标记的，并且支持一些 HTML5 的 input 类型，如
password, email, tel, number, range 等更多的类型，而对于一些类型（ range, serach ） jQuery Mobile 则会将其转换为 text
的 input 类型，统一标准化其样式，下面是文本输入框的调用代码及示图。
<div data-role="fieldcontain">
<label for="text">文本输入框</label>
<input type="text" name="text" id="text" value="" />
</div>
2.文本输入域文本输入域
<div data-role="fieldcontain">
<label for="textarea">文本输入域</label>
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>
3.搜索输入框搜索输入框
正如上文所述，增强后的输入框左边有一个放大镜图标，点击触发搜索，在输入内容后，输入框的右边还会出现一个叉的图
标，点击清除已输入的内容。
<div data-role="fieldcontain">
<label for="search">搜索输入框</label>
<input type="search" name="search" id="search" value="" />
</div>
4.单选框单选框
单选框组件用于在页面中提供一组选项，并且只能选择其中一个选项。在 jQuery Mobile 中，单选框组件不但在外观上美化
了，还增加了一些图标用于增强视觉反馈。 type="radio" 标记的 input 元素会自动增强为单选框组件，但 jQuery Mobile 建议
开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项，并且在 fieldset 内增加一个 legend 元素，用于表
示该单选框的标题。
下载后可阅读完整内容，剩余3页未读，立即下载
weixin_38634323
- 粉丝: 7
- 资源: 899
我的内容管理
展开
最新资源
- C++多态实现机制详解：虚函数与早期绑定
- Java多线程与异常处理详解
- 校园导游系统：无向图实现最短路径探索
- SQL2005彻底删除指南：避免重装失败
- GTD时间管理法：提升效率与组织生活的关键
- Python进制转换全攻略：从10进制到16进制
- 商丘物流业区位优势探究：发展战略与机遇
- C语言实训：简单计算器程序设计
- Oracle SQL命令大全：用户管理、权限操作与查询
- Struts2配置详解与示例
- C#编程规范与最佳实践
- C语言面试常见问题解析
- 超声波测距技术详解：电路与程序设计
- 反激开关电源设计：UC3844与TL431优化稳压
- Cisco路由器配置全攻略
- SQLServer 2005 CTE递归教程：创建员工层级结构
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
