MUI-actionsheet(操作表)

 

  一、布局,包括:

1、顶部状态栏 <header ></header>,挡在body 最开始位置

2、中间内容:文字+【拍照】,放在<div class="mui-content"></div>内部

3、底部导航【删除】<nav class="mui-bar mui-bar-tab"></div>,与顶部状态栏同级,放在其后

4、弹出的actionsheet操作表<div id="" class="mui-popover mui-popover-action mui-popover-bottom"></div>,与1、2、3同级,actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom.mui-popover-action类;

以上布局结构如下:

二、要实现的操作:

使用js代码动态显示、隐藏actionsheet,同样在popover插件的构造方法中传入"toggle"参数即可。

//传入toggle参数,用户无需关心当前是显示还是隐藏状态,mui会自动识别处理;
mui('#sheet1').popover('toggle');

点击【拍照】或者【删除】时,弹出actionsheet表,点击表中的选项(除【取消】操作外 ),不跳转,直接关闭,当然,用户也可以进行其他操作,如下:效果如下:

三、源码:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>lzz的试验</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			p {
				text-indent: 22px;
			}
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
		</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">H5模式actionsheet练习</h1>
		</header>
		<!-- 底部导航,删除按钮 -->
		<nav class="mui-bar mui-bar-tab">
			<!-- 删除按钮,在.mui-icon节点加上.ui-icon-trash -->
			<a class="mui-tab-item" href="#delete">
				<span class="mui-icon mui-icon-trash"></span>
			</a>
		</nav>
		<!-- 中间内容 -->
		<div class="mui-content">
			<div class="mui-content-padded">
				actionsheet一般从底部弹出,显示一系列可供用户选择的操作按钮; actionsheet是从popover控件基础上演变而来,实际上就是一个固定从底部弹出的popover,故DOM结构和popove类似,只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类;
				<p>
					<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">拍照</a>
				</p>
			</div>
		</div>
		<!-- 删除按钮,弹出的actionsheet -->
		<div id="delete" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell"><a href="#" style="color: #FF3B30;">删除信息</a></li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell"><a href="#delete"><b>取消</b></a></li>
			</ul>
		</div>
		<!-- 打开actionsheet按钮,弹出拍照功能 -->
		<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">拍照或录像</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">选取现有的</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture"><b>取消</b></a>
				</li>
			</ul>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			// 点击所有的a对象时,执行actionsheet效果,不跳转,直接关闭
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮,反推当前是哪个actionsheet,一直推到actionsheet节点为止,parent为#delete/#forward/#picture,目的是找到这个actionsheet,接下来进行显示和隐藏操作
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					// 循环到#delete/#forward/#picture节点时,退出循环
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet,显示和隐藏操作
				mui('#' + parent.id).popover('toggle');
			})
		</script>
	</body>
</html>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值