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. JS中的表单验证+正则表达式

    表单验证+正则表达式 一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. < ...

  2. 【转载】VS2013安装需要IE10

    因为需要移动办公,需要给笔记本搭建编程环境.安装VS2013时遇到了小麻烦,提示我,需要安装IE10. 然后我很听话的按照提供的超链接,到了官网,下载了最新的IE11,然后安装,结果告诉我下载的IE版 ...

  3. 所有和Java中代理有关的知识点都在这了。

    对于每一个Java开发来说,代理这个词或多或少都会听说过.你可能听到过的有代理模式.动态代理.反向代理等.那么,到底什么是代理,这么多代理又有什么区别呢.本文就来简要分析一下. 代理技术,其实不只是J ...

  4. Java中class的初始化顺序

     由于Java 中的一切东西都是对象,所以许多活动 变得更加简单,这个问题便是其中的一例. 除非真的需要代码,否则那个文件是不会载入的.通常,我们可认为除非那个类的一个对象构造完毕,  否则代码不会真 ...

  5. 集合框架源码学习之ArrayList

    目录: 0-0-1. 前言 0-0-2. 集合框架知识回顾 0-0-3. ArrayList简介 0-0-4. ArrayList核心源码 0-0-5. ArrayList源码剖析 0-0-6. Ar ...

  6. ubuntu 提速

    linux的各大发行版,都有些不必要的服务被默认开启了,针对ubuntu,我们可以采用选择性关闭的方法加速起动,提高系统性能. 这里我们安装一个软件: sudo apt-get install sys ...

  7. PKUWC 2019 自闭记

    PKUWC 2019 自闭记 Day -1 考前天天在隔壁的物竞教室划水(雀魂,能和吉老师一起玩的游戏都是好游戏),没有做题. Day 0 早上8:16的高铁,到广州南居然要6个小时...不知道福州和 ...

  8. python基础===python实现截图

    python实现全屏截图: from PIL import ImageGrab im = ImageGrab.grab() im.save('F:\\12.png')

  9. 使用node.js做一个自用的天气插件

    var request = require('request') var url = 'http://www.baidu.com/home/xman/data/superload' var cooki ...

  10. Jmeter接口测试示例

    如果是Web,需要使用badboy进行录制,今天讲的是接口,因此可以不用录制. (1)新建测试计划 (2)添加http请求默认值 (3)添加http信息头管理器 (4)添加token的正则表达式:&q ...