×
ionic 教程ionic 安装ionic 创建 APP

ionic CSS

ionic 头部与底部ionic 按钮ionic 列表ionic 卡片ionic 表单和输入框ionic toggleionic checkboxionic 单选框ionic rangeionic selectionic tab(选项卡)ionic 网格(Grid)ionic 颜色ionic icon(图标)

ionic JavaScript

ionic 上拉菜单ionic 背景层ionic 下拉刷新ionic 复选框ionic 单选框操作ionic 切换开关操作ionic 手势事件ionic 头部和底部ionic 列表操作ionic 加载动作ionic 模态窗口ionic 导航ionic 平台ionic 浮动框ionic 对话框ionic 滚动条ionic 侧栏菜单ionic 滑动框ionic 加载动画ionic 选项卡栏操作

ionic 背景层


我们经常需要在 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);
    }; 
}])

显示效果如下图所示:


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)