Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解

一．侧边栏菜单 : ion-side-menus

侧边栏菜单是一个最多包含三个子容器的元素：

默认情况下，侧边栏菜单将只显示ion-side-menu-content容器的内容。

向左滑动时，将显示右边栏ion-side-menu容器的内容，向右滑动时，将显示左边栏 ion-side-menu容器的内容。

在ionic中，使用ion-side-menus指令定义侧边栏菜单：

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

<!--切换左侧栏显示状态-->

<any menu-toggle="left"></any>

<!--切换右侧栏显示状态-->

<any menu-toggle="right"></any>

　　menu-close指令用来给元素增加关闭侧栏内容的功能：

<any menu-close=""></any>

　　与menu-toggle指令不同，menu-close不需要指定要关闭的侧栏是哪一边，它直接将当前打开的侧栏关闭。

<!DOCTYPE html>

<html ng-app="ionic">

<head>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

    <script src="../../lib/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">

</head>

<body>

    <ion-side-menus>

        <ion-side-menu-content>

            <ion-header-bar class="bar-dark">

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

                <h1 class="title">ion-side-menu-content</h1>

            </ion-header-bar>

            <ion-content class="positive-bg">  

                <a menu-close="" class="button icon ion-navicon"></a>

            </ion-content>

        </ion-side-menu-content>  

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

            <ion-content class="balanced-bg">

            </ion-content>

        </ion-side-menu>  

    </ion-side-menus>

</body>

</html>

　　三． ion-side-menu-content 属性设置

使用指令ion-side-menu-content声明侧边栏菜单的主显示区域容器：

<ion-side-menu-content>...</ion-side-menu-content>

　　ion-side-menu-content指令有以下可选属性：

drag-content - 是否允许拖动内容打开侧栏菜单，默认为true。

允许值：true | false。当设置为false时，将禁止通过拖动内容打开侧栏菜单。

edge-drag-threshold - 是否启用边距检测。默认为false。

允许值：number | true | false。

如果设置为一个正数，那么只有当拖动发生在距离边界小于这个数值的情况下，才触发侧栏显示。

当设置为true时，使用默认的25px作为边距阈值。

如果设置为false或0，则意味着禁止边距检测，可以在内容区域的任何地方拖动来打开侧栏。

四.侧边栏区域容器 : ion-side-menu 属性

使用指令ion-side-menu声明侧边栏区域容器：

<ion-side-menu>...</ion-side-menu>

ion-side-menu指令有以下属性：

side - 位于内容区的左边或右边。side属性是必须的。允许值：left | right。默认值为left。
width - 侧边栏的宽度 width属性是可选的，表示以像素为单位的侧栏菜单宽度。默认为275px。
is-enabled - 是否可用。is-enabled属性是可选的，声明该侧边栏是否可用，允许值为：true | false ，默认为true。当侧边栏不可用时，拖拽内容或使用切换按钮都无法打开侧栏菜单。
expose-aside-when - 侧边栏自动显示条件表达式。默认情况下，侧边栏是隐藏的，需要用户向左或向右拖动内容，或者通过一个切换按钮来打开。但是在有些场景下（比如，横放的平板）屏幕宽度足够大，这时，自动地显示侧边栏内容会更合理。 expose-aside-when属性就是处理这种情况的，和CSS3的@meida类似，expose-aside-when需要一个CSS表达式，例如：expose-aside-when="(min-width:500px)"，这意味着当屏幕宽度大于 500px时将自动显示侧栏菜单。 ionic为expose-aside-when提供了一个快捷选项：large ，这等同于 (min-width:768px)。

<!DOCTYPE html>

<html ng-app="ionic">

<head>

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

    <script src="../../lib/js/ionic.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">

</head>

