ionic 侧边栏实例
侧边栏的使用范例:
<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 侧边栏实例的更多相关文章
- 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容
没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...
- ionic 开发实例
ionic 开发实例 一.ionic初始化项目 1:安装ionic npm install -g ionic 2:初始化项目框架 我们可以用命令创建一个应用程序,可以使用我们的一个现成的应用程序模板, ...
- 《Ionic 2 实例开发》发布
Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...
- Ionic 2 中创建一个照片倾斜浏览组件
内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...
- 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记(三)
十五.ionic路由 1.ionic中内联模板介绍 使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如 ...
- 关于ionic开发中遇到的坑与总结
这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程.我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧. 1.关于ionic效 ...
- Ionic 2 中添加图表
有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...
- Ionic 2 中的创建一个闪视卡片组件
闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...
- Web前端开发推荐阅读书籍、学习课程下载
转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...
随机推荐
- DTD约束和Schema约束
DTD约束 什么是DTD? DTD(Document Type Definition),文档类型定义,用来约束XML文档.规定XML文档中元素的名称,子元素的名称及顺序,元素的属性等. DTD约束长什 ...
- 关于soapui的使用
打开SoapUI软件,点击File -->NewSoapProject 创建测试项目 输入测试项目名称,点击OK保存 在测试项目上右击选择AddWSDL 输入所需要测试的接口地址,点击ok确 ...
- List AND Set
第二章 List集合 Collection中的常用几个子类(java.util.List集合.java.util.Set集合). 1.1 List接口介绍 java.util.List接口继承自Col ...
- web前端工程化/构建自动化
前端工程化 前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分,在此我通过以下这三方面总结一下自己的理解. 为什么需要前端工程化. 前端工程化的演化. 怎么实现前端工程化. 为什 ...
- APP开发---后台设计
想了好久才准备写博客的,希望能对我自己和大家都有帮助! 话不多说,直接正题! ------------------------------------------------------------- ...
- [JAVA]SpringBoot中让接口支持跨域
官方原文:https://spring.io/blog/2015/06/08/cors-support-in-spring-framework ===抽空翻译 最简单办法:在方法上增加注解: @Cro ...
- Halcon采集图像Image Acquisition解析
很明显,图像的采集是所有机器视觉应用中必须解决的问题,HALCON提供了为各种图像采集设备执行这种交互的接口,图像采集的任务被简化为几行代码,只需几个操作符的调用,更重要的是,这种简单并不是以限制可用 ...
- 我终于弄懂了Python的装饰器(四)
此系列文档: 1. 我终于弄懂了Python的装饰器(一) 2. 我终于弄懂了Python的装饰器(二) 3. 我终于弄懂了Python的装饰器(三) 4. 我终于弄懂了Python的装饰器(四) 四 ...
- Python3笔记027 - 6.2 参数传递
第6章 函数 6.2 参数传递 在理解形参和实参的基础上,理解位置参数.关键字参数.可变参数这三种情形,以及这三种的混合情形. 6.2.1 形式参数和实际参数 形式参数:在定义函数时,函数名后面括号中 ...
- MCU 51-1概述
Microcontroller Unit 单片机:将微处理器CPU.存储器(RAM.ROM) .基本输入/输出(I/O) 接口电路和总线接口等组装在一块主机板(即微机主板). 微型计算机:将微处理器C ...