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实现a标签超链接提交form表单的方法
Jun 24 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python中类的初始化特殊方法
2017/12/01 Python
python format 格式化输出方法
2018/07/16 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python面向对象进阶学习
2019/05/21 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
教师求职信范文
2014/05/24 职场文书
学生安全责任书范本
2014/07/24 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
新党章心得体会
2014/09/04 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python