ionic学习笔记1

来源：互联网发布：mac 拷贝隐藏文件编辑：程序博客网时间：2024/06/05 11:51

$ionicActionSheet

ionic 上拉菜单(ActionSheet)

上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。

非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。

<html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <title>Action Sheet</title>    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">    <script src="http://www.runoob.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>分享</b>' },                                { text: 'Move' }                            ],                            destructiveText: '删除',                            titleText: '您确定要分享这份代码?',                            cancelText: '取消',                            cancel: function() {                               // alert('cancel!');//点击取消时候触发                            },                            buttonClicked: function(index) {                                //alert('index is:'+index);                                return true;//返回true:点击关闭,false:不关闭                            },                            destructiveButtonClicked:function(){                                return true;//返回true:点击关闭,false:不关闭                            },                            cancelOnStateChange : true                            //是否取消actionsheet当导航到一个新的视图状态时候,默认为true。                        });                    };                }])    </script></head><body ng-app="starter" ng-controller="actionsheetCtl" style="text-align: center;"><ion-pane>    <ion-content >        <button ng-click="show()" style="text-align: center;background-color: aliceblue;">Action Sheet</button>    </ion-content></ion-pane></body></html>

1 0