ionic-actionSheet(该操作表是一个向上滑动的面板)

ionic-actionSheet

      该操作表是一个向上滑动的面板，用户可以从一系列选项中选择。危险的操作以红色突出显 示。 有简便的方式可以取消操作表，例如点击背景，在桌面电脑测试时，按ESC键也可以。

示例代码：

 

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11     <ion-header-bar>
12         <h1 class="title">Header</h1>
13     </ion-header-bar>
14     <ion-content>
15         <p>Hello</p>
16         <button class="button button-royal" ng-click="show()">show ionicActionSheet</button>
17     </ion-content>
18     <ion-footer-bar>
19         <h1 class="title">Footer</h1>
20     </ion-footer-bar>
21 <script>
22     var app = angular.module('myApp', ['ionic']);
23     app.controller('myCtr',['$scope','$ionicActionSheet',function($scope,$ionicActionSheet){
24         $scope.show = function(){
25             $ionicActionSheet.show({
26                 buttons:[
27                     {text:'编辑'},
28                     {text:'撤销'}
29                 ],
30                 buttonClicked:function(index){
31                     console.log('index is '+index);
32                 },
33                 destructiveText:'删除',
34                 destructiveButtonClicked:function(){
35                     console.log("删除一下");
36                     return true;
37                 },
38                 titleText:'ionicActionSheet',
39                 cancelText:'取消'
40             });
41         }
42     }]);
43 </script>
44 </body>
45 </html>

 

效果如下图

 

posted @ 2017-01-09 18:31  时间脱臼  阅读(520)  评论(0)    收藏  举报