ionic 上拉菜单(ActionSheet)+背景层+下拉刷新

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。

---

实例

HTML 代码

 

     
         
            
Action Sheet
 
         
    

JavaScript 代码
在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务：

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','$ionicActionSheet','$timeout' 
,function($scope,$ionicActionSheet,$timeout){ 
    $scope.show = function() { 

        var hideSheet = $ionicActionSheet.show({ 
            buttons: [ 
              { text: 'Share This' }, 
              { text: 'Move' } 
            ], 
            destructiveText: 'Delete', 
            titleText: 'Modify your album', 
            cancelText: 'Cancel', 
            cancel: function() { 
                // add cancel code.. 
            }, 
            buttonClicked: function(index) { 
              return true; 
            } 
        }); 

        $timeout(function() { 
            hideSheet(); 
        }, 2000); 

    }; 
}])

尝试一下 »

运行效果如下图：

---

---

ionic 背景层

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

---

实例

HTML 代码

 
         
             
                
$ionicBackdrop
 
             
        

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 下拉刷新

在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：

实例

HTML 代码

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' ,'$http',function($scope,$timeout,$http){ 

    $scope.items=[ 
        { 
            "name":"HTML5" 
        }, 
        { 
            "name":"JavaScript" 
        }, 
        { 
            "name":"Css3" 
        } 
    ]; 

    $scope.doRefresh = function() { 
        $http.get('http://www.runoob.com/try/demo_source/item.json') //注意改为自己本站的地址，不然会有跨域问题 

        .success(function(newItems) { 
            $scope.items = newItems; 
        }) 
        .finally(function() { 
            $scope.$broadcast('scroll.refreshComplete'); 
        }); 
    };
}])

item.json 文件数据：

[ 
  { 
    "name":"菜鸟教程" 
  }, 
  { 
    "name":"www.runoob.com" 
  }
]

尝试一下 »

效果如下所示：

![Uploading Paste_Image_396445.png . . .]

Paste_Image.png