Ionic Js一:上拉菜单(ActionSheet)
2016-06-16 16:12
477 查看
上拉菜单(ActionSheet)通过往上弹出的框,来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
HTML 代码
JavaScript 代码
在代码中触发上拉菜单,需要在你的 angular 控制器中使用 $ionicActionSheet 服务:
运行效果如下图:


非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
HTML 代码
<body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <h2 ng-click="show()">Action Sheet</h2> </ion-content> </ion-pane> </body>
JavaScript 代码
在代码中触发上拉菜单,需要在你的 angular 控制器中使用 $ionicActionSheet 服务:
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>Share</b> This' }, { text: 'Move' } ], destructiveText: 'Delete', titleText: 'Modify your album', cancelText: 'Cancel', cancel: function() { // add cancel code.. }, buttonClicked: function(index) { return true; } }); $timeout(function() { hideSheet(); }, 2000); }; }])
运行效果如下图:


相关文章推荐
- js 获取当月第一天和最后一天
- 跨域请求京东接口
- js的touch事件的实际引用
- js window.event对象详尽解析
- webpack.config.js
- form表单加js或ajax验证
- JavaScript ---- About GIT
- golang json数组拼接
- JavaScript学习
- js中的时间与毫秒数互相转换
- 基于JS代码实现实时显示系统时间
- JavaScript代码实现图片循环滚动效果
- 如何取消JS事件的派发——stopPropagation()
- Velocity.js发布:更快的动画切换速度
- json 序列化
- javaScript中的instanceof
- 多点触控插件Hammer.js
- 向服务器发送json数据的方法汇总
- javascript prototype继承对象的属性和方法
- 28、JavaScript中真和假的判定