首页 » ionic » ionic JavaScript
网站地图

ionic 上拉菜单(ActionSheet)

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。

非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。

实例

HTML 代码

  1. <body ng-app="starter" ng-controller="actionsheetCtl" >
  2.  
  3.     <ion-pane>
  4.         <ion-content >
  5.             <h2 ng-click="show()">Action Sheet</h2>
  6.         </ion-content>
  7.     </ion-pane>
  8. </body>

JavaScript 代码

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

  1. angular.module('starter', ['ionic'])
  2.  
  3. .run(function($ionicPlatform) {
  4.   $ionicPlatform.ready(function() {
  5.     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  6.     // for form inputs)
  7.     if(window.cordova && window.cordova.plugins.Keyboard) {
  8.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  9.     }
  10.     if(window.StatusBar) {
  11.       StatusBar.styleDefault();
  12.     }
  13.   });
  14. })
  15.  
  16. .controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
  17.     $scope.show = function() {
  18.  
  19.         var hideSheet = $ionicActionSheet.show({
  20.             buttons: [
  21.               { text: '<b>Share</b> This' },
  22.               { text: 'Move' }
  23.             ],
  24.             destructiveText: 'Delete',
  25.             titleText: 'Modify your album',
  26.             cancelText: 'Cancel',
  27.             cancel: function() {
  28.                  // add cancel code..
  29.                },
  30.             buttonClicked: function(index) {
  31.               return true;
  32.             }
  33.         });
  34.  
  35.         $timeout(function() {
  36.             hideSheet();
  37.         }, 2000);
  38.  
  39.     };  
  40. }])

运行效果如下图：