我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。
在组件中可以使用\(ionicBackdrop.retain()来显示背景层，使用\)ionicBackdrop.release()隐藏背景层。
每次调用retain后，背景会一直显示，直到调用release消除背景层。
HTML 代码

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>

        <ion-content >

            <h2 ng-click="action()">$ionicBackdrop</h2>

        </ion-content>

    </ion-pane>

</body>

JavaScript 代码

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

.run(function($ionicPlatform) {

  $ionicPlatform.ready(function() {

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

    // for form inputs)

    if(window.cordova && window.cordova.plugins.Keyboard) {

      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

    }

    if(window.StatusBar) {

      StatusBar.styleDefault();

    }

  });

})

.controller( 'actionsheetCtl',['$scope','$timeout' ,'$ionicBackdrop',function($scope,$timeout,$ionicBackdrop){

    $scope.action = function() {

       $ionicBackdrop.retain();

       $timeout(function() {    //默认让它1秒后消失

         $ionicBackdrop.release();

       }, 1000);

    };

}])





Ionic Js二：背景层的更多相关文章

  1. Ionic Js二十：选项卡栏操作

    ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面). 用法 < ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 一天带你入门到放弃vue.js(二)

    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...

  4. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 微信小程序(二)--逻辑层与界面层

    一.逻辑层与界面层分离 小程序开发框架将我们需要完成的编码,划分成了两种类型的编码:逻辑编码(由JavaScript完成,业务数据供给界面事件处理),界面编码(页面结构WXML,页面样式WXSS,展示 ...

  6. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  7. JS二维数组排序组合

    需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...

  8. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于更改MYECLIPSE JS 代码背景颜色

    白色的背景,看花了眼,你想改一下编辑器的背景颜色,移步这里就可以了. 这时你高兴的打开编辑器,发现颜色确实变了,但是当你打开有JS的JSP时,你碉堡了,发现JS的背景颜色还是默认的, 看着让人纠结,好 ...

随机推荐

  1. 在IDEA中实战Git 实用

    工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 场景三:小 ...

  2. typdef用法总结

    typdef是在计算机编程语言中用来为复杂的声明定义简单的别名用的 typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,在网上找了很多资料,结合自己遇到的各 ...

  3. 张鑫旭：Promise异步编程模式

    参考文章: http://www.zhangxinxu.com/wordpress/2014/02/es6-javascript-promise-%E6%84%9F%E6%80%A7%E8%AE%A4 ...

  4. 20155307 2016-2017-2 《Java程序设计》第5周学习总结

    20155307 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 这两章主要讲的是如何处理程序中的异常情况,对于错误,java会将其打包成对象,可以用&quo ...

  5. serialize()传值缺失

    思路:serialize()获取的是 " & " 拼接的字符串,无法传值,需要拆分后,拼接,生成新字符串,传过去. 例子: var v_idd = $("form ...

  6. 数据库（八）之T-SQL编程

    什么是Transact-SQL? 结构化查询语言(SQL)是有美国国家标准协会(ANSI)和国际标准化组织(ISO)定义的标准,而Transact-SQL是Microsoft公司对此标准的一个实现. ...

  7. F. Make It Connected（krustra+）

    题目链接:http://codeforces.com/contest/1095/problem/F 题目大意:首先给你n个点,然后给你每个点的权值,再给你m条边,这些边可以选也可以不选,然后问你要使这 ...

  8. C++ Primer 5th 第19章 特殊工具与技术

    C++是一种通用型语言,其设计者希望它能处理各种各样的问题,因此除了一些能适用于所有问题的语言特性,还有一些适用于特定问题的特性. 控制内存分配 某些程序对内存分配有着特殊的需求,它们不适合使用标准的 ...

  9. Java NIO 之 Channel（通道）

    历史回顾: Java NIO 概览 Java NIO 之 Buffer(缓冲区) 其他高赞文章: 面试中关于Redis的问题看这篇就够了 一文轻松搞懂redis集群原理及搭建与使用 一 Channel ...

  10. win10定时关机

    CMD  输入shutdown -s -t 7200这个命令,大家可以自已设置7200这个时间,自己算一下60分钟=3600秒: