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="#">开户名称 &nbsp;&nbsp; <span>某某网络科技有限公司</span></a></li><li class="mui-table-view-cell"><a href="#">开户账号 &nbsp;&nbsp; <span>11000018320005015</span></a></li><li class="mui-table-view-cell"><a href="#">开户银行 &nbsp;&nbsp; <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组件：弹出层组件 - 案例篇 ” 的全部内容。

MUI组件：弹出层组件 - 案例篇相关推荐

vantUI所有的弹出层组件（代码、调用、示例） - 集合篇
文章目录 toast组件效果图示例: Notify组件(Notify 消息通知.提示) 效果图示例: toast组件 //引入方式 import Vue from 'vue'; import { T ...
layUI弹出层组件使用
首先官网下载layUI或者下载layer.js组件也可以 layer.js组件官网链接 layer 弹出层组件 - jQuery 弹出层插件 (layuiweb.com) 独立组件使用需要引入JQue ...
layer弹出层组件实现加载效果
layer弹出层组件挺实用的,需要跟jQuery配合使用,下面介绍一下利用layer制作加载层. 使用layer.load() layer.load(1,{ // 0/1/2表示图标,load有三种可 ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
弹出层组件-layui.layer
弹出层组件文档-layui.layer layer只是作为layui的一个弹层模板,由于layer可以独立使用,也可以通过layui模块化使用,所以请按照实际需求来选择. 作为独立组件使用,可以去la ...
使用layer弹出层组件绑定页面按钮
绑定教程 $('#member_add').on('click', function(){layer.open({type: 2,title: '添加商品 ',maxmin: true, shadeC ...
页面弹出层组件layer的用法
欢迎关注博主公众号:[纯洁的明依]文章由陈晓阳原创. 本人微信:chenxiaoyangzxy. 免费提供本人大量学习资料. 一:页面引入和核心js文件 layer.js <script src ...
原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
layer - 简单好用的Web弹出层组件使用详解1（安装配置、消息提示框）
一.基本介绍 1,什么是 layer? layer 是一款近年来备受青睐的 web 弹层组件,可轻松实现 Alert / Confirm / Prompt / 普通提示 / 页面区块 / iframe ...

MUI组件：弹出层组件 - 案例篇

MUI组件：弹出层组件 - 案例篇

动画演示 · 效果图：（按“图1”方式点击，就会弹出“图2”）

全部代码如下：

MUI组件：弹出层组件 - 案例篇相关推荐

最新文章

热门文章