(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html

jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

 

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊。

日期插件JQM也提供了内置的,但样式方面不好看,只好百度、Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3

jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡

mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅

放在一起对比下

各位看官,你们觉得哪个好看一些呢

反正我觉得 mobiscroll 效果比较好一些,好了来看一些这个家伙的使用方法吧

第一步:到官网去下载个压缩包,下载需要先注册然后才能下载。下载的时候你可以选择你使用的框架及皮肤样式等,看下图

到此假设你已经成功注册并下载啦

第二步、新建一个HTML5文件,引jquery.js,jquerymobile.js 等等必须的文件,编写如下代码到你的文件中:

  

 <div data-role="fieldcontain">
<label for="txtBirthday">出生日期:</label>
<input type="text" data-role="datebox" id="txtBirthday" name="birthday" />
</div>

我们可以这样去初始化日期控件:

$('input:jqmData(role="datebox")').mobiscroll().date();

预览下吧,是不是可以使用了呢!唯独这个界面是英文的,对于国人来说多少有点不爽,而官网又没有提供中文语言包,但没有关系,官网的API还是不错的,我们可以设置一些常用的属性使之符合常规的日期格式。

//初始化日期控件
var opt = {
preset: 'date', //日期
theme: 'jqm', //皮肤样式
display: 'modal', //显示方式
mode: 'clickpick', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dateOrder: 'yymmdd', //面板中日期排列格式
dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
endYear:2020 //结束年份
}; $('input:jqmData(role="datebox")').mobiscroll(opt);

这样就OK啦 看下效果图吧

这下看的清楚了吧。不写啦,就这写这么多吧,官网的DOCS 写的很详细啦,在此不一一列出啦,有兴趣的朋友可以去研究下,在研究的过程有什么心得体会别发贴哦!

文档API 地址:http://docs.mobiscroll.com/

(转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明的更多相关文章

  1. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

  2. PhoneGap与Jquery Mobile组合开发android应用的配置

    PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...

  3. 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)

    使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...

  4. (转)JQM 日期插件 mobiscroll Demo

    (原)http://www.wglong.com/main/artical!details?id=11  JQM 日期插件 mobiscroll Demo 2013-04-25 / 分类:Jquery ...

  5. PhoneGap与Jquery Mobile结合开发android应用配置

    由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...

  6. PhoneGap&jQuery Mobile应用开发环境配置(For Android)

    关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...

  7. jQuery Mobile移动开发

    1.在<head>元素中包括JavaScript文件是传统的方法.然而,依据Yahoo!"80%的终于用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,比如 ...

  8. Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker

    今天我们来聊聊Flutter中的日期和日期选择器. Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_no ...

  9. [工作总结]jQuery在工作开发中常用代码片段集锦(1-10)

    1.jQuery,JS实现tab切换 原生JS实现 HTML代码如下: <div class="wrap"> <ul id="tag"> ...

随机推荐

  1. iconfont-矢量图标字体的运用

    发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&a ...

  2. noi 666 放苹果

    题目链接:http://noi.openjudge.cn/ch0206/666/ 和ural 1114题意类似,但是有顺序,5,1,1和1,5,1是同一种序列.不能直接枚举 d(i,j) 前 i 个盘 ...

  3. python异常和错误(syntax errors 和 exceptions)

    语法错误 语法错误又被称解析错误 >>> for i in range(1..10):print(i) File "<stdin>", line 1 ...

  4. spring+mybatis+druid+mysql+maven事务配置

    1.首先pom.xml文件里面需要用到的jar配置: <!-- spring事务,包含了@Transactional标注 --> <dependency> <groupI ...

  5. Python3基础 print 查看一个列表中存储的所有内容

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  6. 编写一个JSP程序实现用户登录

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. [HIHO1052]基因工程(找规律)

    题目链接:http://hihocoder.com/problemset/problem/1052 题意:中文题面,就是修改其中几个字符,使得[0,k-1]和[n-k,n-1]的字符相同. 会发现一个 ...

  8. Java vs. C#

    Java Program Structure C# package hello; public class HelloWorld {    public static void main(String ...

  9. (原创)LAMP搭建之一:图解如何安装并检查LAMP

    LAMP搭建之一:图解如何安装并检查LAMP 第一步:安装Linux(RedHat5) 第二步:rpm -qa httpd(查看apache是否安装) rpm -qa php(查看php是否安装) r ...

  10. Codeforces Round #262 (Div. 2)

    A #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...