228 lines
7.9 KiB
HTML
228 lines
7.9 KiB
HTML
|
<!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">
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="../css/mui.min.css">
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
background-color: #efeff4;
|
|||
|
|
}
|
|||
|
|
p {
|
|||
|
|
text-indent: 22px;
|
|||
|
|
}
|
|||
|
|
span.mui-icon {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #007aff;
|
|||
|
|
margin-left: -15px;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
}
|
|||
|
|
.mui-off-canvas-right {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
margin: 35px 15px 10px;
|
|||
|
|
}
|
|||
|
|
.title+.content {
|
|||
|
|
margin: 10px 15px 35px;
|
|||
|
|
color: #bbb;
|
|||
|
|
text-indent: 1em;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 24px;
|
|||
|
|
}
|
|||
|
|
input {
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<!--侧滑菜单容器-->
|
|||
|
|
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
|
|||
|
|
<!--菜单部分-->
|
|||
|
|
<aside id="offCanvasSide" class="mui-off-canvas-right">
|
|||
|
|
<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
|
|||
|
|
<div class="mui-scroll">
|
|||
|
|
<div class="title">侧滑导航</div>
|
|||
|
|
<div class="content">
|
|||
|
|
这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
|
|||
|
|
<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
|
|||
|
|
</span>。
|
|||
|
|
<p style="margin: 10px 15px;">
|
|||
|
|
<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
|
|||
|
|
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 1
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 2
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 3
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 4
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 5
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="mui-table-view-cell">
|
|||
|
|
<a class="mui-navigate-right">
|
|||
|
|
Item 6
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
<div class="mui-inner-wrap">
|
|||
|
|
<header class="mui-bar mui-bar-nav">
|
|||
|
|
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
|
|||
|
|
<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
|
|||
|
|
<h1 class="mui-title">左滑导航</h1>
|
|||
|
|
</header>
|
|||
|
|
<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
|
|||
|
|
<div class="mui-scroll">
|
|||
|
|
<div class="mui-content-padded">
|
|||
|
|
<p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容； 打开侧滑菜单有多种方式： 1、在当前页面向左拖动； 2、点击页面右上角的
|
|||
|
|
<span class="mui-icon mui-icon-bars"></span> 图标； 3、通过JS API触发（例如点击如下蓝色按钮体验）；
|
|||
|
|
<span class="android-only">4、Android手机按menu键；</span>
|
|||
|
|
</p>
|
|||
|
|
<p style="padding: 5px 20px;margin-bottom: 5px;">
|
|||
|
|
<button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">
|
|||
|
|
显示侧滑菜单
|
|||
|
|
</button>
|
|||
|
|
</p>
|
|||
|
|
<p>侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="mui-input-group" style="margin-bottom: 15px;">
|
|||
|
|
<div class="mui-input-row mui-radio">
|
|||
|
|
<label>主界面移动、菜单不动</label>
|
|||
|
|
<input name="style" type="radio" checked="" value="main-move">
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row mui-radio">
|
|||
|
|
<label>主界面不动、菜单移动</label>
|
|||
|
|
<input name="style" type="radio" value="menu-move">
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row mui-radio mui-hidden" id="move-togger">
|
|||
|
|
<label>整体移动</label>
|
|||
|
|
<input name="style" type="radio" value="all-move">
|
|||
|
|
</div>
|
|||
|
|
<div class="mui-input-row mui-radio">
|
|||
|
|
<label>缩放式侧滑（类手机QQ）</label>
|
|||
|
|
<input name="style" type="radio" value="main-move-scalable">
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- off-canvas backdrop -->
|
|||
|
|
<div class="mui-off-canvas-backdrop"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../js/mui.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
mui.init({
|
|||
|
|
swipeBack: false,
|
|||
|
|
});
|
|||
|
|
//侧滑容器父节点
|
|||
|
|
var offCanvasWrapper = mui('#offCanvasWrapper');
|
|||
|
|
//主界面容器
|
|||
|
|
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
|
|||
|
|
//菜单容器
|
|||
|
|
var offCanvasSide = document.getElementById("offCanvasSide");
|
|||
|
|
//Android暂不支持整体移动动画
|
|||
|
|
if (!mui.os.android) {
|
|||
|
|
document.getElementById("move-togger").classList.remove('mui-hidden');
|
|||
|
|
var spans = document.querySelectorAll('.android-only');
|
|||
|
|
for (var i = 0, len = spans.length; i < len; i++) {
|
|||
|
|
spans[i].style.display = "none";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//移动效果是否为整体移动
|
|||
|
|
var moveTogether = false;
|
|||
|
|
//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
|
|||
|
|
var classList = offCanvasWrapper[0].classList;
|
|||
|
|
//变换侧滑动画移动效果；
|
|||
|
|
mui('.mui-input-group').on('change', 'input', function() {
|
|||
|
|
if (this.checked) {
|
|||
|
|
offCanvasSide.classList.remove('mui-transitioning');
|
|||
|
|
offCanvasSide.setAttribute('style', '');
|
|||
|
|
classList.remove('mui-slide-in');
|
|||
|
|
classList.remove('mui-scalable');
|
|||
|
|
switch (this.value) {
|
|||
|
|
case 'main-move':
|
|||
|
|
if (moveTogether) {
|
|||
|
|
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
|
|||
|
|
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
|
|||
|
|
moveTogether = false;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'main-move-scalable':
|
|||
|
|
if (moveTogether) {
|
|||
|
|
//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
|
|||
|
|
offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
|
|||
|
|
}
|
|||
|
|
classList.add('mui-scalable');
|
|||
|
|
break;
|
|||
|
|
case 'menu-move':
|
|||
|
|
classList.add('mui-slide-in');
|
|||
|
|
break;
|
|||
|
|
case 'all-move':
|
|||
|
|
moveTogether = true;
|
|||
|
|
//整体滑动时，侧滑菜单在inner-wrap内
|
|||
|
|
offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
offCanvasWrapper.offCanvas().refresh();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
document.getElementById('offCanvasShow').addEventListener('tap', function() {
|
|||
|
|
offCanvasWrapper.offCanvas('show');
|
|||
|
|
});
|
|||
|
|
document.getElementById('offCanvasHide').addEventListener('tap', function() {
|
|||
|
|
offCanvasWrapper.offCanvas('close');
|
|||
|
|
});
|
|||
|
|
//主界面和侧滑菜单界面均支持区域滚动；
|
|||
|
|
mui('#offCanvasSideScroll').scroll();
|
|||
|
|
mui('#offCanvasContentScroll').scroll();
|
|||
|
|
//实现ios平台的侧滑关闭页面；
|
|||
|
|
if (mui.os.plus && mui.os.ios) {
|
|||
|
|
offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
|
|||
|
|
plus.webview.currentWebview().setStyle({
|
|||
|
|
'popGesture': 'none'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
|
|||
|
|
plus.webview.currentWebview().setStyle({
|
|||
|
|
'popGesture': 'close'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|