MUI学习03-弹出菜单(弹出列表)
弹出菜单HTML代码如下：
<div class="mui-content">
<!--弹出列表-----------start-->
<button id="menu-btn" type="button" class="mui-btn mui-btn-success mui-btn-block" style="padding: 10px;">
列表<span class="mui-icon mui-icon-arrowdown"></span>
</button>
<div id="menu-wrapper" class="menu-wrapper hidden">
<div id="menu" class="menu">
<ul class="mui-table-view mui-table-view-inverted">
<li class="mui-table-view-cell">
<a href="javascript:;">温室 1</a>
</li>
<li class="mui-table-view-cell">
<a href="javascript:;">温室 2</a>
</li>
<li class="mui-table-view-cell">
<a href="javascript:;">温室 3</a>
</li>
<li class="mui-table-view-cell">
<a href="javascript:;">温室 4</a>
</li>
</ul> </div>
</div>
<div id="menu-backdrop" class="menu-backdrop"></div> <div class="item-title"><span id="info">温室 1</span> <span class="time" id="time"></span></div>
<!--弹出列表-----------end-->
</div>
引入JS：<script src="../js/mui.min.js"></script>
JS代码如下：
//弹出列表
mui.init({
swipeBack: true //启用右滑关闭功能
});
var menuWrapper = document.getElementById("menu-wrapper");
var menu = document.getElementById("menu");
var menuWrapperClassList = menuWrapper.classList;
var backdrop = document.getElementById("menu-backdrop");
var info = document.getElementById("info");
var time = document.getElementById("time");
time.innerHTML = "数据时间：" + getNowFormatDate();
backdrop.addEventListener('tap', toggleMenu);
document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
document.getElementById("icon-menu").addEventListener('tap', toggleMenu)
//下沉菜单中的点击事件
mui('#menu').on('tap', 'a', function() {
toggleMenu();
info.innerHTML = this.innerHTML;
//info.innerHTML = '你已选择：'+this.innerHTML;
time.innerHTML = "当前时间：" + getNowFormatDate();
});
var busying = false; function toggleMenu() {
if(busying) {
return;
}
busying = true;
if(menuWrapperClassList.contains('mui-active')) {
document.body.classList.remove('menu-open');
menuWrapper.className = 'menu-wrapper fade-out-up animated';
menu.className = 'menu bounce-out-up animated';
setTimeout(function() {
backdrop.style.opacity = 0;
menuWrapper.classList.add('hidden');
}, 500);
} else {
document.body.classList.add('menu-open');
menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
menu.className = 'menu bounce-in-down animated';
backdrop.style.opacity = 1;
}
setTimeout(function() {
busying = false;
}, 500);
} // 获取当前日期与时间函数
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if(month >= 1 && month <= 9) {
month = "0" + month;
}
if(strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
" " + date.getHours() + seperator2 + date.getMinutes() +
seperator2 + date.getSeconds();
return currentdate;
}
引入CSS：<link rel="stylesheet" href="../css/mui.min.css">
CSS添加代码如下：
html,
body {
min-height: 100%;
background-color: #efeff4;
}
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
60% {
opacity:;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
60% {
opacity:;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.bounce-in-down {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes fadeInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
60% {
opacity:;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
75% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
90% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
60% {
opacity:;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
75% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
90% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
.fade-in-down {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity:;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity:;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.bounce-out-up {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeOutUp {
20% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
40%,
45% {
opacity:;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
20% {
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
40%,
45% {
opacity:;
-webkit-transform: translate3d(0, 0px, 0);
transform: translate3d(0, 0px, 0);
}
100% {
opacity:;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fade-out-up {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.menu-open {
height: 100%;
width: 100%;
}
.menu-open .mui-scroll-wrapper {
position: absolute;
top:;
bottom:;
left:;
z-index:;
width: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.menu-backdrop {
display: none;
}
.menu-open .menu-backdrop {
position: fixed;
top:;
bottom:;
height: 100%;
width: 100%;
display: block;
z-index:;
}
.menu-wrapper {
position: absolute;
top: 48px;
left:;
right:;
z-index:;
text-align: center;
background-color: #333;
width: 100%;
}
.menu-wrapper.hidden {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
z-index: -1;
}
.menu {
width: 100%;
}
.menu .mui-table-view-inverted {
color: gray;
font-size: 19px;
}
.menu .mui-table-view-inverted .mui-table-view-cell:after {
height: 2px;
left:;
right:;
}
.menu-wrapper.mui-active,
.menu-wrapper.mui-active .menu {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#info{
padding: 20px 10px ;
}
效果如下：
注：弹出的列表是从上向下弹出的。
MUI学习03-弹出菜单(弹出列表)的更多相关文章
- 解决Mui中popover 顶部弹出菜单弹出位置不准确以及无法收回的问题
前言 最近公司的项目转向使用Hbuilder开发移动端项目,其中想要通过在顶部标题栏加入弹出菜单的方式,来定位长列表的位置,如图所示. 问题 Mui的功能貌似还不是很完善,在使用这个弹出菜单的时候,发 ...
- mui学习
改变状态栏的颜色 <meta name="apple-mobile-web-app-capable" content="yes"> <me ...
- Mui --- 弹出菜单
mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...
- PyQt(Python+Qt)学习随笔：设定toolButton弹出菜单的方法
在Qt Designer中toolButton可以通过popupMode设定菜单弹出的模式,但并不能在Qt Designer中指定toolButton的弹出菜单,toolButton只能通过代码来指定 ...
- win32进阶之路：程序托盘图标+右键弹出菜单
开场白 本次介绍两个非常棒且实用的技巧:程序托盘图标和右键弹出菜单,效果如下图. 程序托盘图标用了迅雷的图标,右键点击时候会弹出三个选项的菜单. 程序托盘图标设置 我会用尽可能清晰明了的步骤介绍方式 ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
- mui-popover显示、隐藏弹出菜单的方法
一.mui-popover要显示.隐藏弹出菜单,可使用锚点方式. <div id="popover" class="box mui-popover mui-popp ...
- 向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...
- html5手机端遮罩弹出菜单代码
效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...
随机推荐
- Get与Post区别小结
Get:是以实体的方式得到由请求Url所指定资源的信息,如果请求Url只是一个数据产生过程,那么最终要在实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述. Post:是用来向 ...
- Loadrunner和JMeter并发对比
今天在项目中测试发现,其实LR才是实际意义上的并发测试,JMeter不算并发 记录用户登录日志: LR脚本: 1.登录操作放在init初始化中,用5个虚拟用户并发测试:
- http账户密码的截取
首先,http的前提也是基于arp欺骗的,当arp欺骗成功后,方可进行. 具体步骤如下: 1.打开终端,先进行流量的转发:echo 1 >/proc/sys/net/ipv4/ip_forw ...
- day9.初始函数练习题
1.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def new(args): a = [] for I in range(1,len(args),2) ...
- ZOJ 3795 Grouping (强连通缩点+DP最长路)
<题目链接> 题目大意: n个人,m条关系,每条关系a >= b,说明a,b之间是可比较的,如果还有b >= c,则说明b,c之间,a,c之间都是可以比较的.问至少需要多少个集 ...
- POJ 1459 - Power Network 【Ek-最大流】
<题目链接> 题目大意:给出 n 个点,其中包括 np个发电站,nc 个消费者, 剩下的全部都是中转点,再给出 这些点中的m 条边,代表这两点间的最大传输电量,并且给出发电站的最大发送电量 ...
- Spring ConfigurationClassPostProcessor Bean解析及自注册过程
一.Bean的自注册过程 二.自注册过程说明 ConfigurationClassParser解析流程 1.处理@PropertySources注解,配置信息的解析 2.处理@ComponentSc ...
- VMware5.5-高可用性和动态资源调度（DRS）
高可用性 故障分类:ESX主机---虚拟机(主机通过vmtools监控)---应用程序(基本不用6.0新增了这一功能) 高可用的信号检测目前可分为两种 一.网络信号 二.存储信号 新建群集 上图的自定 ...
- 【ACM】 1231 最大连续子序列
[1231 最大连续子序列 ** Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- Java发邮件基础篇
1. 电子邮件协议 电子邮件的在网络中传输和网页一样需要遵从特定的协议,常用的电子邮件协议包括 SMTP,POP3,IMAP.其中邮件的创建和发送只需要用到 SMTP协议,所以本文也只会涉及到SMTP ...