MUI组件：弹出层组件 - 案例篇
官方组件 · 演示地址：http://dcloud.io/hellomui/examples/actionsheet.html
动画演示 · 效果图：（按“图1”方式点击，就会弹出“图2”）
动画效果暂时省略，代码本地演示，即可查看！
全部代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello MUI</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="static.docs/plugins/mui/css/mui.min.css"><style>span.mui-icon {font-size: 14px;color: #007aff;margin-left: -15px;padding-right: 10px;}#info {padding: 20px 10px;}/*弹出层：顶部title · 文字居中微调*/.paytype-title{padding-left: 30px;font-size: 17px;color: #000;}/*付款方式 · 字号设置*/.mui-table-view-cell>a:not(.mui-btn){font-size: 16px;color: #333;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">选择支付方式</h1></header><!--<nav class="mui-bar mui-bar-tab"><a class="mui-tab-item" href="#pay_3"><span class="mui-icon mui-icon-trash"></span>学习卡</a><a class="mui-tab-item" href="#pay_4"><span class="mui-icon mui-icon-undo"></span>银行转账</a></nav>--><div class="mui-content"><div class="mui-content-padded"><p><a href="#pay" class="mui-btn mui-btn-blue mui-btn-block" style="padding: 5px 20px;">立即支付</a></p>支付方式 · 选择提示：<p id="info"></p></div></div><div id="pay_3" class="mui-popover mui-popover-action mui-popover-bottom"><ul class="mui-table-view"><li class="mui-table-view-cell"><p class="paytype-title">学习卡<a href="#pay_3" style="float: right;">关闭</a></p></li></ul><form class="mui-input-group"><div class="mui-input-row"><label>卡号</label><input type="text" placeholder="请输入16位卡号"></div><div class="mui-input-row"><label>密码</label><input type="text" class="mui-input-clear" placeholder="请输入8位密码" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span></div></form><ul class="mui-table-view font-pay"><li class="mui-input-row"><label>卡号</label><input type="text" placeholder="请输入16位卡号"></li><li class="mui-input-row"><label>密码</label><input type="text" class="mui-input-clear" placeholder="请输入8位密码" data-input-clear="5"><span class="mui-icon mui-icon-clear mui-hidden"></span></li></ul></div><div id="pay_4" class="mui-popover mui-popover-action mui-popover-bottom"><ul class="mui-table-view"><li class="mui-table-view-cell"><p class="paytype-title">银行转账<a href="#pay_4" style="float: right;">关闭</a></p></li></ul><ul class="mui-table-view font-pay"><li class="mui-table-view-cell"><a href="#">开户名称 <span>某某网络科技有限公司</span></a></li><li class="mui-table-view-cell"><a href="#">开户账号 <span>11000018320005015</span></a></li><li class="mui-table-view-cell"><a href="#">开户银行 <span>中国银行高新区第一支行</span></a></li><li class="mui-table-view-cell"><p>支付后请致电：<a href="tel:138052162386">138052162386</a> 请客服人员为您开通</p></li></ul></div><!-- 4x 支付方式 · 弹框--><div id="pay" class="mui-popover mui-popover-action mui-popover-bottom"><ul class="mui-table-view"><li class="mui-table-view-cell"><p class="paytype-title">选择支付方式<a href="#pay" style="float: right;">关闭</a></p></li></ul><ul class="mui-table-view font-pay"><li class="mui-table-view-cell ptys"><a href="#">微信支付</a></li><li class="mui-table-view-cell ptys"><a href="#">支付宝支付</a></li><li class="mui-table-view-cell"><a href="#pay_3">学习卡</a></li><li class="mui-table-view-cell"><a href="#pay_4">银行转账</a></li></ul><ul class="mui-table-view"><li class="mui-table-view-cell"><a href="#">立即支付</a></li></ul></div></body><script src="static.docs/plugins/mui/js/mui.min.js"></script><script>mui.init({swipeBack:true //启用右滑关闭功能});mui('body').on('shown', '.mui-popover', function(e) {//console.log('shown', e.detail.id);//detail为当前popover元素});mui('body').on('hidden', '.mui-popover', function(e) {//console.log('hidden', e.detail.id);//detail为当前popover元素});var info = document.getElementById("info");mui('body').on('tap', '.mui-popover-action li.ptys>a', function() {var a = this,parent;console.log(a );//根据点击按钮，反推当前是哪个actionsheetfor (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {console.log( parent);if (parent.classList.contains('mui-popover-action')) {console.log("OK, break!");break;}}//关闭actionsheetmui('#' + parent.id).popover('toggle');info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";})</script></html>
以上就是关于“ MUI组件：弹出层组件 - 案例篇 ” 的全部内容。
