• mobiscroll插件的基本使用方法


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

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>mobiscroll练习</title>
     9   <link rel="stylesheet" type="" href="../06-mobiscoll插件案例/css/mobiscroll.custom-2.17.1.min.css">
    10 </head>
    11 
    12 <body>
    13   <input type="text" id="input" name="" value="">
    14   <button id="clear">clear</button>
    15   <button id="show">show</button>
    16 
    17   <script src="../01-demo/jquery-1.8.3.min.js"></script>
    18   <script src="../06-mobiscoll插件案例/js/mobiscroll.custom-2.17.1.min.js"></script>
    19   <script>
    20     $(function () {
    21       var now = new Date();
    22       var currYear = now.getFullYear();
    23       var currMonth = now.getMonth() + 1;
    24       var currDay = now.getDate();
    25       var option = {
    26         preset: 'date', //日期,可选:datedatetime	ime	ree_listimage_textselect
    27         theme: 'android-ics light', //皮肤样式,可选:defaultandroidandroid-ics lightandroid-icsiosjqmsense-uiwp lightwp
    28         display: 'modal', //显示方式 ,可选:modalinlineubble	opottom
    29         lang: "Chinese",
    30         showLabel: true,//false  显示头部
    31         rows: 5,//显示多少行,定义3就显示3行,
    32         dateFormat: 'yyyy-mm-dd', // 面板日期格式
    33         setText: '确认', //确认按钮名称
    34         cancelText: '取消', //取消按钮名称
    35         dateOrder: 'yyyymmdd', //面板中日期排列格式
    36         dayText: '日',
    37         monthText: '月',
    38         yearText: '年', //面板中年月日文字
    39         // showNow: false,
    40         nowText: "今",
    41         endYear: currYear + 10, //结束年份
    42         minDate: new Date(currYear, currMonth - 1, currDay + 1),
    43         onSelect: function (textVale, inst) { //选中时触发事件
    44           console.log("我被选中了.....");
    45         },
    46         onClose: function (textVale, inst) { //插件效果退出时执行 inst:表示点击的状态反馈:set/cancel
    47           console.log("textVale--" + textVale);
    48           console.log(this.id);//this表示调用该插件的对象
    49         }
    50 
    51         //wheels:[[11,12,13],[21,22,23],[01,02,03]],// 当前你定义的数组(即要滚动的数组),
    52         //defaultValue: [12,22]//默认显示当前滚动到哪个值,
    53         // formatResult://滚动到某个值后执行某个方法
    54         // function(){
    55         //   console.log(1);
    56         // }
    57       }
    58       
    59       //面板显示日期
    60       $("#input").mobiscroll().date(option);
    61 
    62       //面板显示时间
    63       // $("#input").mobiscroll().time(option);
    64 
    65       $("#clear").click(function () {
    66         $("#input").mobiscroll("clear");
    67         return false;
    68       });
    69 
    70       $("#show").click(function () {
    71         $("#input").mobiscroll("show");
    72         return false;
    73       });
    74     });
    75   </script>
    76 </body>
    77 
    78 </html>
  • 相关阅读:
    BZOJ4827: [Hnoi2017]礼物(FFT 二次函数)
    洛谷P3586 [POI2015]LOG(贪心 权值线段树)
    BZOJ4373: 算术天才⑨与等差数列(线段树 hash?)
    cf711D. Directed Roads(环)
    洛谷P3313 [SDOI2014]旅行(树链剖分 动态开节点线段树)
    洛谷P2045 方格取数加强版(费用流)
    cf900D. Unusual Sequences(容斥 莫比乌斯反演)
    agc007D
    hdu 4287Intelligent IME(简单hash)
    Python Post and Get 登陆web后台系统并抓取页面
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8251853.html
走看看 - 开发者的网上家园