ionic-Javascript:ionic 上拉菜单(ActionSheet)
2024-10-07 18:31:20
ylbtech-ionic-Javascript:ionic 上拉菜单(ActionSheet) |
1.返回顶部 |
1、
ionic 上拉菜单(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); };
}])
运行效果如下图:
2、
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
1、
2、
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
最新文章
- 算法与数据结构(九) 查找表的顺序查找、折半查找、插值查找以及Fibonacci查找
- c 高级函数的简单用法
- React.js入门笔记(再续):评论框的实现
- 清华学堂 Range
- CentOS 访问Windows7共享文件夹
- hibernate-criteria查询
- 字节流和字符流(InputStream类和OutputStream类)
- python __setattr__, __getattr__, __delattr__, __call__
- hdu 4539(状态压缩dp)
- 为什么没有好用的Android游戏引擎?
- Vijos 1100 加分二叉树
- IIS 和 各个协议
- (转)Java ConcurrentModificationException异常原因和解决方法
- 两年JAVA程序员的面试总结
- php中获取用户登陆的IP地址以及常规处理
- linux gdb
- Ubuntu 16下单机安装配置zookeeper和kafka
- iOS的非常全的三方库,插件,大牛博客
- HTML+CSS:圆形和圆角图片格式
- 使用.pth文件扩展python环境路径
热门文章
- Android中如何搭建一个WebServer
- 思维构造+匹配——cf1199E
- Service4
- NX二次开发-Block UI C++界面Body Collector(体收集器)控件的获取(持续补充)
- linux浏览器,邮件客户端,输入法,双屏设置,应用软件,gnome-screenshot/scrot -s截图,office
- 浅谈学习selenium的一些知识点的总结
- DQL 数据查询语言 IS (information_schema)
- PHP对象在内存中的分配(转载)
- Django(九) xadmin全局配置
- 解析TextView中的URL等指定特殊字符串与点击事件