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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
深入理解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
一个取得文件扩展名的函数
2006/10/09 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
jquery密码强度校验
2015/12/02 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
详解vue 组件
2020/06/11 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python爬取音频下载的示例代码
2020/10/19 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
勾股定理课后反思
2014/04/26 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS