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 ---*/
看  紫色部分的 代碼意思 就是創建了兩個 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 ---*/

這種對象模式 知道就好了。基本用戶需要這種復雜的操作的時候 就直接跳轉頁面寫樣式就好了 不然的話樣式會很死板。
彈出框我建議最好做一些 提示會比較好。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM