jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明
近期在移动方面的开发,使用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);
这下看的清楚了吧。不写啦,就这写这么多吧,官网的DOCS 写的很详细啦,在此不一一列出啦,有兴趣的朋友可以去研究下,在研究的过程有什么心得体会别发贴哦!
jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明的更多相关文章
- (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...
- PhoneGap与Jquery Mobile组合开发android应用的配置
PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...
- 使用jQuery Mobile + PhoneGap 开发Android应用程序(转)
使用jQuery Mobile + PhoneGap 开发Android应用程序(转) 一.简介 jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅给 ...
- (转)JQM 日期插件 mobiscroll Demo
(原)http://www.wglong.com/main/artical!details?id=11 JQM 日期插件 mobiscroll Demo 2013-04-25 / 分类:Jquery ...
- PhoneGap&jQuery Mobile应用开发环境配置(For Android)
关于移动应用为什么用PhoneGap和jQuery Mobile本文不再赘述,有兴趣的童鞋可以自行问“度娘”,有很多这方面的文章.本文主要介绍PhoneGap&jQuery Mobile移动应 ...
- PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
- Flutter中的日期插件date_format 中文 国际化 及flutter_cupertino_date_picker
今天我们来聊聊Flutter中的日期和日期选择器. Flutter中的日期和时间戳 //日期时间戳转换 var _nowTime = DateTime.now();//获取当前时间 print(_no ...
- jQuery Mobile移动开发
1.在<head>元素中包括JavaScript文件是传统的方法.然而,依据Yahoo!"80%的终于用户响应时间在前端上"的说法,这些事件大部分花在资产的下载上,比如 ...
- IOS开发中Xcode常用插件安装与管理(转)
XCode中插件管理工具:Alcatraz 转自http://www.cocoachina.com/industry/20140506/8325.html 苹果现在的成绩得益于其始终如一的坚持. ...
随机推荐
- log4j.properties example
google search log4j.properties example Output to Console # Root logger option log4j.rootLogger=INFO, ...
- (转)windows下安装nodejs及框架express
转自:http://jingyan.baidu.com/article/456c463b60fb380a583144a9.html windows下安装nodejs及框架express nodejs从 ...
- 日期运算 jsf日期组建
SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd"); Date date; try { d ...
- 总结一下一般游戏中3D模型各种勾边方法遇到的工程性问题
以前做过简单的rim light勾边,几何勾边,这次又做了后处理的勾边,工程化的时候,都遇到很多问题,简单总结一下. 首先是火炬之光勾边效果,类似轮廓光的实现,简单的卡通渲染也是通过类似的算法加采样色 ...
- [ASE][Daily Scrum]11.21
由于服务器广播那边进度稍慢,所以这几天client和view那边先来做无限地图这部分, View Shilin Liu 不同地图块无缝拼接 当tank走到地图块边缘时从服务器请求新的地图块 ...
- [ALM]一步一步搭建MS ALM环境 - 安装域服务器
描述: 搭建并配置域服务器,先安装操作系统,配置网络,安装组件,配置域帐号 步骤: 1,打开Hyper-V Manager,参考[Hyper-V]使用操作系统模板创建新的虚拟机,先完成操作系统的安装, ...
- 在Android中调用C#写的WebService(附源代码)
由于项目中要使用Android调用C#写的WebService,于是便有了这篇文章.在学习的过程中,发现在C#中直接调用WebService方便得多,直接添加一个引用,便可以直接使用将WebServi ...
- AVL树(三)之 Java的实现
概要 前面分别介绍了AVL树"C语言版本"和"C++版本",本章介绍AVL树的Java实现版本,它的算法与C语言和C++版本一样.内容包括:1. AVL树的介绍 ...
- paip.slap工具与于64位win7与JDBC的性能对比
paip.slap工具与于64位win7与JDBC的性能对比 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog ...
- atitit.hbnt orm db 新新增更新最佳实践o99
atitit.hbnt orm db 新新增更新最佳实践o99 1. merge跟个save了. 1 2. POJO对象处于游离态.持久态.托管态.使用merge()的情况. 1 3. @Dynami ...