学习 2016/8/16

如何实现一个时间选择器

阅读时长 6 分钟

本文还在继续完善中，暂时提交到网站展示。

提到** 选择器 **的时候，脑海中最先浮现的是 ** select ** 表单控件，它可以简单的下拉选择。以及html5中新增的 ** input ** 类型，这都是一系列自带的表单选择控件。

强势围观原生选择控件

select的属性 autofocus / disabled / from / multiple / name / size

input的类型 text / radio / checkbox / button / submit / reset / file / hidden / image / 新增的类型

  • 颜色
  • 邮箱
  • 电话
  • url
  • 随机数
  • 浮点数
  • 搜索
  • 时间或日期

html5中已经增加了很多控件，但就显示效果来看，兼容性还是问题，控件皮肤也不能自定义。于是还是需要再自己实现一些相应的控件来满足日常需求。

模仿 IOS select组件

自定义select

  • div模拟最基本样式的select 

        <div class="select" id="y">
        <!--<div class="select-selected-value">1</div>-->
        <!--<input type="text" class="select-selected-value" value="1">-->
        <span class="select-selected-text">张三</span>
        <div class="select-option" style="display: none;">
            <header class="select-option-header">
                <span class="cancel button">取消</span>
                <span class="confirm button button-blue">确定</span>
            </header>
            <ul class="select-option-body">
                <li class="option checking" data-value="1">张三</li>
                <li class="option" data-value="2">李四</li>
                <li class="option" data-value="3">王五</li>
            </ul>
        </div>
    </div>

    获取源 select 的name作为自定义的id，默认值为select-selected-text 或者 select-selected-value，选项为li，选中的想特殊样式checking。

  • 按照源样式的属性生成新的div结构select
    每一个select作为一个对象，选择需要自定义的select创建元素

  • js隐藏源select
    css隐藏掉select本身的html结构

  • js操作新的select实现选择效果 元素创建好以后给select注册事件，每次展开select的时候检测是不是当前默认值在选项中背景高亮，取消select选中的选择，确认选中的选择，均关闭select展开

> 点这里Demo

模拟日期选择器

在上面select效果的基础上，日期选择器有3列（年、月、日），需要将原来的单列拆分一下，变成三列，还是先自定义了html结构。 这其中遇见的问题，在之前的结构基础上增加了两列，为了兼容前面的，结构主体需要保持不变。之前是针对select标签，这里日期选择使用的是type为date的input标签。自然create时需要检测元素的名称与类型。点击选择的时候也是三项元素存放在一起，最后在合并显示。

问题总结

  • 初始值 min：最小值
    max：最大值
    size：显示几行
    value：选择的值
    text：选择的文本 className：自定义元素名，用于特殊UI样式自定义
    ……
    初始值都是尽量按照html结构的本身语义来设置组织，如果没有取值的情况下都是设置默认值。

  • html结构通用 主体结构一直的情况下，数据需要分离出来，最后依据传入的对象的length来判断需要生成一个几列选择器。这样基本就保证了结构可以一致，无论是单列选择，还是日期年月日的选择，甚至扩展为区域选择是一样的道理。

  • 多元素选择默认值 这个在日期选择器模拟的时候任然还没解决。

在上次的基础上继续重写

随着问题的解决，问题也不端的出现，看似思路正确的时候，最后却发现错的很离谱，一种再次到重头的感觉。

问题总结

  • 时间选择时没有联动，数据固定，结果思路错误，导致后续的区域选择会出现同样的问题

  • 想简单实现拖动然后切换选择，结果也卡在了事件的处理上，前面学习的基础知识需要再次回顾学习

  • 心态的把控（随时调整心态，不担心一直在停止在原地，没有前进。在原地我依然发现了自己的一些问题，解决完再继续走）

新的一天开始再次新的起点出发

一直拖着没有认真完成，今天再次归零，首先找几个类似的方案学习一下，看看别人的思路是怎么样的？再来发现自己整个思路中的问题所在，以及如何继续实现。
初略的实现了一个还没完成的效果发给了叶师，结果可想而知，到重头，再来。

实现select

模拟IOS的select

select.png
对比上面实现的例子与截图可以发现UI上还是有一些差别，以及功能实现上也有一些差别，接下来主要的工作就是按照截图优化上面的例子。

参考资料

transform-style