IONIC----01.ionicActionSheet

最新推荐文章于 2021-06-10 04:23:20 发布

damys

最新推荐文章于 2021-06-10 04:23:20 发布

阅读量842

点赞数

分类专栏： Ionic 文章标签： ionic sheet ActionShee

本文链接：https://blog.csdn.net/damys/article/details/51859591

版权

Ionic 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp" ng-controller="fristController">
    <ion-header-bar class="bar-positive">
        <h1 class="title">$ionicActionSheet</h1>
        <a class="button" ng-click="show();">操作</a>
    </ion-header-bar>
    <ion-content padding="true">
        AAA<br>BBB<br>CCC
    </ion-content>

</body>
</html>
<script>
angular.module("myApp", ["ionic"])
.controller("fristController",function($scope, $ionicActionSheet, $timeout) {

    // Triggered on a button click, or some other target
    $scope.show = function() {

        // Show the action sheet
        var hideSheet= $ionicActionSheet.show({
            cancelOnStateChange:true,
            cssClass:'action_s',
            titleText: "操作当前文章",
            buttons: [
                { text: "<b>分享</b>文章" },
                { text: "移动到..." }
            ],
            buttonClicked: function(index) {
                    console.log('操作了第'+index+'个文章');
                    return true;
            },
            cancelText: "取消",
            cancel: function() {
              // add cancel code..

                console.log('执行了取消操作');
                return true;
            },
            destructiveText: "删除",
            destructiveButtonClicked:function(){
                console.log('执行了删除操作');
                return true;

            }
        });
        // For example's sake, hide the sheet after two seconds
        $timeout(function() {
            hideSheet();
        }, 2000);

    };
});
</script>