jQuery Mobile框架中的表单组件基础使用教程


Posted in Javascript onMay 17, 2016

一.表单组件基础
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>

jQuery Mobile框架中的表单组件基础使用教程

2.文本输入域

<div data-role="fieldcontain">
  <label for="textarea">文本输入域</label>
  <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

jQuery Mobile框架中的表单组件基础使用教程

3.搜索输入框
正如上文所述,增强后的输入框左边有一个放大镜图标,点击触发搜索,在输入内容后,输入框的右边还会出现一个叉的图标,点击清除已输入的内容。

<div data-role="fieldcontain">
  <label for="search">搜索输入框</label>
  <input type="search" name="search" id="search" value="" />
</div>

jQuery Mobile框架中的表单组件基础使用教程

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>

jQuery Mobile框架中的表单组件基础使用教程

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>

jQuery Mobile框架中的表单组件基础使用教程

默认的复选框组件是垂直排列选项的,我们可以在 fieldset 上添加 data-type="horizontal" 使其样式改为水平按钮组的样式, jQuery Mobile 会使选项元素浮动并去掉图标。

jQuery Mobile框架中的表单组件基础使用教程

6.选择列表
选择列表是基于 HTML select 元素的,具有原生菜单和自定义菜单两种形式,原生菜单与自定义菜单都有一个样式美化了的选择按钮,不同的是在自定义菜单中原生的 option 元素将被隐藏, jQuery Mobile 会生成一个由 CSS3 和 HTML5 构成的菜单代替,并且这个菜单是 ARIA 的。

关于 ARIA ,这里小科普一下: ARIA, 即 Accessible Rich Internet Application ( 加强无障碍网页应用程序 ),它是 W3C 的无障碍网页倡议(WAI)工作小组在倡导大家使用的无障碍网页应用技术。它是一套独立的规范,可以帮助 Web 程序,尤其是使运用了大量前端技巧( Ajax )的网页更具备可访问性,通俗点说,读屏设备等不大能理解前端语义的设备将可以了解到页面的内容,这样残疾人士不仅可以浏览网页甚至与页面进行交互。

HTML select 元素会被自动增强为原生的选择列表组件,若需要自定义样式菜单,可以在 select 上添加 data-native-menu="false" 属性。

若需要禁止选择某一个选项,可以在选项的 option 标签上添加 disabled="disabled"。

下面给出一个自定义菜单的例子:

<div data-role="fieldcontain">
  <label for="select-choice-1" class="select">选择列表</label>
  <select data-native-menu="false" name="select-choice-1" id="select-choice-1">
    <option value="12h">12小时</option>
    <option value="1d">一天</option>
    <option value="2d">两天</option>
    <option value="week">一周</option>
  </select>
</div>

选择按钮

jQuery Mobile框架中的表单组件基础使用教程

自定义菜单

jQuery Mobile框架中的表单组件基础使用教程

若需要多项选择,则可以在 select 标签上添加 multiple="multiple" ,但原生的选择菜单不支持该功能。对于多项选择菜单,还有几点要注意的:

(1)jQuery Mobile 会在菜单里创建一个 jQuery Mobile header ,并在 header 的左边添加一个关闭菜单按钮。
(2)当用户选择两个或以上选项时选择按钮右侧会出现一个小图标,图标内显示已选择选项的个数。
(3)所有选择的选项文本会显示在选择按钮上,如果文字超出按钮长度,会以省略号代替多余的内容。
(4)如果选项过多,菜单会以新页面的形式显示。
 
多项选择列表实例

<div data-role="fieldcontain">
  <label for="select-choice-2" class="select">多项选择列表</label>
  <select data-native-menu="false" multiple="multiple" name="select-choice-2" id="select-choice-2">
    <option value="12h">12小时</option>
    <option value="1d">一天</option>
    <option value="2d">两天</option>
    <option value="week">一周</option>
  </select>
</div>

jQuery Mobile框架中的表单组件基础使用教程

另外我们还可以对选项进行分组,使用以下标签标签把同一组的选项包裹起来,其中 label 的值为该分组的标题。

<optgroup label="Group1"></optgroup>

分组选择列表实例

<div data-role="fieldcontain">
  <label for="select-choice-3" class="select">分组选择列表</label>
  <select data-native-menu="false" name="select-choice-3" id="select-choice-3">
    <optgroup label="Group1">
      <option value="12h">12小时</option>
      <option value="1d">一天</option>
      <option value="2d">两天</option>
      <option value="week">一周</option>
    </optgroup>
    <optgroup label="Group2">
      <option value="1m">一个月</option>
      <option value="1q">一季度</option>
      <option value="1y">一年</option>
    </optgroup>
  </select>
</div>

jQuery Mobile框架中的表单组件基础使用教程

