总有一款适合你—移动端微网站—仿app时间滚动选择效果实现

上次给大家介绍了一款移动端微网站的时间选择插件 ,你还记得么？
今天给大家介绍一款新的插件：mobiscroll，为什么上次的可以用，这次还要介绍新的呢？
主要因为它十分灵活，可控，总有一种组合适合你。

首先介绍其优点：

多主题（默认、IOS、SenseUI、Android-ICS-Light、Android-ICS、WindowsLight、WindowsPhone）；
多模式（滚动、点击、混合）；
多显示形式（拾取、直接、气泡、顶部、底部）；
多动画（无、渐显、翻转、弹出、翻书、从左滑出、自下而上、自上滑出、自下滑出）；
多种模式——赋予不同的参数，就可以只选到日期、只选时间、日期时间同时选；

我们可以任意组合上面的，别晕，下面看效果图你就知道各自对应什么了。

话不多说，先看效果图：

多主题

默认.png

IOS.png

SenseUI.png

Android-ICS-Light.png

Android-ICS.png

WindowsLight.png

WindowsPhone.png

多模式（以Android-ICS-Light主题为例，下面都用这主题，因为笔者觉得这个主题更好看）

滚动.png

点击.png

混合（点击-滚动都可以）.png

多显示形式

直接显示在界面上.png

拾取.png

底部.png

顶部.png

气泡.png

多动画
多动画在这里光靠图片模拟不出来，靠各位自己去尝试了，我会在最后附一个demo的链接，大家可以下了看看，在里面寻找自己想要的组合效果。
多种模式
最后就是多模式了，日常开发过程中，对日期精确地位数要求有很多，像“只要日期”、“只要时间”、“日期和时间都要“的情况都是很常见的。

只要日期.png

只要时间.png

日期时间都要.png

好了，常见的需求以上基本都能满足了，你可以自己组合。

我们该如何组合呢？来看看部分代码

应用不同的主题只要在这里引用不同的css和js（对应名称一看就知道）

<!-- <link href="css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.android.css" rel="stylesheet" type="text/css" /> -->
    <link href="css/mobiscroll.scroller.android-ics.css" rel="stylesheet" type="text/css" />
    <!-- <link href="css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.sense-ui.css" rel="stylesheet" type="text/css" />
    <link href="css/mobiscroll.scroller.wp.css" rel="stylesheet" type="text/css" />
 -->
    <link href="css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/mobiscroll.custom.min.css">

被注释掉的都是其他的主题，你可以按自己的需要引入不同的css。注意：最后2个css是必须要引入的。
不同的css主题引入的js也是不一样的，看下面代码

<script src="js/mobiscroll.zepto.js" type="text/javascript"></script>
    <script src="js/mobiscroll.core.js" type="text/javascript"></script>
    <script src="js/mobiscroll.scroller.js" type="text/javascript"></script>
    <script src="js/mobiscroll.datetime.js" type="text/javascript"></script>
    <!-- <script src="js/mobiscroll.select.js" type="text/javascript"></script> -->
    <!-- <script src="js/mobiscroll.scroller.ios.js" type="text/javascript"></script>
    <script src="js/mobiscroll.scroller.android.js" type="text/javascript"></script> -->
    <script src="js/mobiscroll.scroller.android-ics.js" type="text/javascript"></script>
    <!-- <script src="js/mobiscroll.scroller.wp.js" type="text/javascript"></script>
    <script src="js/mobiscroll.i18n.zh.js" type="text/javascript"></script> -->

同样，前4个js也是必须引入的，剩余的看你自己需求来引入对应的js了。

光引入js和css是不够的，还需要执行一段js，很简单

<script type="text/javascript">
        $(function () {
            var curr = new Date().getFullYear();
            var fun = function () {
                $('#txttest').scroller('destroy').scroller({
                    preset: 'date',
                    minDate: new Date(2012, 3, 10, 9, 22),
                    maxDate: new Date(2014, 7, 30, 15, 44),
                    invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
                    theme: $('#theme').val(),
                    mode: $('#mode').val(),
                    lang: 'zh',
                    display: $('#display').val(),
                    animate: $('#animation').val()
                });
            }
            $('.settings select').bind('change', function () {
                fun();
            });
            fun();
        });
    </script>

我们可以在这里进行配置。

时间、日期、日期时间同时保留配置
这个就更简单了，只要对上面我们写的js修改一个参数

 preset: 'date'---日期
 preset: 'time' --- 时间
 preset: 'datetime' ---日期时间都保留

最后，如果你要知道更多的配置项，可以去英文官网查看，狠戳这里。

测试选择.png

如果你想要组合自己想要的显示方式，可以在我附带的demo中实时选择，再配置，如上图。查看demo，狠戳这里。(PS:密码 5uwp)

如果这篇文章，帮助到了你，麻烦帮忙点赞啦~