ionic-sideMenu(侧边栏)

ionic-sideMenu(侧边栏)

一个容器元素的侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧 或右侧的侧栏菜单进行切换。

 

示例代码如下：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11     <!--<ion-header-bar>-->
12         <!--<h1 class="title">Header</h1>-->
13     <!--</ion-header-bar>-->
14     <!--<ion-content>-->
15         <!--<p>Hello</p>-->
16     <!--</ion-content>-->
17     <!--<ion-footer-bar>-->
18         <!--<h1 class="title">Footer</h1>-->
19     <!--</ion-footer-bar>-->
20     <!--  左边打开侧边栏 -->
21     <ion-side-menus>
22         <ion-side-menu-content>
23             <ion-header-bar>
24                 <button menu-toggle="left" class="button icon ion-navicon"></button>
25                 <h1 class="title">Header</h1>
26                 <button class="button button-positive"
27                         ng-click="oprateRightMenu(true)"
28                         >打开</button>
29             </ion-header-bar>
30             <ion-content>
31                 Hello SideMenu
32             </ion-content>
33             <ion-footer-bar>
34             <h1 class="title">Footer</h1>
35             </ion-footer-bar>
36         </ion-side-menu-content>
37         <ion-side-menu side="left">
38             <button menu-close class="button icon ion-close"></button>
39             <ul class="list">
40                 <li class="item">个人中心</li>
41                 <li class="item">设置</li>
42                 <li class="item">关于</li>
43             </ul>
44         </ion-side-menu>
45         <ion-side-menu side="right">
46             <button menu-close class="button button-balanced"
47                     ng-click="oprateRightMenu(false)">关闭</button>
48             <ul class="list">
49                 <li class="item">个人中心</li>
50                 <li class="item">设置</li>
51                 <li class="item">关于</li>
52             </ul>
53         </ion-side-menu>
54     </ion-side-menus>
55 <script>
56     var app = angular.module('myApp', ['ionic']);
57     app.controller('myCtr',['$scope','$ionicSideMenuDelegate',
58     function($scope,$ionicSideMenuDelegate){
59         $scope.oprateRightMenu = function(arg){
60             $ionicSideMenuDelegate.toggleRight(arg);
61         }
62     }]);
63 </script>
64 </body>
65 </html>

效果如图所示：

posted @ 2017-01-09 19:02  时间脱臼  阅读(147)  评论(0)    收藏  举报