• 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他们的差不多的。

  • 相关阅读:
    数组作为函数参数传递时
    Tree 笨方法实现
    双向链表
    带头节点的循环链表及两个循环链表的合并
    josephus问题->不带头节点的循环链表
    数组形式链表
    检测qq是否在线
    Python-requests模块
    Python面向对象练习——基于面向对象设计一个对战游戏
    Python-面向对象
  • 原文地址:https://www.cnblogs.com/hiuman/p/7347406.html
Copyright © 2020-2023  润新知