您的位置：首页 > 其它

ionic练习（2）- 实现侧拉菜单

2017-10-20 18:47 323 查看

<!DOCTYPE html>
<html ng-app="myApp">
<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="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<!-- 点击按钮实现侧拉菜单 -->
<script type="text/javascript">
var app = angular.module("myApp", ["ionic"]);

app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
});
</script>
</head>
<body ng-controller="myCtrl">
<ion-side-menus>
<!-- 主页面内容 -->
<ion-side-menu-content>

<ion-header-bar class="bar-positive" align-title="center">
<button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
<h1 class="title">中间</h1>
</ion-header-bar>

<ion-content class="has-header">
这是“主页面”页面HTML内容
</ion-content>

</ion-side-menu-content>

<!-- 左侧弹出菜单 -->
<ion-side-menu side="left">

<ion-header-bar class="bar-positive">
<h1 class="title">左侧</h1>
<button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button>
</ion-header-bar>

<ion-content class="has-header">
这是“侧边栏”页面HTML内容
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航