zoukankan      html  css  js  c++  java
  • 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])


  • 相关阅读:
    OPPO R9sPlus MIFlash线刷TWRP Recovery ROOT详细教程
    OPPO R11 R11plus系列 解锁BootLoader ROOT Xposed 你的手机你做主
    努比亚(nubia) M2青春版 NX573J 解锁BootLoader 并进入临时recovery ROOT
    华为 荣耀 等手机解锁BootLoader
    青橙 M4 解锁BootLoader 并刷入recovery ROOT
    程序员修炼之道阅读笔03
    冲刺8
    典型用户模板分析
    学习进度八
    冲刺7
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-qi-ce-lan-cai-dan.html
Copyright © 2011-2022 走看看