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

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

  1. <ion-side-menus>
  2. <!-- 中间内容 -->
  3. <ion-side-menu-content ng-controller="ContentController">
  4. </ion-side-menu-content>
  5.  
  6. <!-- 左侧菜单 -->
  7. <ion-side-menu side="left">
  8. </ion-side-menu>
  9.  
  10. <!-- 右侧菜单 -->
  11. <ion-side-menu side="right">
  12. </ion-side-menu>
  13. </ion-side-menus>
  1. function ContentController($scope, $ionicSideMenuDelegate) {
  2. $scope.toggleLeft = function() {
  3. $ionicSideMenuDelegate.toggleLeft();
  4. };
  5. }

ion-side-menu-content
一个可见主体内容的容器,同级的一个或多个ionSideMenu 指令。
用法

  1. <ion-side-menu-content
  2. drag-content="true">
  3. </ion-side-menu-content>

ion-side-menu
一个侧栏菜单的容器,同级的一个ion-side-menu-content 指令。
用法

  1. <ion-side-menu
  2. side="left"
  3. width="myWidthValue + 20"
  4. is-enabled="shouldLeftSideMenuBeEnabled()">
  5. </ion-side-menu>

menu-toggle
在一个指定的侧栏中切换菜单。
用法
下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。

  1. <ion-view>
  2. <ion-nav-buttons side="left">
  3. <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  4. </ion-nav-buttons>
  5. ...
  6. </ion-view>

menu-close
关闭当前打开的侧栏菜单。
用法
下面是一个在导航栏内链接的例子。点击此链接会自动打开指定的侧栏菜单。

  1. <a menu-close href="#/home" class="item">首页</a>

$ionicSideMenuDelegate
该方法直接触发\(ionicSideMenuDelegate服务,来控制所有侧栏菜单。用\)getByHandle方法控制特定情况下的ionSideMenus。
用法

  1. <body ng-controller="MainCtrl">
  2. <ion-side-menus>
  3. <ion-side-menu-content>
  4. 内容!
  5. <button ng-click="toggleLeftSideMenu()">
  6. 切换左侧侧栏菜单
  7. </button>
  8. </ion-side-menu-content>
  9. <ion-side-menu side="left">
  10. 左侧菜单!
  11. <ion-side-menu>
  12. </ion-side-menus>
  13. </body>
  1. function MainCtrl($scope, $ionicSideMenuDelegate) {
  2. $scope.toggleLeftSideMenu = function() {
  3. $ionicSideMenuDelegate.toggleLeft();
  4. };
  5. }

方法

  1. 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. VScode常见问题汇总(持续更新)

    1.formatOnSave--保存后自动格式化        根据每个人安装的插件不同,可能问题原因也不同.        我个人的原因是因为JS-CSS-HTML Formatter这个插件,那么 ...

  2. 四、Kafka 核心源码剖析

    一.Kafka消费者源码介绍 1.分区消费模式源码介绍 分区消费模式直接由客户端(任何高级语言编写)使用Kafka提供的协议向服务器发送RPC请求获取数据,服务器接受到客户端的RPC请求后,将数据构造 ...

  3. POJ 2449 Remmarguts' Date (K短路 A*算法)

    题目链接 Description "Good man never makes girls wait or breaks an appointment!" said the mand ...

  4. sklearn进行拟合

    # codind:utf-8 from sklearn.linear_model import SGDRegressor,LinearRegression,Ridge from sklearn.pre ...

  5. _csv.Error: line contains NULL byte

    原因是表格保存时扩展名为 xls,而我们将其改为csv文件通常是重命名: 解决方法只需把它另存为 csv 文件.

  6. Tslib移植与分析【转】

    转自:http://blog.csdn.net/water_cow/article/details/7215308 目标平台:LOONGSON-1B开发板(mips32指令集)编译平台:x86PC-- ...

  7. aarch64_l2

    libfreehand-devel-0.1.1-5.fc26.aarch64.rpm 2017-05-23 07:16 26K fedora Mirroring Project libfreehand ...

  8. sicily 1215. 脱离地牢

    Description 在一个神秘的国度里,年轻的王子Paris与美丽的公主Helen在一起过着幸福的生活.他们都随身带有一块带磁性的阴阳魔法石,身居地狱的魔王Satan早就想得到这两块石头了,只要把 ...

  9. bzoj 1083 繁忙的都市

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1083 题解: 在bzoj里能遇到如此如此水的题真是不容易…… 乍一看好像有点吓人,其实是一 ...

  10. shell系统检测->

    系统状态检测脚本练习 1-> 查看磁盘状态 思路:查看磁盘/当前使用状态,如果使用率超过80%则报警发邮件 1.获取磁盘当前使用的值 df -h|grep /$ 2.从获取到的值中提取出,对应的 ...