7.滑杆
在 jQuery Mobile 中,type="range" ( HTML5 属性值 ) 的 input 元素会被增强为划杆组件,该组件可以通过一些属性值配置,value 设置滑杆的初始值, min 和 max 分别设置滑杆的下限和上限。另外滑杆组件还支持键盘响应,键盘的右箭头,上箭头,Page Up 键都可以增加滑杆的当前值,相应的,左键头,下箭头, Page Down 键可以减少滑杆的当前值,使用 Home 键和 End 键则可以设置当前值为最小值(下限)和最大值(上限)。

<div data-role="fieldcontain">
  <label for="slider">滑杆</label>
  <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
</div>

jQuery Mobile框架中的表单组件基础使用教程

8.开关
具有两个 option 的 select 元素添加 data-role="slider" 属性后会被增强为 jQuery Mobile 的开关组件,用于表示布尔型数据( ture or false ),拖动滑动条可以在“开”与“关”之间选择,其中第一个 option 会被渲染成“开”的样式。

<div data-role="fieldcontain">
  <label for="slider">开关</label>
  <select name="slider" id="slider" data-role="slider">
    <option value="off">关闭</option>
    <option value="on">开启</option>
  </select> 
</div>

jQuery Mobile框架中的表单组件基础使用教程

三.提交表单
jQuery Mobile 自动采用 Ajax 的方式提交表单,默认的 method 为 get ,action 为当前页面的相对路径,在表单页面和结果页面之间会有平滑的转场过渡,并且可以在表单上使用 data-transition 指定转场效果。如果不想使用 Ajax 的方式提交表单,可以在全局事件禁用 Ajax (如何全局禁止 Ajax 并不在本文讨论范围,但会在本系列的后续文章中作详细说明)或是在 form 上添加 data-ajax="false" 属性,下面是 data-transition 的所有可取值。

slide 滑动(默认值,从左至右滑出), slideup(从下至上滑出), slidedown(从上至下滑出), pop(从中心渐显展开), fade(渐显), flip(翻转)。

四.主题样式
关于主题样式,在上一文中已经介绍过了,这里引用一下:

“data-theme=“” 属性, 所有的 jQuery Mobile 组件均支持该属性,用于设置组件的颜色, 该属性默认有五个值 a, b, c, d, e,分别代表由深到浅五种颜色,另外开发者还可以通过在 CSS 里添加相应的 Class 来自定义颜色。”

五.刷新表单组件
由于 jQuery Mobile 对原生的 HTML 表单元素进行了渲染和追加元素,所以开发者想通过 js 直接控制表单组件会比较麻烦(如使用了 Web SQL Database 储存了数据在本地,在打开网页时希望通过 js 获取数据并给表单组件赋值的情况),因此 jQuery Mobile 设计了用 js 给表单组件赋值的 API ,下面逐一举例介绍:

1.单选按钮
选择第一个选项

$("input[type='radio']:first").attr("checked",true).checkboxradio("refresh");

2.复选按钮
选择第一个选项

$("input[type='checkbox']:first").attr("checked",true).checkboxradio("refresh");

3.选择列表
选择第一个选项,注意选项的索引是从1开始

var myselect = $('select#select-choice-1');
myselect[0].selectedIndex = 1;
myselect.selectmenu('refresh');

4.滑杆
设置值为40

$("input[type=range]").val(40).slider("refresh");

5.开关
选择第一个选项

var myswitch = $('select#shakeToClear');
myswitch[0].selectedIndex = 1;
myswitch.slider('refresh');

 

注: refresh 方法不能直接使用在 Ajax 获取的内容上,例如 js 要操纵的表单组件在另一个 Page, js 只在首页加载时载入,这样 jQuery Mobile 会出错(不会有直接报错,只是该段 js 会失效),我们可以使用 live('pagebeforeshow', function(){}) 方法使到该段 js 在过场到表单组件所在页面时才载入( pagebeforeshow 是 jQuery Mobile 事件之一,此外还有 pagebeforehide, pageshow, pagehide 三种方法)。下面给出一个例子:

$('#setting').live('pagebeforeshow', function(){
    // 在页面显示时选择菜单中第一个选项
    var myselect = $('select#select-choice-1');
    myselect[0].selectedIndex = 1;
    myselect.selectmenu('refresh');
});

Javascript 相关文章推荐
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
浅谈Javascript数组(推荐)
May 17 #Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 #Javascript
javascript css红色经典选项卡效果实现代码
May 17 #Javascript
JS获取IMG图片高宽的简单实例
May 17 #Javascript
简单的分页代码js实现
May 17 #Javascript
Js获取图片原始宽高的实现代码
May 17 #Javascript
创建一个类Person的简单实例
May 17 #Javascript
You might like
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
基于Python函数和变量名解析
2019/07/19 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
群众路线对照检查材料
2014/09/22 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
公司表扬稿范文
2015/05/05 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang