侧边栏的使用范例：

<body >

<ion-side-menus>

  <!-- 中间内容 -->

  <ion-side-menu-content ng-controller="ContentController">

  <ion-header-bar align-title="left" class="bar-positive">

  <div class="buttons">

    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

  </div>

  <h1 class="title" style="text-align: center;">Title!</h1>

  <div class="buttons">

    <button class="button">右侧按钮</button>

  </div>

</ion-header-bar>

  </ion-side-menu-content>

  <!-- 左侧菜单 -->

  <ion-side-menu side="left" width="180">

    left-side-menu

  </ion-side-menu>

  <!-- 右侧菜单 -->

  <ion-side-menu side="right">

  </ion-side-menu>

</ion-side-menus>

<script type="text/javascript">

  angular.module('ionicApp',['ionic'])

  .controller('ContentController',function($scope, $ionicSideMenuDelegate){

    $scope.toggleLeft = function() {

    $ionicSideMenuDelegate.toggleLeft();

  };

  });

</script>

</body>

ionic 侧边栏实例的更多相关文章

  1. 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容

    没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...

  2. ionic 开发实例

    ionic 开发实例 一.ionic初始化项目 1:安装ionic npm install -g ionic 2:初始化项目框架 我们可以用命令创建一个应用程序,可以使用我们的一个现成的应用程序模板, ...

  3. 《Ionic 2 实例开发》发布

    Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...

  4. Ionic 2 中创建一个照片倾斜浏览组件

    内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...

  5. 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（三）

    十五.ionic路由 1.ionic中内联模板介绍 使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如 ...

  6. 关于ionic开发中遇到的坑与总结

    这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程.我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧. 1.关于ionic效 ...

  7. Ionic 2 中添加图表

    有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...

  8. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

  9. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

随机推荐

  1. vue与react对比总结（一）

    一.react和vue设计上的共同理念 1.使用 Virtual DOM 2.提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件. 3.将注意力集中保持在核心库,而将其 ...

  2. 洛谷 P6145 【[USACO20FEB]Timeline G】

    这道题难就难在建图吧,建图懂了之后,跑一遍最长路就好了(也就是关键路径,但是不会用拓补排序求qnq,wtcl). 怎么建图呢?先不管输入的S,看下面的输入,直接建有向边即可,权值为x.如果现在跑最长路 ...

  3. py之logging模块

    参考:https://www.cnblogs.com/yuanchenqi/articles/5732581.html 一 (简单应用) import logging logging.debug('d ...

  4. 移动端web app要使用rem实现自适应布局:font-size的响应式

    关于webAPP的开发最主要解决的就是“自适应自适应布局”.常规的适配有很多做法,例如:流式布局.限死宽度等,但是这些方案都不是最佳的解决方法​,而最满足设计需要的是: 元素可以根据屏幕大小而等比列变 ...

  5. 朋友HDU - 5963 (思维题) 三种方法

    传送门 题目描述 输入 输出 样例输入 Sample Input 样例输出 Boys win! Girls win! Girls win! Boys win! Girls win! Boys win! ...

  6. day49 数据库终章

    目录 一.pymysql补充 二.数据库补充 1 视图(了解) 2 触发器(了解) 3 事务 4 存储过程(了解) 5 函数 6 流程控制 7 索引 8 b+树 9 聚集索引(primary key) ...

  7. day27 面向对象

    day27 面向对象 目录 day27 面向对象 一.面相对象介绍 1 什么是对象 2 类于对象 二.实现面向对象编程 1 先定义类 2 属性访问 2.1 调用dict方法 2.2 类.属性 3 调用 ...

  8. JVM 学习笔记（四）

    回顾: 在之前的文章中,我们主要体现了当堆内存设置的比较小的情况下,比如:-Xmx20M -Xms20M,在项目运行的过程中,不断往内存中去添加对象, 这时候就会出现OOM,也就是内存溢出,本文章将展 ...

  9. 操作句柄Handle（7）

    可以将Handle理解成访问对象的一个“句柄”.垃圾回收时对象可能被移动(对象地址发生改变),通过Handle访问对象可以对使用者屏蔽垃圾回收细节. Handle涉及到的相关类的继承关系如下图所示. ...

  10. 重学c#系列——c# 托管和非托管资源(三)

    前言 c# 托管和非托管比较重要,因为这涉及到资源的释放. 现在只要在计算机上运行的,无论玩出什么花来,整个什么概念,逃不过输入数据修改数据输出数据(计算机本质),这里面有个数据的输入,那么我们的内存 ...