一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。
效果图如下所示：





用法
要使用侧栏菜单，添加一个父元素，一个中间内容 ，和一个或更多 指令。

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




Ionic Js十七：侧栏菜单的更多相关文章

  1. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  2. ionic 侧栏菜单用法

    第一步: 引入js和css文件我这里是直接引入的cdn,ionic是基于angular的,bundle.min.js把常用angular的js已经压缩到一起,可以直接引入.bundle.min.js, ...

  3. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  4. ionic js ion-tabs选项卡栏操作

    ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...

  5. 【angular5项目积累总结】侧栏菜单 navmenu

    View Code import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/co ...

  6. Ionic Js十二：导航ion-nav-view

     ion-nav-view 当用户在你的app中浏览时,ionic能够检测到浏览历史.通过检测浏览历史,实现向左或向右滑动时可以正确转换视图. 采用AngularUI路由器模块等应用程序接口可以分为 ...

  7. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  8. 仿酒仙网的一款jQuery侧栏弹出导航栏特效

    仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特效.大家可以拿去研究研究 . 注意:该特效还支持挨千刀的IE6啊,之强大. ...

  9. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

随机推荐

  1. [USACO09NOV]硬币的游戏A Coin Game

    https://daniu.luogu.org/problemnew/show/P2964 dp[i][j] 表示桌面上还剩i枚硬币时,上一次取走了j个的最大得分 枚举这一次要拿k个,转移到dp[i- ...

  2. bzoj千题计划117：bzoj1026: [SCOI2009]windy数

    http://www.lydsy.com/JudgeOnline/problem.php?id=1026 数位DP 如果前一位填的是0, 0是前导0,下一位可以随便填 0不是前导0,下一位不能填1 为 ...

  3. soj1036. Crypto Columns

    1036. Crypto Columns Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description The columnar en ...

  4. 20165227朱越 预备作业3 Linux安装及学习

    预备作业3 Linux安装及学习 Linux的安装 虚拟机的安装远没有想象中的那样容易,下载还没有出现什么问题,当我安装的时候,第一个问题出现在创建虚拟机时选择安装的虚拟机版本和类型的时候的错误 当时 ...

  5. 一个简单的java jdbc案例

    有些时候,配置一个spring+mybatis框架,然后写xml,dao ,service显得特别繁琐. 如果我们只是想查一下数据库,不考虑连接复用也不考虑动态sql,可以用原生的jdbc来实现,方便 ...

  6. MODULE_DEVICE_TABLE （二）【转】

    转自:http://blog.csdn.net/uruita/article/details/7263290 1. MODULE_DEVICE_TABLE (usb, skel_table);该宏生成 ...

  7. 如何调整Linux内核启动中的驱动初始化顺序-驱动加载优先级

    Linux内核为不同驱动的加载顺序对应不同的优先级,定义了一些宏: include\linux\init.h #define pure_initcall(fn) __define_initcall(& ...

  8. python网络编程-进程锁

    一:进程锁的作用 进程锁是防止多进程并发执行在屏幕打印的时候,其他进程也输出数据到屏幕,而出现混乱现象. 比如:进程池中很多进程会向同一个日志文件中打印日志 二:代码 # -*- coding:utf ...

  9. 使用vs2015编辑c++模板程序报错2019

    笔者这几天在熟悉vs2015工具编辑c++,(从前用的都是vc++6.0).发现还真是不容易使用,简单的一个小程序会报错一大堆你看不懂的问题.现将我发现的重要的一个问题呈现给大家. 在使用类模板设计对 ...

  10. python进阶学习之匿名函数lambda

    定义: lambda 参数列表:return(表达式) 匿名函数的表达式,只允许有一个. 匿名函数一般用于较简单的情况. 实例1: 实例2,配合高阶函数filter()使用: filter()函数是  ...