Ionic 弹出窗
2024-09-26 18:55:48
Ionic弹窗服务允许程序创建、显示弹出窗口,需要用户继续响应。
弹窗系统支持更多灵活的构建alert()
,prompt()
和confirm()
功能版本,以及用户习惯,除了允许查看完全自定义内容的的弹窗。
angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicPopup, $timeout) { // 触发一个按钮点击,或一些其他目标
$scope.showPopup = function() {
$scope.data = {} // 一个精心制作的自定义弹窗
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//不允许用户关闭,除非他键入wifi密码
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); //由于某种原因3秒后关闭弹出
}, 3000); // 一个确认对话框
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
}; // 一个提示对话框
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
};
});
原文出处:http://www.ionic.wang/js_doc-index-id-52.html
最新文章
- BZOJ 3238: [Ahoi2013]差异 [后缀数组 单调栈]
- Entity Framework 6 Recipes 2nd Edition(12-1)译 ->; 当SaveChanges( ) 被调用时执行你的代码
- Mysql远程访问
- java 多线程之wait(),notify,notifyAll(),yield()
- 深入了解Struts2返回JSON数据的原理
- Python-day-21
- JavaScript基础——数据类型
- springboot教程
- CSS_复习
- memcached在windows下的安装与命令使用方法
- 关于int **
- IoC/DIP其实是一种管理思想
- eclipse安装svn插件的多种方式
- shell脚本中字符串的常见操作及";command not found";报错处理(附源码)
- LINUX 笔记-wc命令
- 批量ping测试的脚本
- 转载:深入理解Scala的隐式转换系统
- SQL注入之Sqli-labs系列第二十一关(基于复杂性的cookie POST报错注入)和二十二关(基于双引号的cookie POST报错注入)
- 自己开发Visual studio插件-一个nvelocity高亮插件
- Layui:设置select下拉框自动选中某项
热门文章
- Oracle - Unprocessed Material
- 查找mysql数据文件存放路径
- Robot Framework+appium集成安装
- Matlab无法打开M文件的错误( Undefined function or method &#39;uiopen&#39; for input arguments of type &#39;char)
- Bootstrap+MetroNic_1.5.4 Head meta
- sql date 的精度问题
- [LeetCode] 86. Partition List 解题思路
- Yii框架tips(转)
- Install MongoDB on Windows
- IIS- ASP站点布署时查看ASP错误信息