侧边栏的使用范例：

<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. ZooKeeper 数据模型：节点的特性与应用

    zk的基础知识基本分为三大模块 数据模型 ACL 权限控制 Watch 监控 数据模型 默认配置文件 # The number of milliseconds of each tick tickTim ...

  2. 一.1搭建跨平台的统一python开发环境

    搭建跨平台的统一python开发环境: 使用开发环境的好处: 可不用在服务器上直接修改源代码---写的代码首先得入版本库(放git或giitlab中),在本地写代码提交到git中.然后在服务器上git ...

  3. day04 跳转

    一.事件跳转 1.标签绑定click事件 <view bindtap="clickme" data-nid="123" data-name="李 ...

  4. 解决autocomplete=off在Chrome中不起作用的方法

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为"on" 和 "off",该属性可省略:省略属性值后默认值为&q ...

  5. Html中a标签用法总结：创建email，电话，描点链接等。以及防止链接被搜索引擎收录

    <a>标签可以用来创建一个到其他网页.文件.同一页面内的位置.电子邮件地址或任何其他URL的超链接.  是我们常用的一个标签之一,今天就讲讲如何使用a来创建email,电话,描点链接等.以 ...

  6. 【线型DP】【LCS】UVA_10635 Prince and Princess

    嘤嘤嘤,我又来了,刚A完就写,这个沙雕题有丶恶心.                  ???时间4.11发现所有表情包都莫得了 题目: In an n×n chessboard, Prince and ...

  7. request.headers.get头部获取内容的缺失

    1.说明 今天遇到了一个小坑,在做权限控制的时候,用头部传递了参数取名为table_privilege_id, 在本地测试的时候是可以接到这个参数的,但是通过ngxin转发之后,奇怪了,怎么也拿不到这 ...

  8. Django---进阶6

    目录 聚合查询 分组查询 F与Q查询 django中如何开启事务 orm中常用字段及参数 数据库查询优化 图书管理系统 作业 聚合查询 # 聚合查询 aggregate ""&qu ...

  9. MATLAB GUI之ABC

    GUIDE 属性设置 name 更改名字 logo 在GUI的".m"文件中的OpeningFcn函数或者OutputFcn函数中添加以下代码: % 设置页面左上角的 LogoI ...

  10. Spring源码解析——核心类介绍

    前言: Spring用了这么久,虽然Spring的两大核心:IOC和AOP一直在用,但是始终没有搞懂Spring内部是怎么去实现的,于是决定撸一把Spring源码,前前后后也看了有两边,很多东西看了就 ...