选择器

作者提供了单列选择和时间选择两种演示示例。示例和功能借助MUI picker 组件实现。需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="mui/mui.min.css"/>

<link rel="stylesheet" type="text/css" href="mui/mui.picker.min.css"/>

<link rel="stylesheet" type="text/css" href="mui/mui.reset.min.css"/>

<script src="lib/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/mui/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/mui/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>

示例代码

<div class="aui-content">
  <ul>
    <li class="list">
      <p>所在地区</p>
      <span class="choose-btn" id="choose-address" style="color: #333">请选择</span>
      <i class="mui-icon mui-icon-arrowright"></i>
    </li>
    <li class="list">
      <p>当前日期</p>
      <span class="choose-btn" id="date-picker" data-options='{"type":"date"}' style="color: #333">请选择</span>
      <i class="mui-icon mui-icon-arrowright"></i>
    </li>
  </ul>
</div>
<script>
  //选择器
  var initPicker = function(){
    var _this = this;
    (function($, doc) {
        $.init();
        $.ready(function() {
            /**
             * 获取对象属性的值
             * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
             * @param {Object} obj 对象
             * @param {String} param 属性名
             */
            var _getParam = function(obj, param) {
                return obj[param] || '';
            };
            //选择地址
            var cityPicker = new $.PopPicker({
                layer: 1
            });
            var cityData = _this.cityList || [];
            cityPicker.setData(cityData);
            var showCityPickerButton = doc.getElementById('choose-address');
            showCityPickerButton.addEventListener('click', function(event) {
                cityPicker.show(function(items) {
                    _this.city =  items[0].text;
                    _this.city_id = items[0].value;
                    //返回 false 可以阻止选择框的关闭
                    //return false;
                });
            }, false);

            var btn = document.querySelector('#date-picker');
            btn.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        // result.innerText = '选择结果: ' + rs.text;
                        console.log("1:"+rs.text);
                        _this.date = rs.y.value+'-'+rs.m.value+'-'+rs.d.value;
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        // result.innerText = '选择结果: ' + rs.text;
                        // console.log("2:"+rs.text);
                        var timer = setTimeout(function(){
                            clearTimeout(timer);
                            _this.date = rs.y.value+'-'+rs.m.value+'-'+rs.d.value;
                        },300);
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }
            }, false);

        });
    })(mui, document);
    }
</script>