Ionic 左侧菜单(登录主页详情demo)
1.项目结构
2.截图效果展示
3.主要js 代码
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'MenuCtrl'
})
//用户
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
},
'menuList': {
templateUrl : "templates/menulist.html"
}
}
})
.state('app.users', {
url: "/users",
views: {
'menuContent' :{
templateUrl: "templates/users.html",
controller: 'MenuCtrl'
},
'menuList': {
templateUrl : "templates/menulist.html"
}
}
})
.state('app.orderdetails', {
url: "/orderdetails/:orderid",
views: {
'menuContent' :{
templateUrl: "templates/orderdetail.html",
controller: 'MenuCtrl'
}
}
}); $urlRouterProvider.otherwise('login');
.controller('HomeCtrl',function ($scope, $state,$ionicSideMenuDelegate, $ionicLoading, Storage, ENV, $ionicPopup, $stateParams,$interval){
$scope.orderList = [
{ orderNo: 'B101', id: 1 },
{ orderNo: 'B102', id: 2 },
{ orderNo: 'B103', id: 3 },
{ orderNo: 'B104', id: 4 },
{ orderNo: 'B105', id: 5 },
{ orderNo: 'B106', id: 6 }
];
})
4.html 页面代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script> <!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/directive.js"></script> </head>
<body ng-app="deliveryAPP"> <ion-nav-view>
</ion-nav-view>
</body>
</html>
menu.html
<ion-side-menus >
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-stable bar-positive"><!--nav-title-slide-ios7-->
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> 返回</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-nav-view name="menuList"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
drag-content="false" 是否允许拖动内容打开侧栏菜单，默认为 true
side="left" 左侧菜单
menuList.html
<header class="bar bar-header bar-stable">
<h1 class="title">菜单功能</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
订单管理
</ion-item>
<ion-item nav-clear menu-close href="#/app/users">
我的管理
</ion-item>
</ion-list>
</ion-content>
备注：具体看看 http://www.ionic.wang/js_doc-index-id-6.html
Ionic 左侧菜单(登录主页详情demo)的更多相关文章
- 仿京东左侧菜单 hover效果-简易demo
简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托) .cont{display:inline-block;width:200px;height:200px;bord ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
- 使用layui-tree美化左侧菜单，点击生成tab选项
layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...
- 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑（二）——使用蓝图功能进行模块化
使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(一)——创建应用 使用 Flask 框架写用户登录功能的Demo时碰到的各种坑(二)——使用蓝图功能进行模块化 使用 Flask 框架写用 ...
- ajax实现简单的点击左侧菜单，右侧加载不同网页
实现:ajax实现点击左侧菜单,右侧加载不同网页(在整个页面无刷新的情况下实现右侧局部刷新,用到ajax注意需要在服务器环境下运行,从HBuilder自带的服务器中打开浏览效果即可) 原理:ajax的 ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- python :页面布局 ，后台管理页面之左侧菜单跟着滚动条动
左侧菜单跟着滚动条动 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- python : HTML+CSS (左侧菜单)
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
随机推荐
- QT中QString与string的转化，解决中文乱码问题
在QT中,使用QString输出到控件进行显示时,经常会出现中文乱码,网上查了一圈,发现大部分都是针对QT4增加4条语句:</span> [cpp] view plain copy QTe ...
- 正则表达式 判断内容是否为合法的url
var strUrl= "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[ ...
- JS switch 分支语句
描述:根据一个变量的不同取值,来执行不同的代码. 语法结构: switch(变量) { case 值1: 代码1; break; case 值2: 代码2; break; case 值3: 代码3; ...
- 最全的机器学习&深度学习入门视频课程集
资源介绍 链接:http://pan.baidu.com/s/1kV6nWJP 密码:ryfd 链接:http://pan.baidu.com/s/1dEZWlP3 密码:y82m 更多资源 ...
- POJ 3449 /// 判断线段相交
题目大意: 给出多个多边形及其编号 按编号顺序输出每个多边形与其相交的其他多边形编号 注意一个两个多个的不同输出 将每个多边形处理成多条边 然后去判断与其他多边形的边是否相交 计算正方形另外两点的方法 ...
- 读书笔记 | 敏捷编码&敏捷调试
这周的个人项目让我感受到自己在编程方面的不足和缺陷,所以选择了<高效程序员的45个习惯>中的敏捷开发和敏捷调试两个章节进行阅读. 以下将对敏捷开发和敏捷调试展开详述. [敏捷开发] 注释 ...
- Redis理解和使用
摘抄并用于自查笔记 1. Redis简介 我们日常Java Web开发,一般使用数据库进行存储,在数据量较大的情况下,单一使用数据库保存数据的系统会因为面向磁盘,磁盘读写速度比较慢而存在严重的性能弊端 ...
- 拦截器和自定义注解@interface
1 .拦截器(Interceptor): 用于在某个方法被访问之前进行拦截,然后在Handler执行之前或之后加入某些操作,其实就是AOP的一种实现策略. 拦截用户的请求并进行相应的处理,比如:判断用 ...
- 廖雪峰Java13网络编程-1Socket编程-3TCP多线程编程
TCP多线程编程 一个ServerSocket可以和多个客户端同时建立连接,所以一个Server可以同时与多个客户端建立好的Socket进行双向通信. 因此服务器端,当我们打开一个Socket以后,通 ...
- php多维数组
一个数组中的值可以是另一个数组,另一个数组的值也可以是一个数组.依照这种方式,我们可以创建二维或者三维数组: 实例 <?php // A two-dimensional array: $cars ...