ionic ActionSheet(上拉菜单)

1、$ionicActionSheet
   ionic的上拉菜单由三种按钮组成,点击任何按钮都自动关闭上拉菜单;

   取消按钮 - 取消按钮总是位于菜单的底部,用户点击该按钮将关闭。一个上拉菜单 最多有一个取消按钮。
   危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险选项按钮。
   自定义按钮 - 用户定义的任意数量的按钮。

2、参数
   titleText - 上拉菜单的标题文本
   buttons - 自定义按钮数组。每个按钮需要一个描述对象,其text字段用于按钮显示
   cancelText - 取消按钮的文本。如果不设置此字段,则上拉菜单中不出现取消按钮
   destructiveText - 危险选项按钮的文本。如果不设置此字段,则上拉菜单中不出现危险选项按钮
   buttonClicked - 自定义按钮的回调函数,当用户点击时触发
   cancel - 取消按钮回调函数,当用户点击时触发
   destructiveButtonClicked - 危险选项按钮的回调函数,当用户点击时触发
   cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
   cssClass - 附加的CSS样式类名称

1、Html

[html]  view plain  copy
  1. <ion-header-bar class="bar bar-header bar-light bar-calm">  
  2.     <button class="button button-icon icon ion-navicon"></button>  
  3.     <ion-title class="bar-calm">腾讯新闻</ion-title>  
  4. </ion-header-bar>  
  5.   
  6. <ion-content>  
  7.     <button class="button button-dark" ng-click="show()">show</button>  
  8. </ion-content>  

2、Controllerl

[javascript]  view plain  copy
  1. appCntrollers.controller('ManageActionSheetCtrl'function ($scope, $timeout, $ionicActionSheet) {  
  2.     // 点击按钮触发,或一些其他的触发条件  
  3.     $scope.show = function () {  
  4.         // 显示操作表  
  5.         $ionicActionSheet.show({  
  6.             titleText: '修改你的专辑',  
  7.             destructiveText: '删除',  
  8.             cancelText: '取消',  
  9.             buttons: [  
  10.                 { text: '<b>分享</b> 快乐' },  
  11.                 { text: '拍摄照片' },  
  12.                 { text: '相册选择' },  
  13.             ],  
  14.             cancel: function () {  
  15.                 alert('取消事件!');  
  16.             },  
  17.             destructiveButtonClicked: function () {  
  18.                 alert('删除事件!');  
  19.                 return true;  
  20.             },  
  21.             buttonClicked: function (index) {  
  22.                 switch (index) {  
  23.                     case 0:  
  24.                         //appendByCamera();  
  25.                         alert('分享快乐');  
  26.                         break;  
  27.                     case 1:  
  28.                         alert('拍摄照片');  
  29.                         break;  
  30.                     case 2:  
  31.                         alert('相册选择');  
  32.                         break;  
  33.                     default:  
  34.                         break;  
  35.                 }  
  36.                 return true;  
  37.             }  
  38.         });  
  39.     };  
  40. })  

3、效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值