1. 程式人生 > >ionic ActionSheet(上拉選單)

ionic ActionSheet(上拉選單)

1、$ionicActionSheet
   ionic的上拉選單由三種按鈕組成,點選任何按鈕都自動關閉上拉選單;

   取消按鈕 - 取消按鈕總是位於選單的底部,使用者點選該按鈕將關閉。一個上拉選單 最多有一個取消按鈕。
   危險選項按鈕 - 危險選項按鈕文字被標紅以明顯提示。一個上拉選單最多有一個 危險選項按鈕。
   自定義按鈕 - 使用者定義的任意數量的按鈕。

2、引數
   titleText - 上拉選單的標題文字
   buttons - 自定義按鈕陣列。每個按鈕需要一個描述物件,其text欄位用於按鈕顯示
   cancelText - 取消按鈕的文字。如果不設定此欄位,則上拉選單中不出現取消按鈕
   destructiveText - 危險選項按鈕的文字。如果不設定此欄位,則上拉選單中不出現危險選項按鈕
   buttonClicked - 自定義按鈕的回撥函式,當用戶點選時觸發
   cancel - 取消按鈕回撥函式,當用戶點選時觸發
   destructiveButtonClicked - 危險選項按鈕的回撥函式,當用戶點選時觸發
   cancelOnStateChange - 當切換到新的檢視時是否關閉此上拉選單。預設為true
   cssClass - 附加的CSS樣式類名稱

1、Html

<ion-header-bar class="bar bar-header bar-light bar-calm">
    <button class="button button-icon icon ion-navicon"></button>
    <ion-title class="bar-calm">騰訊新聞</ion-title>
</ion-header-bar>

<ion-content>
    <button class="button button-dark" ng-click="show()">show</button>
</ion-content>

2、Controllerl

appCntrollers.controller('ManageActionSheetCtrl', function ($scope, $timeout, $ionicActionSheet) {
    // 點選按鈕觸發,或一些其他的觸發條件
    $scope.show = function () {
        // 顯示操作表
        $ionicActionSheet.show({
            titleText: '修改你的專輯',
            destructiveText: '刪除',
            cancelText: '取消',
            buttons: [
                { text: '<b>分享</b> 快樂' },
                { text: '拍攝照片' },
                { text: '相簿選擇' },
            ],
            cancel: function () {
                alert('取消事件!');
            },
            destructiveButtonClicked: function () {
                alert('刪除事件!');
                return true;
            },
            buttonClicked: function (index) {
                switch (index) {
                    case 0:
                        //appendByCamera();
                        alert('分享快樂');
                        break;
                    case 1:
                        alert('拍攝照片');
                        break;
                    case 2:
                        alert('相簿選擇');
                        break;
                    default:
                        break;
                }
                return true;
            }
        });
    };
})

3、效果圖