<body>

    <ion-side-menus>

        <ion-side-menu-content drag-content="true" edge-drag-threshold=50>

            <ion-header-bar class="bar-positive">

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

                <h1 class="title">ion-side-menu-content</h1>

            </ion-header-bar>

            <ion-content>

                <p>this is main area of side-menus</p>

            </ion-content>

            <div class="marker energized-bg"></div>

        </ion-side-menu-content>

        <ion-side-menu side="left" width="150" expose-aside-when="(min-width:500px)">

            <ion-content class="balanced-bg">

            </ion-content>

        </ion-side-menu>  </ion-side-menus>

</body>

</html>

　　五．脚本中控制侧边栏菜单接口 : $ionicSideMenuDelegate

toggleLeft([isOpen]) - 是否打开左侧栏菜单，参数isOpen是可选的，默认为true ，表示打开左侧栏菜单。
toggleRight([isOpen]) - 是否打开右侧栏菜单，参数isOpen是可选的，默认为true ，表示打开右侧栏菜单。
getOpenRatio() - 侧栏菜单打开的宽度占其总宽度比例。例如，一个100px宽的侧栏菜单，如果打开50px，那么其比例为50%，getOpenRatio()将返回0.5 。
isOpen() - 当前侧栏菜单是否打开。不管是左侧栏菜单，还是右侧栏菜单，只要处于打开状态，isOpen()都返回true。
isOpenLeft() - 左侧栏菜单是否打开。当左侧栏菜单处于打开状态时，isOpenLeft()返回true。
isOpenRight() - 右侧栏菜单是否打开。当右侧栏菜单处于打开状态时，isOpenRight()返回true。
canDragContent([canDrag]) - 是否允许拖拽内容以打开侧栏菜单。canDrag参数是可选的，如果canDrag为true，表示允许通过拖拽内容打开侧栏菜单。
edgeDragThreshold(value) - 设置边框距离阈值。当参数value为false或0时，意味着在内容区域任何位置进行拖拽都可以打开侧栏菜单。如果参数value为一个数值，意味着只有当拖拽发生的位置距边框不大于此数值时，才能打开侧栏菜单。参数value为true等同于将value设置为25。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

    <script src="../../lib/js/ionic.bundle.min.js"></script>  

    <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css">

    <script>

        angular.module("myApp",["ionic"])

                .controller("myCtrl",function($scope,$ionicSideMenuDelegate){

                    $scope.toggle = function(){

                        $ionicSideMenuDelegate.toggleLeft();

                    };

                });  

    </script>

</head>

<body ng-controller="myCtrl">

    <ion-side-menus>

        <ion-side-menu-content>

            <ion-header-bar class="bar-positive">

                <a class="button" ng-click="toggle();">切换</a>

                <h1 class="title">ion-side-menu-content</h1>

            </ion-header-bar>

            <ion-content class="calm-bg">

            </ion-content>

        </ion-side-menu-content>

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

            <ion-content class="balanced-bg">

            </ion-content>

        </ion-side-menu>

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

            <ion-content class="energized-bg">

            </ion-content>

        </ion-side-menu>

    </ion-side-menus>

</body>

</html>

六．脚本ion-tap结合 ion-side-menus一起使用：

