ionic 上拉菜單(ActionSheet) · W3School Ionic 教程

# ionic 上拉菜單(ActionSheet) 上拉菜單(ActionSheet)通過往上彈出的框，來讓用戶選擇選項。非常危險的選項會以高亮的紅色來讓人第一時間識別。你可以通過點擊取消按鈕或者點擊空白的地方來讓它消失。 ## 實例 ### HTML 代碼 ``` <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane> </body> ``` ### 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: '<b>Share</b> 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); }; }]) ``` 運行效果如下圖： ![](http://www.runoob.com/wp-content/uploads/2015/08/687474703a2f2f3776696a717a…6c622e636c6f7564646e2e636f6d2f616374696f6e2d73686565742e6769662e676966.gif)