jqmobi(appframework)作为Intel的一款html5移动前端框架，以其自身轻量级和容易上手获得了很多移动HTML5开发者的喜爱，相对于jquerymobile,它可以说将jQuerymobile进行了重写，针对移动端做了很好的优化，（jQuerymobile太过于臃肿，实际在真机上效果较差），但是经过使用，发现jqmobi也有一些缺点，比如说bug较多，UI控件较少，插件较少，不能够满足大型应用开发需求。最不可接受的是它竟然没有提供日期和时间选择插件（日期时间选择功能很常用）。

有人说我在开发的时候使用input标签，type=date或者Time不就可以了，这样做很简单不用写额外的代码，但是你会发现，在稍微低版本的安卓手机上是不能够识别的，会提示让用户进行输入，这样的用户体验是比较差的。在网上找了好久，发现用户体验最好的HTML5日期选择控件是mobiscroll,这款控件是基于jQuery写成的一款控件，功能很强大，可定制性很高。但是网上的教程很多都是讲怎么将它和jQuerymobile进行结合，但是很少有将其结合在jqmobi框架中使用的。去它的官网查询发现竟然是收费的，于是找了很久终于在gitHub中找到了其开源地址，https://github.com/acidb/mobiscroll，下载这个案例之后，解压打开

Index-appframework.html,按照里面的demo可以将其整合到jqmobi框架中来，需要说明的是，如果只在安卓平台上使用，一般不需要将里面的左右js,css文件全部引入，引入部分即可，可以采用排除法一步步删除不用的代码和引入的文件，力求让这个控件最简化，这样在真机上显示效率会相对高一些，同时可以对js和css文件进行一定的压缩，以下是在安卓平台上使用的一个的demo（已经最简化了，删除了不必要的文件，保留的都是需要的）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <script type="text/javascript" src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>

    <script src="js/mobiscroll.appframework.js" type="text/javascript"></script>

    <script src="js/mobiscroll.core.js"></script>

    <script src="js/mobiscroll.util.datetime.js"></script>

    <script src="js/mobiscroll.widget.js" type="text/javascript"></script>

    <script src="js/mobiscroll.scroller.js" type="text/javascript"></script>

    <script src="js/mobiscroll.datetime.js" type="text/javascript"></script>

    <script src="js/mobiscroll.widget.android.js" type="text/javascript"></script>

    <script src="js/i18n/mobiscroll.i18n.zh.js" type="text/javascript"></script>

    <link href="css/mobiscroll.widget.css" rel="stylesheet" type="text/css" />

    <link href="css/mobiscroll.widget.android.css" rel="stylesheet" type="text/css" />

    <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />

    <link href="css/mobiscroll.scroller.android.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">

        $(function () {

           $("#test").mobiscroll().datetime({ dateFormat :'yy-mm-dd', mode:'scroller', lang:'zh', theme: 'android', display: 'modal'});

        });

    </script>

</head>

<body>

    <div data-role="page" data-theme="b">

        <div data-role="header" data-theme="a" class="header">

            <h1>Mobiscroll</h1>

        </div>

        <div data-role="content" data-theme="d" class="content">

            <div data-role="fieldcontain" class="demo demo-date demo-datetime demo-time demo-credit">

                <label for="test">Click here to try</label>

                <input name="test" id="test" class="demo-test-date demo-test-datetime demo-test-time demo-test-credit" />

            </div>

        </div>

    </div>

</body>

</html>

显示效果如下：

在真机上测试之后发现运行比较流畅，唯一不足之处在于选择日期时间的时候会等待1秒左右才弹出这个控件，这是难以避免的，完全是web元素展现出来的，必然要花费一定的时间去渲染（这就是HTML5开发和原生开发的差别所在）。

关于使用jqmobi前端框架在phonegap平台上开发时的日期时间选择控件的更多相关文章

  1. 解决使用elementUI框架el-upload跨域上传时session丢失问题

    解决方法一: 1.使用elementUI框架el-upload跨域上传时,后端获取不到cookie,后端接口显示未登录,在添加了 with-credentials="true"后依 ...

  2. HTML5——摒弃插件和前端框架的异步文件上传

    之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...

  3. .Net语言 APP开发平台——Smobiler学习日志：用MenuView控件仿钉钉APP的首页菜单

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...

  4. .Net语言 APP开发平台——Smobiler学习日志：用Gridview控件设计较复杂的表单

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...

  5. SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework

    一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...

  6. 移动HTNL5前端框架—MUI

      前  言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...

  7. 移动HTML5前端框架—MUI

      前  言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...

  8. 前端框架 Vue 初探

    一.前言 前几日使用微信网页版时,好奇这个网页用了什么前端框架.用Chrome的开发人员模式一探到底,发现原来用了一个名叫 Angular 的框架.好吧,既然微信用了.那我也最好还是看看.等等,你这篇 ...

  9. 非常不错的前端框架Kendo-ui

    近期公司在做重构,准备换前端框架由Extjs换kendo-ui,问什么要换框架呢?主要有以下几个原因: Extjs太重,偏向后端语言,前端写起来费劲 Extjs执行太慢(这是主要原因),因为Extjs ...

随机推荐

  1. 「6月雅礼集训 2017 Day11」jump

    [题目大意] 有$n$个位置,每个位置有一个数$x_i$,代表从$i$经过1步可以到达的点在$[\max(1, i-x_i), \min(i+x_i, n)]$中. 定义$(i,j)$的距离表示从$i ...

  2. 21、python操作redis的模块？

    什么是redis? redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  3. Java的9种基本数据类型的大小，以及他们的封装类

    由于java程序是运行在虚拟机之上的,所以java的基本数据类型的大小是确定的,不会随着操作系统的位数的改变而改变. 在计算机中,存储的是0,1,0,1这样的二进制位,表示为bit,1Byte = 8 ...

  4. Linux 入门记录：五、vi、vim 编辑器

    一.vi.vim编辑器 vi 是一个命令行界面下的文本编辑工具,最早在 1976 年由 Bill Joy 开发.当时名字叫做 ex.vi 支持绝大多数操作系统(最早在类 Unix 操作系统的 BSD上 ...

  5. 【设计模式】享元模式（Flyweight）

    摘要: 1.本文将详细介绍享元模式的原理和实际代码中特别是Android系统代码中的应用. 纲要: 1. 引入享元模式 2. 享元模式的概念及优缺点介绍 3. 享元模式在Android源码中的应用 1 ...

  6. 中断中处理延时及一些函数的调用规则(中断调i2c驱动有感)--中断中的延迟delay与printk函数的冲突【转】

    转自:http://blog.csdn.net/psvoldemort/article/details/8222371 1,中断处理程序中不能使用有睡眠功能的函数,如ioremap,kmalloc,m ...

  7. 微信小程序获取输入框(input)内容

    微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type= ...

  8. JVM监控常用命令行工具

    jps jps -mlv //列出正在运行的虚拟机进程 jstat jstat -gc pid //监视java堆状况 显示列名 具体描述 S0C 年轻代中第一个survivor(幸存区)的容量 (字 ...

  9. Python Flask 配置文件

    1. 什么是配置文件? 就是当程序调用的一些参数,文件路径,方法或者类放到一个文件中, 当下次需要修改的一个参数的时候,不用再从所有关联的程序中找到该参数挨个修改, 比较繁琐.像Django中,程序启 ...

  10. Commons CLI 学习（1）

    The Apache Commons CLI library provides an API for parsing command line options passed to programs. ...