记住要将ion-tap标签置于ion-side-menu-content标签内。

Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解的更多相关文章

Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
Spring Boot 2.x基础教程：Swagger接口分类与各元素排序问题详解
之前通过Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档一文,我们学习了如何使用Swagger为Spring Boot项目自动生成API文档,有不少用户留言问了关于文档 ...
MySQL基础篇(06)：事务管理，锁机制案例详解
本文源码:GitHub·点这里 || GitEE·点这里一.锁概念简介 1.基础描述锁机制核心功能是用来协调多个会话中多线程并发访问相同资源时,资源的占用问题.锁机制是一个非常大的模块,贯彻MyS ...
基础知识复习（一）——C语言位运算符详解
常用的位运算符:与(&),取反(~),或(|),异或(^),左移(«),右移(») 1. 与(&)操作符,按位与,全为1 时,结果取1 11001 &10011 结果:1000 ...
【夯实Mysql基础】MySQL在Linux系统下配置文件及日志详解
本文地址分享提纲: 1. 概述 2. 详解配置文件 3. 详解日志 1.概述 MySQL配置文件在Windows下叫my.ini,在MySQL的安装根目录下:在Linux下叫my.cnf,该文件位于 ...
Python基础之 urllib模块urlopen()与urlretrieve()的使用方法详解。
Python urllib模块urlopen()与urlretrieve()的使用方法详解 1.urlopen()方法urllib.urlopen(url[, data[, proxies]]) ...
Python学习入门基础教程(learning Python)--2.3.3Python函数型参详解
本节讨论Python下函数型参的预设值问题. Python在设计函数时,可以给型参预设缺省值,当用户调用函数时可以不输入实参.如果用户不想使用缺省预设值则需要给型参一一赋值,可以给某些型参赋值或不按型 ...
MYSQL—— 基础入门，select 查询涉及到的关键字组合详解（进阶篇）
SELECT查询组合使用的关键字很多,首先将最简单常用的关键字进行区分及使用,后续再继续补充............ 以下所有的关键字组合使用,主要以两个表students与students_scor ...
Nginx基础篇（2）- Nginx基本配置文件和变量详解
Nginx基本配置文件和变量详解 1. 基本配置文件 /etc/nginx/nginx.conf # nginx运行的用户 user nginx; # nginx进程数,建议设置为等于CPU总核心数. ...
Java基础学习总结（24）——Java单元测试之JUnit4详解
Java单元测试之JUnit4详解与JUnit3不同,JUnit4通过注解的方式来识别测试方法.目前支持的主要注解有: @BeforeClass 全局只会执行一次,而且是第一个运行 @Before ...

随机推荐

[CSS]三层嵌套的滑动门
原理: 最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明结构: <div class="module-title"> <span ...
如何理解java中的变量和常量
int a =10;这是一个变量,在后面的代码中你可以去更改a的值但如果你在声明a的时候加上了final,那么a就成了常量,后面的代码是不允许对a做修改的.还有一点你要注意,被final修饰的常量必须 ...
Quartz 2D 图形上下文栈矩阵裁剪
Quartz 2D 图形上下文栈矩阵 // // DJVIew.m // 图形上下文栈 // // Created by zjj on 15/6/30. // Copyright (c) 2015 ...
（转）如何学好C语言，一个成功人士的心得！
zidier111发表于 2013-1-26 08:59:05 　　今天，我能够自称是一个混IT的人，并能以此谋生，将来大家能一次谋生，都要感谢两个人：克劳德.香农和约翰.冯.诺依曼，是他们发现了所 ...
root运行chrome
os:centos7 edit file : /usr/bin/google-chrome Add "--user-data-dir" (without the quotes) a ...
升级或安装 GNOME Shell
1.安装经典Gnome桌面系统 install gnome-session-fallbackinstall gnome-appletsinstall indicator-applet indicato ...
matlab中如何保留指定的变量的数据
在使用matlab时,通常要将计算的结果保存到mat文件中.使用的命令是: save filename 但是用上述命令保存的时候,会将计算过程中的其他变量一起保存了.这中粗糙的保存有以下缺点: (1) ...
深入剖析HADOOP程序日志
深入剖析HADOOP程序日志前提本文来自于博客园逖靖寒的世界 http://gpcuster.cnblogs.com 了解log4j的使用. 正文本文来自于博客园逖靖寒的世界 http: ...
MySQL语句45道练习题及答案
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
2013年7月份第4周51Aspx源码发布详情
大型企业通用管理ERP源码 2013-7-26 [VS2010]2013.7.4更新内容:1.修复决策模式-客户等级不能保存问题.2.修复企业知识库有报错问题.3.修复运营模式-人力资源分析模块-在 ...

Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解

Ionic基础——侧边栏ion-side-menus 以及ion-tap结合侧边栏详解的更多相关文章

随机推荐

热门专题