ionic 上拉菜单(ActionSheet)实例代码
更新时间：2016年06月06日 16:05:21 作者：yongbin668
ionic js 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项；点击取消按钮或者点击空白的地方来让它消失。本文给大家分享实现代码，感兴趣的朋友一起看看吧
上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。
非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。
实例
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);
};
}])
运行效果如下图：
完整源码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://cdn.bootcss.com/ionic/1.3.1/css/ionic.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/ionic/1.3.1/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
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);
};
}])
</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>
</html>
以上所述是小编给大家介绍的ionic 上拉菜单(ActionSheet)实例代码的相关知识，希望对大家有所帮助！
相关文章
这篇文章主要介绍了js简单时间比较的方法,通过2个自定义函数实现针对时间与日期的比较功能,涉及javascript日期及时间换算与比较操作相关技巧,需要的朋友可以参考下2016-08-08
作为前端开发,JS是重中之重,下面这篇文章主要给大家介绍了关于JavaScript常见手写题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
最近遇到一个h5手写签名的需求,按理说这种功能网上随便一搜一大把现成的源码和组件,但是像这种比较经典又很简单的功能,还是要弄清楚到底怎么实现的,所以接下来本文就给大家介绍一下如何用canvas实现手写签名功能2023-08-08
这篇文章主要为大家详细介绍了JavaScript内存泄漏的编程模式,并提供一些内存管理的改进方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-10-10
这篇文章主要介绍了js图片轮播效果实现代码，文章对每一步进行了详细阐述，标注注意事项，为顺利实现js图片轮播效果做好铺垫，对轮播效果感兴趣的朋友可以参考一下2015-11-11
这篇文章主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
用javascript 控制表格行的展开和隐藏的代码...2007-08-08
JavaScript与函数式编程解释...2007-04-04
如何利用网页弹出各种形式的窗口，我想大家大多都是知道些的，但那种多种多样的弹出式窗口是怎么搞出来的，平时利用业余时间整理了一些，需要的朋友可以参考一下2012-12-12
表格隔行换色升级版,直接用javascript实现。2009-11-11
最新评论