使用 jQuery Mobile 与 HTML5 开发 Web App (四) —— jQuery Mobile 表单上
一.表单组件基础
1.组件简介
jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用。需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便。
jQuery Mobile 的表单组件有以下几种:
- 文本输入框, type="text" 标记的 input 元素会自动增强为 jQuery Mobile 样式,无需额外添加 data-role 属性。
- 文本输入域, textarea 元素会被自动增强,无需额外添加 data-role 属性,用于多行输入文本,jQuery Mobile 会自动增大文本域的高度,避免在移动设备中很难找到滚动条的情况。
- 搜索输入框, type="search" 标记的 input 元素会自动增强,无需额外添加 data-role 属性,这是一个新的 HTML 元素,增强后的输入框左边有一个放大镜图标,点击触发搜索,在输入内容后,输入框的右边还会出现一个叉的图标,点击清除已输入的内容,非常方便。
- 单选按钮, type="radio" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。
- 复选按钮, type="checkbox" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。
- 选择列表, select 元素会被自动增强,无需额外添加 data-role 属性。
- 划杆, type="range" 标记的 input 元素会自动增强,无需额外添加 data-role 属性。
- 开关, 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 元素,用于表示该单选框的标题。
<div data-role="fieldcontain"><fieldset data-role="controlgroup"><legend>单选框:</legend><input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" /><label for="radio-choice-1">蓝</label><input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" /><label for="radio-choice-2">绿</label><input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" /><label for="radio-choice-3">黑</label></fieldset>
</div>
5.复选框
复选框也是用于在页面中提供一组选项的,但可以同时选择多个选项。与单选框相同,复选框组件也无需额外调用 data-role 属性, type="checkbox" 标记的 input 元素会自动增强为 jQuery Mobile 样式,当然 jQuery Mobile 也建议开发者使用一个带 data-role="controlgroup" 属性的 fieldset 标签包括选项,并且在 fieldset 内增加一个 legend 元素,用于表示该复选框的标题。
<div data-role="fieldcontain"><fieldset data-role="controlgroup"><legend>复选框</legend><input type="checkbox" name="blue" id="effect1" class="custom" /><label for="effect1">效果1</label><input type="checkbox" name="green" id="effect2" class="custom" /><label for="effect2">效果2</label><input type="checkbox" name="pink" id="effect2" class="custom" /><label for="effect2">效果3</label></fieldset>
</div>
默认的复选框组件是垂直排列选项的,我们可以在 fieldset 上添加 data-type="horizontal" 使其样式改为水平按钮组的样式, jQuery Mobile 会使选项元素浮动并去掉图标。
接下来还有其他一些表单组件、有关组件的技巧及完整示例,因为内容甚多,就写作另一篇文章了。
原文由 Kayo Lee 发表,原文链接:http://kayosite.com/web-app-by-jquery-mobile-and-html5-form-part-one.html
使用 jQuery Mobile 与 HTML5 开发 Web App (四) —— jQuery Mobile 表单上相关推荐
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十三) —— jQuery Mobile 方法上
本篇介绍的,是 jQuery Mobile 的方法.对比于 jQuery 方法可以实现 DOM 遍历,动画,Ajax 等各种丰富的操作,jQuery Mobile 的方法更像是 jQuery Mobi ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十一) —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十) —— jQuery Mobile 默认配置与事件基础
从本文开始,使用 jQuery Mobile 与 HTML5 开发 Web App 系列将 会进入第三部分--jQuery Mobile 事件与方法,这其中将会利用之前所讲述的 jQuery Mobi ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (九) —— jQuery Mobile 页面与对话框
在<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 基础>中,Kayo 曾经简略介绍过 jQuery Mobile 的页面组件,当 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (八) —— jQuery Mobile 工具栏
本文延续之前"使用 jQuery Mobile 与 HTML5 开发 Web App"系列文章,本文介绍的是 jQuery Mobile 中的 jQuery Mobile 工具栏. ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (七) —— jQuery Mobile 列表
如 Kayo 之前所写的文章 <使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 内容格式> 中所述,这次介绍的是 jQuery M ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (六) —— jQuery Mobile 内容格式
今天开始, "使用 jQuery Mobile 与 HTML5 开发 Web App" 的系列文章将会继续,这次要介绍的是 jQuery Mobile 的内容格式部分,这也是 jQ ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (五) —— jQuery Mobile 表单下
在上文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 表单上>中, Kayo 介绍了一部分 jQuery Mobile 表单组件 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App (二) —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
最新文章
- 报告:AI岗年薪下降8.9%,收入不及2018年
- 为什么微博用jsoup爬取不出来东西_腾讯面试题: 百度搜索为什么那么快? | 原力计划...
- seaborn系列 (4) | 分类图catplot()
- TF学习:Tensorflow基础案例、经典案例集合——基于python编程代码的实现
- 使用树莓派和kali Linux打造便携式渗透套件
- linux 常见试题(2)-选择
- apple mach-o linker (id) error
- ant更改主题色报错Inline JavaScript is not enabled. Is it set in your options? vue ant主题色更改 vue-cli3
- C#LeetCode刷题之#155-最小栈(Min Stack)
- oracle左右结合,oracle中的左右连接
- 区块链如何击败 AI、云计算成为最受欢迎技能?
- 如何使用利用LaTeX制作个人简历
- linux服务端修改EDT为东八区,EDT开发环境配置
- 30个ies光域网带图_15个让你脚下更细腻的经典控球训练
- 离散数学第一章(知识点总结)
- 易语言解压服务器中压缩包,易语言取压缩包中的文件列表源码
- NEWSCTF第一届--官方wp(2021新春赛)
- 大数据时代的 10 个重大变化
- 当PCB设计师遇到爱情,猜猜他板内的阻抗有多大变化
- android 可以iphone,[实测]哪些Android手机充电器也可以给iPhone 12快充?
热门文章
- 公共子序列(信息学奥赛一本通-T1297)
- 动态规划 —— 背包问题 P07 —— 有依赖背包
- 骨牌铺方格(HDU-2046)
- 16 WM配置-策略-激活存储类型搜索(Storage Type Search)
- 15 SD配置-企业结构-分配-给工厂分配起运点
- 日语学习-多邻国-平假名2
- python数据可视化实现步骤,Python 代码轻松实现数据可视化的5 种使用方法
- 一起学习C语言:函数(一)
- 怎么锁定计算机密码忘了怎么办,如果忘记了手机数字锁的密码(仅需10秒钟即可解锁),该怎么办...
- 洛达检测软件_洛达1562m之体验篇