MUI侧滑导航：页面组件（本地插件化）

针对MUI框架须知：
MUI框架内不支持<a>标签的点击跳转，所以需要修改部分代码，如下述代码中的代码块：
// 实现MUI框架内的超链接点击跳转mui('body').on('tap','a',function(){document.location.href=this.href;});
参考下图所示的动画演示

效果图：

插件源码：

<!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="statics/plugin/mui/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-left {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-left"><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" href="">Item 1</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right" href="">Item 2</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right" href="">Item 3</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right" href="">Item 4</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right" href="">Item 5</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right" href="">Item 6</a></li></ul></div></div></aside><div class="mui-inner-wrap"><header class="mui-bar mui-bar-nav"><a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a><a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a><h1 class="mui-title">div模式右滑菜单</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: 10px;">显示侧滑菜单</button></p><p>侧滑菜单的移动动画，支持多种效果，切换如下选项体验不同动画效果：</p></div></div></div><div class="mui-off-canvas-backdrop"></div></div></div><script src="statics/plugin/mui/mui.min.js"></script><script>mui.init();//侧滑容器父节点var offCanvasWrapper = mui('#offCanvasWrapper');//主界面容器var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');//菜单容器var offCanvasSide = document.getElementById("offCanvasSide");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);}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) {mui.plusReady(function() {//5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能plus.webview.currentWebview().setStyle({'popGesture': 'none'});});}// 实现MUI框架内的超链接点击跳转mui('body').on('tap','a',function(){document.location.href=this.href;});</script></body></html>

使用注意事项：

如果不需要上文演示动画中的两个超级大按钮，必须把对应HTML代码和对应JS代码一同注释。

否则，会报错。

以上就是关于“MUI侧滑导航：页面组件（本地插件化）”的全部内容。