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 相关文章推荐
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
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上传图片、删除图片简单实例
2016/11/12 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
微信公众号 摇一摇周边功能开发
2016/12/08 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python中进程和线程的区别详解
2017/10/29 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python中对数据进行各种排序的方法
2019/07/02 Python
求职简历自荐信
2013/10/20 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
优秀党员主要事迹
2014/01/19 职场文书
先进个人获奖感言
2014/01/24 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
行政处罚事先告知书
2015/07/01 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Go 语言结构实例分析
2021/07/04 Golang
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
MongoDB使用场景总结
2022/02/24 MongoDB
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript