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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 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
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
js实现开关灯效果
2020/03/30 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python发送Email方法实例
2014/08/21 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
详解Django中的过滤器
2015/07/16 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
电子商务个人自荐信
2013/12/12 职场文书
设计专业自荐信
2014/06/19 职场文书
奖金申请报告模板
2015/05/15 职场文书
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js