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 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
js实现返回顶部效果
Mar 10 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php实现快速排序法函数代码
2012/08/27 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python写的一个简单监控系统
2015/06/19 Python
Python中的默认参数详解
2015/06/24 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python中整数的缓存机制讲解
2019/02/16 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
劳动保障个人工作总结
2015/03/04 职场文书