Ionic Js十七:側欄菜單


一個容器元素包含側邊菜單和主要內容。通過把主要內容區域從一邊拖動到另一邊,來讓左側或右側的側欄菜單進行切換。
效果圖如下所示:

用法
要使用側欄菜單,添加一個父元素,一個中間內容 ,和一個或更多 指令。

<ion-side-menus>
  <!-- 中間內容 -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- 左側菜單 -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- 右側菜單 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>

 

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

 

ion-side-menu-content
一個可見主體內容的容器,同級的一個或多個ionSideMenu 指令。
用法

<ion-side-menu-content
  drag-content="true">
</ion-side-menu-content>

 

ion-side-menu
一個側欄菜單的容器,同級的一個ion-side-menu-content 指令。
用法

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

 

menu-toggle
在一個指定的側欄中切換菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。

<ion-view>
  <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>

 

menu-close
關閉當前打開的側欄菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。

<a menu-close href="#/home" class="item">首頁</a>

 

$ionicSideMenuDelegate
該方法直接觸發\(ionicSideMenuDelegate服務,來控制所有側欄菜單。用\)getByHandle方法控制特定情況下的ionSideMenus。
用法

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      內容!
      <button ng-click="toggleLeftSideMenu()">
        切換左側側欄菜單
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      左側菜單!
    <ion-side-menu>
  </ion-side-menus>
</body>

 

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

 

方法

toggleLeft([isOpen])

 


 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM