码迷,mamicode.com
首页 > 其他好文 > 详细

mui ——picker(选择器)

时间:2020-09-03 16:40:11      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:style   function   展示   返回   erp   arc   lips   ret   ima   

效果展示:技术图片

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);

 

mui ——picker(选择器)

标签:style   function   展示   返回   erp   arc   lips   ret   ima   

原文地址:https://www.cnblogs.com/cqiong/p/13552857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!