jQuery Mobile开发中日期插件Mobiscroll使用说明


Posted in Javascript onMarch 02, 2016

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

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

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

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

放在一起对比下

jQuery Mobile开发中日期插件Mobiscroll使用说明

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

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

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

jQuery Mobile开发中日期插件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啦 看下效果图吧

jQuery Mobile开发中日期插件Mobiscroll使用说明

这下看的清楚了吧。不写啦,就这写这么多吧,官网的DOCS 写的很详细啦,在此不一一列出啦,有兴趣的朋友可以去研究下。

Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
javascript求日期差的方法
Mar 02 #Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 #Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 #Javascript
js实现不重复导入的方法
Mar 02 #Javascript
基于JavaScript实现智能右键菜单
Mar 02 #Javascript
JS简单实现String转Date的方法
Mar 02 #Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 #Javascript
You might like
表格展示无限级分类(PHP版)
2012/08/21 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
python实现马耳可夫链算法实例分析
2015/05/20 Python
Python内建模块struct实例详解
2018/02/02 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python 变量类型详解
2018/10/10 Python
python实现字符串加密成纯数字
2019/03/19 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python模块的制作方法实例分析
2019/12/21 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
python绘图模块之利用turtle画图
2021/02/12 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
财务简历的自我评价
2014/03/05 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
Python测试框架pytest高阶用法全面详解
2022/06/01 Python