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 ...
随机推荐
- javascript 和 下拉列表
<form id="f"> <select size="1" name="s"> <option value= ...
- Python_copy_深浅拷贝
对于数字和字符串来说,无论是‘’赋值‘’还是‘’深拷贝‘’还是‘’浅拷贝‘’都是指向的同一个地址 深浅拷贝是copy类下的方法,创建方式为 import copy copy.copy() #浅拷贝 c ...
- go-关于指针和地址
经常会见到: p . *p , &p 三个符号 p是一个指针变量的名字,表示此指针变量指向的内存地址,如果使用%p来输出的话,它将是一个16进制数. 而*p表示此指针指向的内存地址中存放的内 ...
- net core体系-web应用程序-4asp.net core2.0 项目实战（1）-4项目前端说明
本文目录1. 摘要2. UI界面展示 3. 主要技术点4. 总结 1. 摘要 平时比较忙,写一篇文章可能跨度好几天,希望各位多多包涵.闲言少叙直接进入正题. 2. UI界面 NCMVC用的就图二, ...
- mysql基础理论
第一节数据库管理系统概述 在www.db-engines.com/en/ 这个网站中可以看到对数据库的排名 数据库分为: 关系型数据库: mysql------mariaDB oracle 非关系型数 ...
- 2018-05-01T00:00:00.000+08:00转2018-05-01 00:00:00
/** * 2018-05-01T00:00:00.000+08:00转2018-05-01 00:00:00 * @param oldDateStr * @return * @throws Pars ...
- Codeforces 1131F Asya And Kittens (构造)【并查集】
<题目链接> 题目大意:有$n$只小猫,开始将它们放在指定的n个单元格内,然后随机从n-1个隔板中拆除隔板,最终使得这些小猫在同一单元格.现在依次给出拆除隔板的顺序,比如:1 4 就表示1 ...
- Linux系统开发之路 - 下
5.Ubuntu安装好之后,就可以进行开发环境的搭建.(坚持看完有彩蛋,(>--..--<).jpg). 1)首先安装Nodejs和Npm. 打开浏览器输入nodejs.org,进入页面会 ...
- python数据结构之quick_sort
Quick sort , also known as partition-exchange sort, divides the data to be sorted into two separate ...
- 解决Python自带的json不能序列化data,datetime类型数据问题
官方文档中的一个Demo: >>> import json >>> class ComplexEncoder(json.JSONEncoder): ... def ...