プルアップメニュー(ActionSheet)を使用すると、ユーザーはポップアップするボックスを介してオプションを選択できます。
非常に危険なオプションは、強調表示された赤で認識されます。キャンセルボタンをクリックするか、空白のスペースをクリックすると、消えることができます。
例
HTMLコード
<body ng-app = "starter" ng-controller = "actionsheetctl"> <ion-pane> <ion-content> <h2 ng-click = "show()">アクションシート</h2> </ion-pane> </ion-pane> </body>
JavaScriptコード
コードのプルアップメニューをトリガーするには、Angularコントローラーの$ IONICACTIONSHEETサービスが必要です。
Angular.Module( 'Starter'、['Ionic']) {cordova.plugins.keyboard.hidekeyboardaccesorybar(true);} if(window.statusbar){statusbar.styledefault();}});})。 、function($ scope、$ ionicactionsheet、$ timeout){$ scope.show = function(){var hidesheet = $ ionicactionsheet.show({buttons:[{text: '<b> share </b> this'}、{text: 'move'}] 「キャンセル」、キャンセル:function(){// CANCEL CODE ..}、ButtonClicked:function(index){return true;}}); $ timeout(function(){hidesheet();}、2000);});操作効果は次のとおりです。
完全なソースコード:
<html> <head> <Meta charset = "utf-8"> <meta name = "viewport" content = "initial-scale = 1、maximing-scale = 1、user-scalable = no、width = device-width"> <title> </title> <link href = "http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel = "styleSheet"> <script src = "http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"> type = "text/javascript"> angular.module( 'starter'、['ionic']))。 {cordova.plugins.keyboard.hidekeyboardaccesorybar(true);} if(window.statusbar){statusbar.styledefault();}});})。 、function($ scope、$ ionicactionsheet、$ timeout){$ scope.show = function(){var hidesheet = $ ionicactionsheet.show({buttons:[{text: '<b> share </b> this'}、{text: 'move'}] 'キャンセル'、キャンセル:function(){// Cancel Code ..}、ButtonClicked:function(index){return true;}}); $ timeout(){hidesheet();}、2000);}) > <ion-pane> <ion-content> <h2 ng-click = "show()">アクションシート</h2> </ion-content> </ion-pane> </body> </html>上記は、編集者が紹介したイオンプルアップメニュー(ActionSheet)インスタンスコードの関連知識です。それがあなたに役立つことを願っています!