2、弹出窗口 Alert
1、只是弹出框
/* --- page1.html ---*/ <ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar> <ion-content padding class="page1">
<h2>Welcome to Ionic!</h2> <button (click) = "doAlert()">点击弹出窗口</button> </ion-content> /* --- page1.html ---*/
以下代码都用 page1.html
/* --- page1.js ---*/ import { Page, Alert, NavController } from 'ionic-angular'; @Page({
templateUrl: 'build/pages/page1/page1.html'
}) export class Page1 {
static get parameters() {
return [[NavController]];
} constructor(nav) {
this.nav = nav
} doAlert() { let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['OK']
}); this.nav.present(alert); } } /* --- page1.js ---*/
那么这样做的话应该只是 显示了一个展示效果。 如果我想在这个弹出框内 输入信息呢?可以这样做。
2、带有input的弹出框
/* --- page1.js ---*/ import { Page, Alert, NavController } from 'ionic-angular'; @Page({
templateUrl: 'build/pages/page1/page1.html'
}) export class Page1 {
static get parameters() {
return [[NavController]];
} constructor(nav) {
this.nav = nav
} doAlert() { let prompt = Alert.create({
title: 'Login',
message: "Enter a name for this new album you're so keen on adding",
inputs: [
{
name: 'userName',
placeholder: 'userName'
},
{
name: 'passWord',
placeholder: 'passWord'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'login',
handler: data => {
console.log('login in');
console.log(data)
}
}
]
}); this.nav.present(prompt); } } /* --- page1.js ---*/


/* --- page1.js ---*/ export class Page1 {
static get parameters() {
return [[NavController]];
} constructor(nav) {
this.nav = nav
} doAlert() { let confirm = Alert.create({
title: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
}); this.nav.present(confirm); } } /* --- page1.js ---*/
其实看完 1小节的时候 发现ok并没有方法 只能起到一个提示作用,但是在看完2小节的时候button是可以传一个数组的。。所以3小节的代码基本上都可以看的懂。
4、对象形式的弹出框。
以上方式都可以对一些 input 进行操作 。那么问题来了。当我有 radio 这种属性的时候 该怎么解决呢?对象形式满足你。
/* --- page1.js ---*/ import { Page, Alert, NavController } from 'ionic-angular'; @Page({
templateUrl: 'build/pages/page1/page1.html'
}) export class Page1 {
static get parameters() {
return [[NavController]];
} constructor(nav) {
this.nav = nav
} doAlert() { let alert = Alert.create();
alert.setTitle('Lightsaber color'); alert.addInput({
type: 'radio',
label: 'Blue',
value: 'blue',
checked: true
}); alert.addButton('Cancel');
alert.addButton({
text: 'OK',
handler: data => {
this.testRadioOpen = false;
this.testRadioResult = data;
}
}); this.nav.present(alert); } } /* --- page1.js ---*/
当然 还有 checkbox
/* --- page1.js ---*/ import { Page, Alert, NavController } from 'ionic-angular'; @Page({
templateUrl: 'build/pages/page1/page1.html'
}) export class Page1 {
static get parameters() {
return [[NavController]];
} constructor(nav) {
this.nav = nav
} doAlert() { let alert = Alert.create();
alert.setTitle('Which planets have you visited?'); alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
}); alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
}); alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: data => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
}); this.nav.present(alert); } } /* --- page1.js ---*/
2、弹出窗口 Alert的更多相关文章
- javascript 中的console.log和弹出窗口alert
主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...
- ExtJs--02--MessageBox相关弹出窗口alert,prompt,confirm采用
/* Ext.onReady(function(){ Ext.MessageBox.alert("jack","tom"); Ext.MessageBox.al ...
- selenium自动化测试入门 Alert/Confirm/Prompt 弹出窗口处理
一.Alert/Confirm/Prompt弹出窗口特征说明 Alert弹出窗口: 提示用户信息只有确认按钮,无法通过页面元素定位,不关闭窗口无法在页面上做其他操作. Confirm 弹出窗口: 有确 ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- jquery-通过js编写弹出窗口
本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- js弹出窗口总结6种弹窗方法
注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close(); ...
- window.open()弹出窗口防止被禁
window.open(),顾名思义,是指在当前浏览器窗口弹出另一个浏览器窗口. 因为多种原因,浏览对window.open弹出的窗口做了多方限制.限制不同,肯定会造成各浏览器弹出窗口的差异. 大部分 ...
- 深入浅出ExtJS 第七章 弹出窗口
7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...
- fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件
当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...
随机推荐
- 手动创建spring项目(maven/IDEA环境)
1.创建maven项目 按照步骤一步一步来 创建项目 这里选择maven的模板 设置包名 设置项目的maven的配置信息.maven仓库路径(会从maven配置文件中获取) 这里设置项目名.项目保存路 ...
- 【bzoj4832】[Lydsy1704月赛]抵制克苏恩 期望dp
Description 小Q同学现在沉迷炉石传说不能自拔.他发现一张名为克苏恩的牌很不公平.如果你不玩炉石传说,不必担心,小Q 同学会告诉你所有相关的细节.炉石传说是这样的一个游戏,每个玩家拥有一个 ...
- arx创建作用域(于)当前文档全局变量
普通的全局变量是作用于整个AutoCAD程序中,所有的文档都将能存取,某些时候,我们需要某一个全局变量仅仅在当前文档有效,便于程序之间通信或者变量值记忆. 在高版本的objectARX向导中,已经为我 ...
- P4854 MloVtry的咸鱼树 状压+最短路
$ \color{#0066ff}{ 题目描述 }$ 俗话说种瓜得瓜,种豆得豆,MloVtry把自己砍掉一半埋进了土里,于是它得到了一颗n个点的咸鱼树. 但是问题是由于MloVtry只舍得埋下一半的自 ...
- 【离散数学】 SDUT OJ 建图
建图 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 编程使得程序可以接受一个图的点边 ...
- swoole安装报错详解 mysqlnd_find_charset_nr in Unknow
今天安装 swoole扩展时候,最后一步报错如下: PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/m ...
- 洛谷 P1149 火柴棒等式
嗯.... 这道题好讨厌啊!!!! 一开始莫名RE,然后发现数组小了,然后发现后面几个点总是WA,原来推的少了.... 并且这道题的思路真的好水啊!! 先看一下题: 题目描述 给你n根 ...
- 【Leedcode】Insertion Sort List
Sort a linked list using insertion sort. /** * Definition for singly-linked list. * struct ListNode ...
- npm 安装 sass=-=-=
先按照 cnpm .....因为外网安不上... cnpm install node-sass --save-dev cnpm install sass-loader --save-dev
- Mutation and Iteration
avoid mutating a list as you are iterating over it 代码: def remove_dups(L1,L2): for e in L1: if e in ...