您的位置：首页 > 产品设计 > UI/UE

MUI-ActionSheet动作菜单

2015-08-06 17:34 597 查看
MUI-ActionSheet动作菜单

大家都知道在APP上，用一个非常好用的菜单模式。就是ActionSheet.具体体现就是默认折叠在界面之外。当触发某个动作时可以将隐藏的菜单显示出来。

废话不多说。我们来看看在MUI框架中是如何实现这个强大的功能的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>ActionSheet简单的Demo</title>
<script src="../hello-mui/js/mui.min.js"></script>
<link href="../hello-mui/css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>

<body>
<!--
作者：1546109472@qq.com  Bruce
时间：2015-08-06
描述：这里我们创建一个简单的demo，看看actionsheet的具体实现。
-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">这是一个简单的ActionSheet</h1>
</header>
<div class="mui-content" style="margin:10px;">
<a href="#picture" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined" style="padding: 5px 20px;">打开actionsheet</a>

<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>
</div>
</body>
</html>


上面的代码就是一个简单的actionsheet代码。接下来我们运行一下看看。

效果图如下所示：





正如上图所示我们可以将一些功能菜单隐藏在界面之外。当触发时才显示。怎么样是不是和app的效果非常相似。当然这个功能也是本人非常喜欢用的方式之一。使用actionsheet可以大发简化界面的排版。使界面看起来不那么拥挤。

赶快试试吧！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  mui actionshee
相关文章推荐
新的分享
章节导航