mui ——picker（選擇器）

效果展示：

1.頭部引入css：mui.picker和mui.poppicker 兩個css文件 

 

2.HTML：

<div id='showUserPicker' class="search-item">
   <span class="search-area">區</span>
   <span id='userResult' class="search-cont mui-ellipsis">江寧區江寧區江寧區</span>
   <span class="pullDown"><img src="../../../img/icon/pulldown_icon.png"></span>
</div>

3.JS:引入picker.min和mui.poppicker兩個文件

 

(function($, doc) {
                $.init();
                $.ready(function() {
                    //普通示例
                    var userPicker = new $.PopPicker();
                    userPicker.setData([{
                        value: '1',
                        text: '玄武區'
                    }, {
                        value: '2',
                        text: '江寧區'
                    }, {
                        value: '3',
                        text: '浦口區'
                    }, {
                        value: '4',
                        text: '雨花台區'
                    }, {
                        value: '5',
                        text: '浦口區'
                    }]);
                    var showUserPickerButton = doc.getElementById('showUserPicker');
                    var userResult = doc.getElementById('userResult');
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            userResult.innerText = items[0].text;
                            //返回 false 可以阻止選擇框的關閉
                            //return false;
                        });
                    }, false);
                });
            })(mui, document);