mui侧滑菜单的功能实现
来源:互联网 发布:java httpconnection 编辑:程序博客网 时间:2024/05/29 14:29
mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。
webview模式
主页面和菜单内容在不同的webview中,两个页面根据内容需求分别组织DOM结构,mui对其DOM结构无特殊要求,故其有如下优点:
- 菜单内容是单独的webview,故可被多个页面复用;
- 菜单内容在单独的webview中,菜单区域的滚动不影响主界面,故可使用原生滚动,滚动更为流畅
另一方面,webview模式也有其缺点:
- 不支持拖动手势(跟手拖动);
- 主页面、菜单不同webview实现,因此若需交互(如:点击菜单触发主页面内容变化),需使用自定义事件实现跨webview通讯;
div模式
主页面和菜单内容在同一个webview下,嵌套在特定结构的div中,通过div的移动动画模拟菜单移动;故该模式有如下优点:
- 支持拖动手势(跟手拖动);
- 主页面、菜单在一个页面中,可通过JS轻松实现两者交互(如:点击菜单触发主页面内容变化),没有跨webview通讯的烦恼;
另一方面,div模式也有其缺点:
- 不支持菜单内容在多页面的复用,需每个页面都生成对应的菜单节点;
下面是主要代码,link相关的文件应该就可以产生相应的效果。这就是一个固定的结构,效果的产生是由于相应的css和js。
mui.init()中的swipeBack:true的作用是启动右滑关闭功能。
<head> <link href="../css/mui.min.css" rel="stylesheet" /></head><body> <!--侧滑菜单容器,包括主界面--> <div id="Main" class="mui-off-canvas-wrap mui-draggable"> <!--菜单部分--> <aside id="offCanvasSide" class="mui-off-canvas-left"> <div id="offCanvasSideScroll" class="mui-scroll-wrapper"> <button id="offCanvasHide" type="button" >关闭侧滑菜</button> </div> </aside> <!-- 主界面 --> <div class="mui-inner-wrap"> <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <button id="offCanvasShow" type="button" >显示侧滑菜单</button> </div> <!-- 这个东西不能删,利用他还原界面 --> <div class="mui-off-canvas-backdrop"></div> </div> </div> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init ({ swipeBack: false,// }); var Main = mui('#Main');//侧滑容器父节点 Main[0].classList.add('mui-scalable');//动画效果的类,通过这个应该可以调整动画类型,也可以去掉,效果也不错 Main.offCanvas().refresh();//绑定动画效果 /*给主界面按钮添加点击事件*/ document.getElementById('offCanvasShow').addEventListener('tap',function() { Main.offCanvas('show'); });/*给侧滑菜单中的按钮添加点击事件*/document.getElementById('offCanvasHide').addEventListener('tap',function() { Main.offCanvas('close'); }); //支持区域滚动,需要添加.mui-scroll-wrapper mui('#offCanvasSideScroll').scroll(); mui('#offCanvasContentScroll').scroll(); </script></body>
阅读全文
0 0
- mui侧滑菜单的功能实现
- MUI侧滑菜单
- MUI 的侧滑菜单 详解
- MUI扫描功能的实现
- 侧滑菜单的功能实现
- MUI的上拉加载功能实现
- mui 右滑关闭页面的功能
- MUI 如何实现侧滑菜单及其主体部分上下滑动
- mui 底部导航菜单功能(原创)
- 自定义实现侧滑菜单功能
- 【Android】菜单功能的实现:上下文菜单
- 功能菜单的实现代码
- Android菜单功能的实现
- WinCE MUI的实现
- WinCE MUI的实现
- WinCE MUI的实现
- WinCE MUI的实现
- mui框架使用侧滑并在首页添加上拉加载功能出现的问题
- selenium webdriver 杂记-生成随机数字字母组合参数
- LINQ
- SSM(十五) 乐观锁与悲观锁的实际应用
- 07:奥运奖牌计数
- kubernetes工作记录(2)——基于release工程的kubernetes1.7.3 rpm包的编译生成
- mui侧滑菜单的功能实现
- jquery 搜索框的功能实现
- java--解决文件输出流保存内容无中文时文件编码为ANSI格式不是utf-8
- MySQL 视图
- 使用mybatis框架执行Oracle数据库日期类型操作的时Date类型精确不到时分秒的问题
- 增长黑客介绍
- 7个perl数组高级操作技巧分享
- STORM入门之(TridentTopology集成Kafka)
- ubuntu下安装komodo