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中typeof的使用示例
Dec 19 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
vue仿element实现分页器效果
2018/09/13 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python之消除前缀重命名的方法
2018/10/21 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
医师定期考核实施方案
2014/05/07 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
社区节水倡议书
2015/04/29 职场文书
工作经历证明范本
2015/06/15 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
详细聊聊vue中组件的props属性
2021/11/02 Vue.js