MUI从入门到项目实战（九）（MUI组件之popover、pipcker、progressbar）

一、popover

 mui框架内置了弹出菜单插件，弹出菜单显示内容不限，但必须包裹在一个含.mui-popover类的div中

                       

要显示、隐藏如上菜单，mui推荐使用锚点方式，例如：

<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

点击如上定义的按钮，即可显示弹出菜单，再次点击弹出菜单之外的其他区域，均可关闭弹出菜单；这种使用方式最为简洁。
若希望通过js的方式控制弹出菜单，则通过如下一个方法即可：

mui('.bottomPopover').popover(status[,anchor]);

在主内容编写如下代码：

<style>
    #popover {
        height: 100px;
        width: 200px;
    }

    #popover {
        height: 100px;
        width: 200px;
    }
</style>
<div id="popover" class="mui-popover">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell"><a href="#">Item1</a></li>
                <li class="mui-table-view-cell"><a href="#">Item2</a></li>
                <li class="mui-table-view-cell"><a href="#">Item3</a></li>
                <li class="mui-table-view-cell"><a href="#">Item4</a></li>
                <li class="mui-table-view-cell"><a href="#">Item5</a></li>
            </ul>
        </div>
    </div>
</div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>
<style>
    #popover {
        height: 100px;
        width: 200px;
    }

    #popover {
        height: 100px;
        width: 200px;
    }
</style>
<div id="popover" class="mui-popover">
    <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell"><a href="#">Item1</a></li>
                <li class="mui-table-view-cell"><a href="#">Item2</a></li>
                <li class="mui-table-view-cell"><a href="#">Item3</a></li>
                <li class="mui-table-view-cell"><a href="#">Item4</a></li>
                <li class="mui-table-view-cell"><a href="#">Item5</a></li>
            </ul>
        </div>
    </div>
</div>
<a href="#popover" id="openPopover" class="mui-btn mui-btn-primary mui-btn-block">打开弹出菜单</a>

二、pipcker

 mui框架扩展了pipcker组件,可用于弹出选择器,在各平台上都有统一表现.poppicker和dtpicker是对picker的具体实现

*poppicker组件依赖mui.picker.js/.css mui.poppicker.js/.css请务必在mui.js/css后中引用,也可统一引用 压缩版本:mui.picker.min.js

                             

首先引入：

<link rel="stylesheet" href="css/mui.picker.min.css" />
<script src="js/mui.picker.min.js"></script>

然后在主内容区写入：

<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>
<script type="text/javascript">
    (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);

三、progressbar

有准确值的进度条
有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；
使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。

                   

首先添加样式：

<style type="text/css">
    .mui-progressbar{
        margin-top:10px;
        height: 10px;
    }
</style>

在主内容区写入：

<div id="demo1" class="mui-progressbar">
    <span></span>
</div>
<script type="text/javascript">
    (function(){
        mui('#demo1').progressbar({
        progress: 80
    }).show();
    })()
</script>