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(视频与PPT)
Dec 27 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
原生js实现轮播图特效
May 04 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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 文件上传模型,支持多文件上传
2009/08/13 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
详解vue高级特性
2020/06/09 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python常用算法学习基础教程
2017/04/13 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Flask框架配置与调试操作示例
2018/07/23 Python
Python pymongo模块常用操作分析
2018/09/01 Python
vscode调试django项目的方法
2020/08/06 Python
营业员个人总结的自我评价
2013/10/25 职场文书
应聘会计求职信
2014/06/11 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
高中物理教学反思
2016/02/19 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js