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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
node.js实现端口转发
2016/04/14 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
angular十大常见问题
2017/03/07 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
环境工程专业自荐信范文
2014/03/18 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
七一讲话心得体会
2014/09/05 职场文书
新郎新娘答谢词
2015/01/04 职场文书
博士导师推荐信
2015/03/25 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
退伍军人感言
2015/08/01 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android