123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- <!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>
|