mui侧滑导航(左侧)
来源:互联网 发布:当老师知乎 编辑:程序博客网 时间:2024/05/22 04:59
MUI-最接近原生APP体验的高性能前端框架
mui侧滑导航(左侧)效果图:
导入mui控件需要的css,js文件:
<link href="../resources/ui/mui-master/dist/css/mui.css" rel="stylesheet"/> <script type="text/javascript" src="../resources/js/jquery.js"></script> <script type="text/javascript" src="../resources/ui/mui-master/js/mui.min.js"></script> <script type="text/javascript" src="../resources/ui/layer/laytpl.js"></script>
实现mui侧滑导航的效果很简单,只需要添加一些class样式就可以实现。
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable"> <div class="mui-inner-wrap"> <!--header--> <header class="mui-bar mui-bar-nav"> <a href="#offCanvasSide" class="mui-icon-bars mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title" id="title">事项审批(人事)</h1> </header> <!--侧滑菜单部分--> <aside id="offCanvasSide" class="mui-off-canvas-left"> <div id="offCanvasSideScroll" class="mui-scroll-wrapper"> <div class="mui-scroll"> <span class="android-only"></span> <div class="content"> <p style="margin: 10px 10px;"> <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">流程分类</button> </p> </div> <div id="menu1" class="menu"> <ul id="cateen1" class="mui-table-view mui-table-view-chevron mui-table-view-inverted"> <script id="canteensrc1" type="text/html"> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li class="mui-table-view-cell"> <a class="mui-navigate-right"href="javascript:void(0);" onClick="addapply('{{d.list[i].id}}')"> {{d.list[i].text}} </a> </li> {{# } }} </script> </ul> </div> </div> </div> </aside> <!--主页面--> <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div id="menu" class="menu"> <ul id="table" class="mui-table-view mui-grid-view mui-grid-9"></ul> </div> </div> </div> </div></div>
页面加载的时候,ajax请求数据并在主页面显示:
var typeid=$("#typeid").val();//类型值 var data = _ajax.jsonajax('../exammanager/getFormlist.do?flag=0&typeid='+typeid,false,null,'json'); var uihtml=""; $(data.list).each(function(index,value){ var html="<li class=\"mui-table-view-cell mui-media mui-col-xs-4\"><a href=\"\" onclick=\"apply('"+value.id+"','"+value.attributes+"')\"><span class=\"mui-icon "+value.miconCls+"\"></span><div class=\"mui-media-body\">"+value.name+"</div></a></li>"; uihtml+=html; }); $("#table").html(uihtml);
侧滑导航栏如下:
侧滑菜单数据的加载不太一样:
//侧滑菜单 var typedata = _ajax.jsonajax('../mobleexammanager/getJbpmTypeTree.do',false,null,'json'); gettpl = document.getElementById('canteensrc1').innerHTML; laytpl(gettpl).render(typedata,function(html){ $("#cateen1").html(html); });
laytpl是一款非常轻量的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积浓缩为不到2KB的字符,laytpl试图打造极致的模版渲染!
//假设你得到了这么一段数据var data = { title: '前端圈', intro: '一群码js的骚年,幻想改变世界,却被世界改变。', list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]};
模板:
<h3>{{ d.title }}</h3><p class="intro">{{ d.intro }}</p><ul>{{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li> <span>{{ d.list[i].name }}</span> <span>所在城市:{{ d.list[i].city }}</span> </li>{{# } }}</ul>
网上找到的实例:
//第一步:编写模版。你可以使用一个script标签存放模板,如:<script id="demo" type="text/html"><h1>{{ d.title }}</h1><ul>{{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li> <span>姓名:{{ d.list[i].name }}</span> <span>城市:{{ d.list[i].city }}</span> </li>{{# } }}</ul></script>//第二步:建立视图。用于呈现渲染结果。<div id="view"></div>//第三步:渲染模版var data = { title: '前端攻城师', list: [{name: '贤心', city: '杭州'}, {name: '谢亮', city: '北京'}, {name: '浅浅', city: '杭州'}, {name: 'Dem', city: '北京'}]};var gettpl = document.getElementById('demo').innerHTML;laytpl(gettpl).render(data, function(html){ document.getElementById('view').innerHTML = html;});
我的实例的模板:
<script id="canteensrc1" type="text/html"> {{# for(var i = 0, len = d.list.length; i < len; i++){ }} <li class="mui-table-view-cell"> <a class="mui-navigate-right"href="javascript:void(0);" onClick="addapply('{{d.list[i].id}}')"> {{d.list[i].text}} </a> </li> {{# } }} </script>
ajax获取数据并填充:
//侧滑菜单 var typedata = _ajax.jsonajax('../mobleexammanager/getJbpmTypeTree.do',false,null,'json'); gettpl = document.getElementById('canteensrc1').innerHTML; laytpl(gettpl).render(typedata,function(html){ $("#cateen1").html(html); });
0 0
- mui侧滑导航(左侧)
- Navigation Drawer--左侧滑导航
- Android设计之Navigation Drawer(左侧滑出导航、导航抽屉)
- mui 底部导航菜单功能(原创)
- MUI组件三:列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单
- mui 沉浸式导航
- mui底部导航
- 左侧导航菜单
- OA系统左侧导航
- 简单的左侧导航
- 左侧导航新
- jquery左侧导航
- ecshop二次开发--左侧导航
- ecshop二次开发--左侧导航
- ecshop二次开发--左侧导航
- 左侧导航栏
- 左侧导航效果
- 左侧导航多级下拉
- 使用 jsoup 对 HTML 文档进行解析和操作
- SSL、TLS协议格式入门学习
- adb 操作重复性太强,我要写一个批处理文件(*.bat)
- Java -- 语言特性
- android如何提高加载布局页面速度
- mui侧滑导航(左侧)
- 在vs2010下 teechart控件学习
- Ubuntu16.04 server安装Samba
- String常用功能
- SVG viewport、viewBox、preserveAspectRatio
- PAT_乙级 1043 输出PATest
- 地理诗
- 浅议IMS
- glusterfs笔记