前一阵子接触到了mobiscroll插件,用在移动端的日期选择上,感觉倍棒,于是便敲了一个小案例,与大家一起分享分享

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mobiscroll练习</title>
<link rel="stylesheet" type="" href="../06-mobiscoll插件案例/css/mobiscroll.custom-2.17.1.min.css">
</head> <body>
<input type="text" id="input" name="" value="">
<button id="clear">clear</button>
<button id="show">show</button> <script src="../01-demo/jquery-1.8.3.min.js"></script>
<script src="../06-mobiscoll插件案例/js/mobiscroll.custom-2.17.1.min.js"></script>
<script>
$(function () {
var now = new Date();
var currYear = now.getFullYear();
var currMonth = now.getMonth() + 1;
var currDay = now.getDate();
var option = {
preset: 'date', //日期,可选:date\datetime\time\tree_list\image_text\select
theme: 'android-ics light', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
display: 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottom
lang: "Chinese",
showLabel: true,//false 显示头部
rows: 5,//显示多少行,定义3就显示3行,
dateFormat: 'yyyy-mm-dd', // 面板日期格式
setText: '确认', //确认按钮名称
cancelText: '取消', //取消按钮名称
dateOrder: 'yyyymmdd', //面板中日期排列格式
dayText: '日',
monthText: '月',
yearText: '年', //面板中年月日文字
// showNow: false,
nowText: "今",
endYear: currYear + 10, //结束年份
minDate: new Date(currYear, currMonth - 1, currDay + 1),
onSelect: function (textVale, inst) { //选中时触发事件
console.log("我被选中了.....");
},
onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈:set/cancel
console.log("textVale--" + textVale);
console.log(this.id);//this表示调用该插件的对象
} //wheels:[[11,12,13],[21,22,23],[01,02,03]],// 当前你定义的数组(即要滚动的数组),
//defaultValue: [12,22]//默认显示当前滚动到哪个值,
// formatResult://滚动到某个值后执行某个方法
// function(){
// console.log(1);
// }
} //面板显示日期
$("#input").mobiscroll().date(option); //面板显示时间
// $("#input").mobiscroll().time(option); $("#clear").click(function () {
$("#input").mobiscroll("clear");
return false;
}); $("#show").click(function () {
$("#input").mobiscroll("show");
return false;
});
});
</script>
</body> </html>

mobiscroll插件的基本使用方法的更多相关文章

  1. mobiscroll 插件札记(一)

    mobiscroll 插件笔记(一) 文章参照  http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html 最近切一个移动页面,需 ...

  2. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  3. Android应用插件式开发解决方法

    转自:http://blog.csdn.net/arui319/article/details/8109650 一.现实需求描述 一般的,一个Android应用在开发到了一定阶段以后,功能模块将会越来 ...

  4. C#实现插件式架构的方法

    插件式架构,一种全新的.开放性的.高扩展性的架构体系.插件式架构设计近年来非常流行,基于插件的设计好处很多,把扩展功能从框架中剥离出来,降低了框架的复杂度,让框架更容易实现.扩展功能与框架以一种很松的 ...

  5. MyEclipse安装插件的几种方法 转

    http://www.cnblogs.com/pharen/archive/2012/02/08/2343342.html MyEclipse安装插件的几种方法 本文讲解MyEclipse(MyEcl ...

  6. Android应用插件式开发解决方法[转]

    一.现实需求描述 一般的,一个Android应用在开发到了一定阶段以后,功能模块将会越来越多,APK安装包也越来越大,用户在使用过程中也没有办法选择性的加载自己需要的功能模块.此时可能就需要考虑如何分 ...

  7. MyEclipse6.5安装SVN插件的三种方法

    MyEclipse6.5安装SVN插件的三种方法 方法一.如果可以上网可在线安装 1. 打开Myeclipse,在菜单栏中选择Help→Software Updates→Find and Instal ...

  8. Xcode中插件的安装以及Xcode升级后插件实效的解决方法

    插件的安装 下载好插件,直接运行,然后将Xcode关闭,再次打开Xcode会弹出一个提醒框. 这时候选择 Load Bundle 即可,这时候插件就安装到了Xcode上. Xcode所有的插件都安装在 ...

  9. 【Devops】【Jenkins】Jenkins插件安装失败处理方法

    本篇解释:Jenkins插件安装失败处理方法 不论是刚启动成功后进行的推荐插件安装,还是后期使用Jenkins过程中进行插件的安装.出现插件安装失败的问题,可以通过本篇解决! [注意,插件下载安装失败 ...

随机推荐

  1. WP 图片加载时显示加载中

    private BitmapImage srcimage = new BitmapImage(); public MainPage() { InitializeComponent(); progres ...

  2. 使用UMDH进行内心泄露分析

    事前准备 1.安装windbg,安装好后在path中添加其安装目录(目的是为了执行命令行简单) 2.(设置符号路径,一般为接口所在路径)运行cmd,执行命令:set _NT_SYMBOL_PATH=d ...

  3. C++的Matlab接口

    与 原文 过程有些不同,根据具体环境自行配置即可! 转自于:http://blog.csdn.net/left_la/article/details/8206645 我的计算机环境是win7 64位系 ...

  4. gitignore相关

    用git也有一段时间了,前些天在公司fork一个新的项目着手做,结果这个项目的creator早先把eclipse的配置文件也提交了上去,后续其他参与者提交代码时,这几个文件总是要注意不选中. 虽然不影 ...

  5. (转)RabbitMQ学习之消息可靠性及特性

    http://blog.csdn.net/zhu_tianwei/article/details/53971296 下面主要从队列.消息发送.消息接收方面了解消息传递过的一些可靠性处理. 1.队列 消 ...

  6. hdu5676 ztr loves lucky numbers(dfs)

    链接 ztrloveslucky numbers 题意 定义幸运数为:只存在4和7且4和7数量相等的数,给出n,求比>=n的最小幸运数 做法 暴力搜出所有长度从2-18的幸运数,因为最多9个4, ...

  7. springboot实现mongodb上传下载

    1.上传: private static Logger log = LoggerFactory.getLogger(MongoDbFSUtil.class); private static final ...

  8. php 流

    php:// — 访问各个输入/输出流(I/O streams) 说明 PHP 提供了一些杂项输入/输出(IO)流,允许访问 PHP 的输入输出流.标准输入输出和错误描述符, 内存中.磁盘备份的临时文 ...

  9. Spring框架的理解

    Spring 是一個开源的IOC和AOP容器框架! 具体描述为: 1.轻量级:Spring是非侵入性-基于Spring开发的应用中的对象可以不依赖API开发 2.依赖注入(DI---------dep ...

  10. 【codeforces 716D】Complete The Graph

    [题目链接]:http://codeforces.com/problemset/problem/716/D [题意] 给你一张图; 这张图上有一些边的权值未知; 让你确定这些权值(改成一个正整数) 使 ...