zoukankan      html  css  js  c++  java
  • js插件 日期选择器 datePicker(拖拽上下拉动的选项)

    新版本更新:鼠标上下拖动选择内容:http://hiuman.iteye.com/blog/2353563

    (如有错敬请指点,以下是我工作中遇到并且解决的问题)

    一开始搜这个内容的时候,搜索结果基本都是不沾边的。
    很多都是日历选择器,最接近的就是这两种。
    一对比之下,自然是选右侧的,简洁大方,美观。



    (图1是17素材里面找到的,图2好像是博客园)

    然而,看了一眼它引入的js,就找到它的官网,搜mobiscroll即可。这个网站里面有很多很好的例子,有各式各样的选择。
    恕我愚昧,我不会将这个插件和我的网页结合在一起,我就放弃了。(倒腾了一天T.T)

    = = = = = = = = = = = = = = = = 代 码 = = = = = = = = = = = = = = = =



    = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

    还找到过jqueryMobile的swipe,看到效果还可以,以为可以上下拖动/滑动的,百度+倒腾了好久才发现不可以,心塞塞的。
    还有什么jqueryUI的Draggable,这仅仅是拖动啊喂。等等等等....反正转了很多弯掉进很多坑。
    后来想着搜拖动和拖拽不行,那就搜日历选择器吧。然后就有各式各样出名网站的日历选择器的插件……
    想着去加的群里问问,结果问到的结果是:很简单啊,js做就好了。.....不就一个轮播吗。....

    想到轮播的拖拉就搜了Swiper,这个也是不错的插件。我没试这个插件,不知道能不能上下拖动的。

    什么gui,依旧帮不上忙)然后跑去问后台的大神,他说:这个打不了,那是andri原生的控件效果,网页模仿起来超难的,你让你们的大神想办法吧,这个像模仿手机那种滑动选择东西的控件很难弄的。

    快要放弃了的时候,我打算去找日历选择器的共同点,就是都是叫datepicker。(无奈脸)

    然后就干脆搜picker了。发现了framework7,(看了它的样式,一脸找到宝藏的幸福脸),然后看着看着发现了MSUI(SUI),它是基于framework7写的,就跑进去看了。

    因为framework7要写ios,android两种才可以。(两个效果差不多)

    = = = = = = = = = = = = = = 看 这 里 = = = = = = = = = = = = = =
    SUI是淘宝团队开发的。效果还不错。就用这个了。效果图:



    (引入的文件略,一共五个,不知道怎么写的可以看它网站的 [ 开始使用 ] )
    代码比较简单:

    <input type="text" id='picker'/>
    <script>
    $("#picker").picker({
      toolbarTemplate: '<header class="bar bar-nav">
      <button class="button button-link pull-left">按钮</button>
      <button class="button button-link pull-right close-picker">确定</button>
      <h1 class="title">标题</h1>
      </header>',
      cols: [
        {
          textAlign: 'center',
          values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
        }
      ]
    });
    </script>
    



    最后:
    还找到了类似效果的,比如MUI的picker,Dcloud的。这个跟SUI他们的差不多的。

  • 相关阅读:
    Maidsafe-去中心化互联网白皮书
    The Top 20 Cybersecurity Startups To Watch In 2021 Based On Crunchbase
    Top 10 Blockchain Security and Smart Contract Audit Companies
    The 20 Best Cybersecurity Startups To Watch In 2020
    Blockchain In Cybersecurity: 11 Startups To Watch In 2019
    004-STM32+BC26丨260Y基本控制篇(阿里云物联网平台)-在阿里云物联网平台上一型一密动态注册设备(Android)
    涂鸦开发-单片机+涂鸦模组开发+OTA
    000-ESP32学习开发-ESP32烧录板使用说明
    03-STM32+Air724UG远程升级篇OTA(阿里云物联网平台)-STM32+Air724UG使用阿里云物联网平台OTA远程更新STM32程序
    03-STM32+Air724UG远程升级篇OTA(自建物联网平台)-STM32+Air724UG实现利用http/https远程更新STM32程序(TCP指令,单片机程序检查更新)
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347406.html
Copyright © 2011-2022 走看看