总有一款适合你-移动端微网站-仿app时间滚动选择效果实现_html/css_WEB-ITnose
Jun 21, 2016 am 08:58 AM
首先介绍其优点:上次给大家介绍了一款 移动端微网站的时间选择插件 ,你还记得么?今天给大家介绍一款新的插件: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">
Salin selepas log masuk被注释掉的都是其他的主题,你可以按自己的需要引入不同的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> -->
Salin selepas log masuk同样,前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>
Salin selepas log masuk我们可以在这里进行配置。
时间、日期、日期时间同时保留配置这个就更简单了,只要对上面我们写的js修改一个参数
最后,如果你要知道更多的配置项,可以去英文官网查看, 狠戳这里 。preset: 'date'---日期preset: 'time' --- 时间preset: 'datetime' ---日期时间都保留
Salin selepas log masuk测试选择.png
如果你想要组合自己想要的显示方式,可以在我附带的demo中实时选择,再配置,如上图。查看demo, 狠戳这里 。(PS:密码 5uwp)如果这篇文章,帮助到了你,麻烦帮忙点赞啦~

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah tujuan & lt; meter & gt; unsur?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Apakah tujuan & lt; DATALIST & GT; unsur?

Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
