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>
<!--<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="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侧滑导航：页面组件（本地插件化）”的全部内容。

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

MUI（侧滑导航）组件使用 - 踩坑篇
Unable to preventDefault inside passive event listener due to target being treated as passive.(代码解决篇 ...
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
蘑菇街Android组件与插件化
插件化的基石 -- apk动态加载随着我街业务的蓬勃发展,产品和运营随时上新功能新活动的需求越来越强烈,经常可以听到"有个功能我想周x上,行不行".行么?当然是不行啦,上新功能得 ...
（4.6.29.3）插件化之代码加载：启动Activity等四大组件之hook方式
文章目录一.代理模式和Hook原理 1.1 Hook 原理 1.2 代理模式二.Binder Hook 2.1 分析:系统服务的获取过程 2.2 寻找Hook点 2.3 hook Binder示例 ...
Android组件化与插件化开发项目实战整理分享（含支付宝、360、美团、滴滴等大厂项目实战）
小公司不说,但是在大公司的项目发展到一定程度,就必须进行模块的拆分.模块化是一种指导理念,其核心思想就是分而治之.降低耦合.而在 Android 开发的实践,目前有两种途径来实现,一个是组件化,一个是 ...
Android组件化与插件化的差别在哪里，该怎么选型？
面试官: 组件化如何实现,组件化与插件化的差别在哪里,该怎么选型? 心理分析:面试官从架构层次了解求职者是否用过模块化组件化和插件化,在过去经验有没有运用过这些技术到项目中,这道题属于一个连环 ...
Android组件化和插件化开发
项目发展到一定程度,就必须进行模块的拆分.模块化是一种指导理念,其核心思想就是分而治之.降低耦合.而在 Android 工程实践,目前有两种途径,一个是组件化,一个是插件化. 组件化开发说起组件化少 ...
Android组件化和插件化开发，android开发工程师月薪
开发调试时不需要对整个项目进行编译,每个模块可独立编译,提高了编译速度. 多人合作时可以只关注自己的业务模块,把某一业务当成单一项目来开发,可以提升开发,测试效率. 可以灵活的对业务模块进行组装和拆分 ...
Android插件化：从入门到放弃
喜欢 | 作者包建强发布于 2016年7月14日. 估计阅读时间: 1 分钟 | 道AI风控.Serverless架构.EB级存储引擎,尽在ArchSummit!讨论分享到:微博微信Facebo ...

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

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

效果图：

插件源码：

使用注意事项：

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

最新文章

热门文章