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 ---*/
看
紫色部分的 代碼意思 就是創建了兩個 input 然后 賦予兩個 name 然后在看
深藍部分 的 buttons 中 同樣創建了兩個方法 而input得到的值
紫色部分 的
紅色部分 userName 和 password
傳給了。
深藍部分 的
紅色部分 也就是 buttons 中的 handler 參數的
data 獲取之后 就可以處理他了。效果圖如下。


當我在 輸入內容的時候 點擊 login 時候 看 他會打印出
{userName: "admin", passWord: "admin888"}
3、按鈕的功能
/* --- 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 ---*/
這種對象模式 知道就好了。基本用戶需要這種復雜的操作的時候 就直接跳轉頁面寫樣式就好了 不然的話樣式會很死板。
彈出框我建議最好做一些 提示會比較好。