前一阵子接触到了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. 【转载】Java实现word转pdf

    最近遇到一个项目需要把word转成pdf,GOOGLE了一下网上的方案有很多,比如虚拟打印.给word装扩展插件等,这些方案都依赖于ms word程序,在java代码中也得使用诸如jacob或jcom ...

  2. 如何防范自己的IP泄漏

    在正式进行各种“黑客行为”之前,黑客会采取各种手段,探测(也可以说“侦察”)对方的主机信息,以便决定使用何种最有效的方法达到自己的目的.来看看黑客是如何获知最基本的网络信息——对方的IP地址:以及用户 ...

  3. 模拟试题B

    模拟试题B 一.单项选择题(2′*8 =16′) 1．灰度等级为256级,分辨率为2048*1024的显示器,至少需要的帧缓存容量为( ) A)512KB B)1MB C)2MB D)3MB 2．在多 ...

  4. 02--读书笔记之：C++ Primer （第4版）及习题

    推荐博客:http://www.cnblogs.com/xkfz007/archive/2012/08/15/2639381.html 第2章 数据和基本类型 1. 整型 2. 习题:左值和右值 3. ...

  5. 遍历及过滤 first(), last() 和 eq() filter() 和 not()

    三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素.其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹 ...

  6. 【转】VGG网络结构及参数

     VGG网络  VGG16输入224*224*3的图片,经过的卷积核大小为3x3x3,stride=1,padding=1,pooling为采用2x2的max pooling方式: 1.输入224x2 ...

  7. nginx安装http2.0协议

    1.HTTP2协议 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量.从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响.所有HTTP 首部.值,以及它们的使用场景都 ...

  8. Virtual servers on a Raspberry Pi with the light weight OS virtualization system Docker!

    转自:http://www.hyggeit.dk/2014/02/virtual-servers-on-raspberry-pi-with.html Virtual servers on a Rasp ...

  9. Javascript解析URL

    举个栗子,一个网页的URL为https://i.cnblogs.com/EditPosts.aspx?opt=1,要分离出通信协议.host.port.path.query.hash等值.这时候我们应 ...

  10. Ubuntu下安装Tensorflow

    本文目录 引言 基于Anaconda的tensorflow安装 1 下载linux版本的Anaconda安装包 2 安装Anaconda 利用anaconda安装tensorflow 1 建立一个 c ...