ionic action sheet | 码农工具

​x
 
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>菜鸟教程(runcodex.com)</title>
        <link href="//www.runcodex.com/static/ionic/css/ionic.min.css" rel="stylesheet">
        <script src="https://www.runcodex.com/static/ionic/js/ionic.bundle.min.js"></script>
        <script type="text/javascript">
          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);
​
              };  
          }])
        </script>
    </head>
    <body ng-app="starter" ng-controller="actionsheetCtl" >
​
        <ion-pane>
            <ion-content >
                <h2 ng-click="show()">Action Sheet</h2>
            </ion-content>
        </ion-pane>
    </body>
</html>
HTML