Mit dem Pull-up-Menü (ActionSheet) kann der Benutzer Optionen über das Feld auswählen, das auftaucht.
Sehr gefährliche Optionen werden in hervorgehobenem Rot anerkannt. Sie können es verschwinden lassen, indem Sie auf die Schaltfläche Abbrechen klicken oder auf einen leeren Speicherplatz klicken.
Beispiel
HTML -Code
<Body ng-App = "Starter" ng-controller = "actionSheetCtl"> <Ion-Pane> <Ion-Content> <H2 ng-klick = "show ()"> Actionblatt </H2> </Ion-Content> </Ion-Pane> </body>
JavaScript -Code
Das Auslösen des Pull-up-Menüs im Code erfordert den $ ionicactionSheet-Service in Ihrem Winkelcontroller:
Angular.module ('Starter', ['Ionic']). Run (Funktion ($ Ionicplatform) {$ Ionicplatform.ready (function () {// Die Zubehörleistange ausblenden standardmäßig (entfernen Sie diese, um die Zubehörleisen über der Tastatur // für die Formulare) if (window.cordova && andcordova.cordova.cordova.Cordova.Cordova.Cordova.Cordova.Plugins.Keyboard) anzuzeigen. {CORDOVA.PLUGINS.Keyboard.HideKeyboardAccessoryBar (true);} if (window.statusBar) {statusBar.Styledefault ();}});}). Controller ('ActionSheetCtl', ['$ Scope', $ IonicactionSheet ',' $ Timeout ',' $ Timeout '' , function ($ scope, $ ionicactionSheet, $ timeout) {$ scope.show = function () {var hiDesheet = $ IonicactionSheet.show ({buttons: [{text: <b> shufl function () {// Abbrechen -Code addieren.}, ButtonClicked: Funktion (index) {return true;}}); $ timeout (function () {hidresheet ();}, 2000);};Der Betriebseffekt ist wie folgt:
Komplette Quellcode:
<html> <head> <meta charset = "utf-8"> <meta name = "viewPort" content = "initial-scale = 1, maximal scale = 1, user-scalable = no, width = Geräte-Width"> <titels> </title> <link href = "http://cdn.bootcs.com/ionic/1.3.1/css/ionic.min.css" rel = "stylesheet"> <script src = "http://cdn.bootcs.com/ionic/1.1/js/ionic type = "text/javaScript"> angular.module ('Starter', ['Ionic']). Run (Funktion ($ ionicplatform) {$ ionicplatform.ready (function () {// Die Zubehörleistange ausblenden. {CORDOVA.PLUGINS.Keyboard.HideKeyboardAccessoryBar (true);} if (window.statusBar) {statusBar.Styledefault ();}});}). Controller ('ActionSheetCtl', ['$ Scope', $ IonicactionSheet ',' $ Timeout ',' $ Timeout '' , function ($ scope, $ ionicactionSheet, $ timeout) {$ scope.show = function () {var hiDesheet = $ IonicactionSheet.show ({buttons: [{text: <b> shufl function () {// Abbrechen-Code addieren.}, Buttonclicked: Funktion (Index) {return true;}}); $ timeout (function () {hidresheet (), 2000);}; ng-klick = "show ()"> Aktionsblatt </H2> </Ion-In-In-Inhalt> </ion-pane> </body> </html>Das obige ist das relevante Wissen über das Ionic Pull-up-Menü (ActionSheet) -Stanzcode, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird für Sie hilfreich sein!