首页手记 ionic上拉菜单解析（学习笔记）

ionic上拉菜单解析（学习笔记）

标签：

AngularJS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
    <link rel="stylesheet" href="../framework/ionic/css/ionic.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../framework/ionic/js/ionic.bundle.js"></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>

    <script>
        angular.module('starter',['ionic'])
                .run(function ($ionicPlatform) {
                    $ionicPlatform.ready(function () {
                        if(window.cordova && window.cordova.plugins.Keyboard){
                            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                        }
                        if(window.StartusBar){
                            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',  //destructive破坏性的        样式:文字颜色为红色
                            titleText:'Modify your album',      ///将会位于上拉菜单的头部位置
                            cancelText:'Cancel',//位于上拉菜单的尾部，且与主体之间存在间隙
                            cancel:function () {
                                //add cancel code
                                //这里是上拉菜单收回会将要执行的代码
                            },
                            buttonClicked:function (index) {
                                alert('你点击了第'+index+'个按钮')
                                //index下标从0开始
                                //这里的代码是点击button后将要执行的代码，button为上面定义的数组
                                return true;
                            }
                        });
                        $timeout(function () {
                            alert('再见')
                            //这里为设置的显示时长
                            hideSheet();
                        },2000);
                    };

                }])

    </script>
</html>

点击查看更多内容