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])


  • 相关阅读:
    Flex Charting: Format Your X And Y Axis
    Flex Charting: Format Your Data Tips The Same As Your Axes
    高质量的开源Flex UI组件库项目(FlexLib)
    今天学习Flex3.2嵌入图片,值得说道的是如何嵌入scale9 缩放的图像
    zz[as3 hack技术]垃圾回收机强制执行
    Spark Skinning (including SkinnableComponent) Functional and Design Specification
    Flex DataTransforms类的理解
    关于AS3中弱引用的一点理解
    flex 元字符
    收集整理了一些AS3中常用到的公式
  • 原文地址:https://www.cnblogs.com/quickcodes/p/Ionic-Js-shi-qi-ce-lan-cai-dan.html
Copyright © 2011-2022 走看看