ionische Pop-up-Menü (ActionSheet)
Pop-up-Menü (ActionSheet) über Pop-up-Fenster Benutzern zu ermöglichen, um eine Option auszuwählen.
Sehr gefährlich Option wird in rot zum ersten Mal hervorgehoben werden, um Menschen zu identifizieren. Sie können auf die Schaltfläche Abbrechen klicken oder eine leere Stelle klicken, um es verschwinden zu lassen.
Beispiele
HTML-Code
<body ng-app="starter" ng-controller="actionsheetCtl" >
<ion-pane>
<ion-content >
<h2 ng-click="show()">Action Sheet</h2>
</ion-content>
</ion-pane>
</body>
JavaScript-Code
Trigger-Pop-up-Menü im Code, müssen Sie $ ionicActionSheet Service in Ihrer Winkel Controller zu verwenden:
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);
};
}])
Die operativen Ergebnisse wie folgt:
