mui中picker（选择器）的使用

 

1.引入文件

   1.1、先引入mui.picker.css和mui.picker.js

  1.2、再引入mui-popicker.css和mui-popicker.js

2.实际使用demo

   2.1、标签模板的写法

                 <h5 class="mui-content-padded">普通示例</h5>
                <button id='showUserPicker' class="mui-btn mui-btn-block" type='button'>一级选择示例 ...</button>
                <div id='userResult' class="ui-alert"></div>
                <h5 class="mui-content-padded">级联示例</h5>
                <button id='showCityPicker' class="mui-btn mui-btn-block" type='button'>二级联动示例 ...</button>
                <div id='cityResult' class="ui-alert"></div>
                <button id='showCityPicker3' class="mui-btn mui-btn-block" type='button'>三级联动示例 ...</button>
                <div id='cityResult3' class="ui-alert"></div>

   2.2、js的写法

  (function($, doc) {
                $.init();
                $.ready(function() {
                    //普通示例
                    var userPicker = new $.PopPicker();
                    userPicker.setData([{
                        value: 'ywj',
                        text: '董事长 叶文洁'
                    }, {
                        value: 'aaa',
                        text: '总经理 艾AA'
                    }, {
                        value: 'lj',
                        text: '罗辑'
                    }, {
                        value: 'ymt',
                        text: '云天明'
                    }, {
                        value: 'shq',
                        text: '史强'
                    }, {
                        value: 'zhbh',
                        text: '章北海'
                    }, {
                        value: 'zhy',
                        text: '庄颜'
                    }, {
                        value: 'gyf',
                        text: '关一帆'
                    }, {
                        value: 'zhz',
                        text: '智子'
                    }, {
                        value: 'gezh', 
                        text: '歌者'
                    }]);
                    var showUserPickerButton = doc.getElementById('showUserPicker');
                    var userResult = doc.getElementById('userResult');
                    showUserPickerButton.addEventListener('tap', function(event) {
                        userPicker.show(function(items) {
                            userResult.innerText = JSON.stringify(items[0]);
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);
                    //-----------------------------------------
                    //级联示例
                    var cityPicker = new $.PopPicker({
                        layer: 2
                    });
                    cityPicker.setData(cityData);
                    var showCityPickerButton = doc.getElementById('showCityPicker');
                    var cityResult = doc.getElementById('cityResult');
                    showCityPickerButton.addEventListener('tap', function(event) {
                        cityPicker.show(function(items) {
                            cityResult.innerText = "你选择的城市是:" + items[0].text + " " + items[1].text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);
                    //-----------------------------------------
                    //                    //级联示例
                    var cityPicker3 = new $.PopPicker({
                        layer: 3
                    });
                    cityPicker3.setData(cityData3);
                    var showCityPickerButton = doc.getElementById('showCityPicker3');
                    var cityResult3 = doc.getElementById('cityResult3');
                    showCityPickerButton.addEventListener('tap', function(event) {
                        cityPicker3.show(function(items) {
                            cityResult3.innerText = "你选择的城市是:" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        });
                    }, false);
                });
            })(mui, document);

这是红色部分的效果图

另外的两个数据，单独写成一个文件并引入

代码的地址

 

总结：

一、api的步骤和说明

1、通过new mui.PopPicker()初始化popPicker组件

  var picker = new mui.PopPicker(); 

2、之后给picker加数据

setData() 支持数据格式为:数组

 picker.setData([{value:'zz',text:'智子'}]); 

3、最后显示picker内容

 picker.show( SelectedItemsCallback ) 

二、具体的代码

步骤1：初始化组件

var userPicker = new $.PopPicker();

步骤2：加数据（也就是点击之后跳出来的数据显示）

userPicker.setData([{
                        value: 'ywj',
                        text: '董事长 叶文洁'
                    }, {
                        value: 'aaa',
                        text: '总经理 艾AA'
                    }, {
                        value: 'lj',
                        text: '罗辑'
                    }, {
                        value: 'ymt',
                        text: '云天明'
                    }, {
                        value: 'shq',
                        text: '史强'
                    }, {
                        value: 'zhbh',
                        text: '章北海'
                    }, {
                        value: 'zhy',
                        text: '庄颜'
                    }, {
                        value: 'gyf',
                        text: '关一帆'
                    }, {
                        value: 'zhz',
                        text: '智子'
                    }, {
                        value: 'gezh', 
                        text: '歌者'
                    }]);

步骤3：    对数据的处理（获取和排版）

            var showUserPickerButton = document.getElementById('showUserPicker');   //获取点击的位置
                    var userResult = document.getElementById('title-text');                          //数据放置的位置
                    showUserPickerButton.addEventListener('tap', function(event) {           //回调函数的使用
                        userPicker.show(function(items) {
                            userResult.innerText = JSON.stringify(items[0].text).replace("\"","").replace("\"","") //获取数据，去掉双引号并放到指定位置;
                            //返回 false 可以阻止选择框的关闭
                            //return false;
                        })
                    }, false);