您的位置：首页 > 其它

ionic-侧边菜单$ionicSideMenuDelegate

2017-05-10 21:28 423 查看

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css">
<script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
<title>Title</title>
<!--
$ionicSideMenuDelegate           必须注入
*一个容器元素的侧边菜单和主要内容。
*通过把主要内容区域从一边拖动到另一边，
*来让左侧或右侧的侧栏菜单进行切换。
*

-->
</head>
<body ng-controller="myCtrl">
<ion-side-menus>
<!-- 中间内容 -->
<ion-side-menu-content>
<!--页面头部-->
<ion-header-bar class="bar-royal">
<!-- 左菜单 -->
<button class="button button-clear" ng-click="showLeft()">
<i class="iocn ion-navicon"></i>
</button>

<h1 class="title">我是标题</h1>
<!-- 右菜单 -->
<button class="button button-clear" ng-click="showRight()">
<i class="icon ion-settings"></i>
</button>
</ion-header-bar>
<!--页面中间内容-->
<ion-content>
<ul class="list">
<li ng-repeat="g in goodses">
<span ng-bind="g"></span>
</li>
</ul>
</ion-content>
<!--页面底部内容-->
<ion-footer-bar class="bar-royal">
<h1 class="title">我是底部</h1>
</ion-footer-bar>
</ion-side-menu-content>
<!-- 左侧菜单 -->
<ion-side-menu side="left">
<ul class="list">
<li class="item">侧边菜单</li>
<li class="item">侧边菜单</li>
<li class="item">侧边菜单</li>
<li class="item">侧边菜单</li>
<li class="item">侧边菜单</li>
</ul>
</ion-side-menu>

<!-- 右侧菜单 -->
<ion-side-menu side="right">
<ul class="list">
<li class="item">软件界面设置</li>
<li class="item">软件字体设置</li>
<li class="item">背景颜色设置</li>
<li class="item">自动翻页设置</li>
<li class="item">语音朗诵设置</li>
</ul>
</ion-side-menu>
</ion-side-menus>

<script>
var app=angular.module("myApp",["ionic"]);
app.controller("myCtrl",["$scope","$ionicSideMenuDelegate",
function ($scope,$ionicSideMenuDelegate) {
$scope.goodses=[];
for(var i=0;i<50;i++){
$scope.goodses.push("不要关空调"+i)
}
$scope.showLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
}
$scope.showRight = function() {
$ionicSideMenuDelegate.toggleRight();
}
}])
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航