我们经常需要在 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. Header File Dependencies

    ［Header File Dependencies］ 什么时候可以用前置声明替代include? 1.当 declare/define pointer&reference 时. 2.当 dec ...

  2. [转载]Require.js Example – Setup Time 2 Minutes

    http://www.sitepoint.com/require-js-setup-time-2-minutes/ Setup Require.js in just 2 minutes. or dow ...

  3. 【Foreign】动态规划 [分治][DP]

    动态规划 Time Limit: 50 Sec  Memory Limit: 128 MB Description 一开始有n个数,一段区间的价值为这段区间相同的数的对数. 我们想把这n个数切成恰好k ...

  4. Struts S2-052漏洞利用之Meterpreter（CVE-2017-9805）

    Struts S2-052漏洞爆出来已经快一周了,大家可能更想知道其危害~鸡肋? 这里就直接给出漏洞利用拿Meterpreter的过程,想了解更多的请参考其他文章,下面是实验演示部分.Struts S ...

  5. std::max 错误

    Today I typed the following: int t = (std::max)(timeout, lagtime); Why did I put parentheses around ...

  6. CentOS6.6 编译Redis报错："Newer version of jemalloc required"

    一.前言 不同系统同一个问题,可能解决方法不一样,也可能会遇到不同的问题,所以具体情况具体分析,我的系统是Centos6.6, 查看系统命令  cat /etc/issue 二.安装redis后编译报 ...

  7. java所搜引擎slor学习笔记(一)

    java搜索引擎有很多,比较熟悉的就是slor和lucene. luncene: 概念:全文检索是计算机程序通过扫描文章中的每一个词,对每一个词建立一个索引,指明该词在文章中出现的次数和位置.当用户查 ...

  8. 读书笔记 effective C++ Item 33 避免隐藏继承而来的名字

    1. 普通作用域中的隐藏 名字实际上和继承没有关系.有关系的是作用域.我们都知道像下面的代码: int x; // global variable void someFunc() { double x ...

  9. mysql -> 事务&事务锁_09

    事务的特性 redo undo 锁的隔离级别

  10. MyEclipse自带且常用的快捷键和自己定义的快捷键方法步骤

    1.MyEclipse自带且常用的快捷键 内容提示(补全): Alt+/    导包快捷键: Ctrl+Shift+o    格式化代码: Ctrl+Shift+f    行代码位置上下调换: Alt ...