ionic 上拉菜单(ActionSheet)实例代码


Posted in Javascript onJune 06, 2016

上拉菜单(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);
}; 
}])

运行效果如下图:

ionic 上拉菜单(ActionSheet)实例代码

完整源码:

<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)实例代码的相关知识,希望对大家有所帮助!

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
Jan 12 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
浅谈react useEffect闭包的坑
Jun 08 Javascript
深入理解JavaScript 函数
Jun 06 #Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 #Javascript
javascript url几种编码方式详解
Jun 06 #Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 #Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 #Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 #Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 #Javascript
You might like
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
试用php中oci8扩展
2015/06/18 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Django如何实现上传图片功能
2019/08/16 Python
Python 列表的清空方式
2020/01/13 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
自我评价怎么写正确呢?
2013/12/02 职场文书
党员自我评价分享
2013/12/13 职场文书
经典演讲稿范文
2013/12/30 职场文书
优秀求职信范文分享
2014/01/26 职场文书
群众路线剖析材料
2014/02/02 职场文书
文化产业实施方案
2014/06/07 职场文书
责任书格式
2019/04/18 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang