ionic 侧边栏实例

侧边栏的使用范例：

<body >
<ion-side-menus>
  <!-- 中间内容 -->
  <ion-side-menu-content ng-controller="ContentController">
  <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </div>
  <h1 class="title" style="text-align: center;">Title!</h1>
  <div class="buttons">
    <button class="button">右侧按钮</button>

  </div>

</ion-header-bar>
  </ion-side-menu-content>

  <!-- 左侧菜单 -->
  <ion-side-menu side="left" width="180">
    left-side-menu
  </ion-side-menu>

  <!-- 右侧菜单 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
<script type="text/javascript">
  angular.module('ionicApp',['ionic'])
  .controller('ContentController',function($scope, $ionicSideMenuDelegate){
    $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
  
  });

</script>
</body>

 

posted @ 2016-10-09 17:15  墨纸瀚云  阅读(1722)  评论(0)  编辑  收藏  举报