【2016.09.08】【ionic 对话框】

最新推荐文章于 2024-11-06 17:18:24 发布

chengji4739

最新推荐文章于 2024-11-06 17:18:24 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/YongfengHe/blog/744106

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Todo</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">

  <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="js/app.js"></script>

  <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  <script src="cordova.js"></script>
  <script>
    var app = angular.module("myApp",["ionic"]);
    app.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();
          }
        });
      });

    app.controller('myCtrl01',["$scope","$ionicPopup", function($scope,$ionicPopup) {
      $scope.showPop = function () {

        $scope.data = {wifi:''};

        var myPop = $ionicPopup.show({
          template:'<ion-header-bar class="bar bar-positive"><h1 class="title">ionic 对话框</h1></ion-header-bar><input style="margin-top: 20px;" type="password" placeholder="输入wifi密码" ng-model="data.wifi">',
//          title:'请输入WIFI密码',
//          subTitle:'注意：区分大小写',
          scope: $scope,
          buttons:[
            {text:'取消',type:'button-assertive'},
            {
              text: '<b>保存</b>',
              type: 'button-positive',
              onTap: function(e) {
                if (!$scope.data.wifi) {
                  // 不允许用户关闭，除非输入 wifi 密码
                  e.preventDefault();
                } else {
                  return $scope.data.wifi;
                }
              }
            }
          ]
        });
        myPop.then(function(res) {
          console.log('Tapped!', res);
        });
      };

      //  confirm 对话框
      $scope.showConfirm = function() {
        var confirmPopup = $ionicPopup.confirm({
          title: '这是一个选择框',
          template: '你喜欢吃冰淇淋吗？',
          buttons:[{text:'取消',type:'button-dark',onTap:function (e) {
            return false;
          }},{text:'确认',type:'button-positive',onTap:function (e) {
            return true;
          }}]
        });
        confirmPopup.then(function(res) {
          if(res) {
            console.log(res);
          } else {
            console.log(res);
          }
        });
      };

      //  alert（警告） 对话框
      $scope.showAlert = function() {
        var alertPopup = $ionicPopup.alert({
          template: '<ion-header-bar class="bar bar-assertive">' +
          '<h1 class="title">删除</h1>' +
          '</ion-header-bar><div style="margin-top: 20px;text-align: center;font-size: 18px;">真的要删除吗？</div>',
          buttons:[
            {text:'取消',type:'button-positive',onTap:function (e) {
              return false;
            }},
            {text:'确认',type:'button-assertive',onTap:function (e) {
              return true;
            }}
          ]
        });
        alertPopup.then(function(res) {
          if (res){
            console.log('您点击了确认');
          }else{
            console.log('您点击了取消');
          }
        });
      };
    }]);

  </script>

</head>
<body  ng-controller="myCtrl01">
<ion-header-bar class="bar bar-positive">
  <h1 class="title">ionic 对话框</h1>
</ion-header-bar>
<ion-content class="content has-header padding">
  <button class="button button-dark" ng-click="showPop()">弹框显示</button>
  <button class="button button-positive" ng-click="showConfirm()">确认对话框</button>
  <button class="button button-assertive" ng-click="showAlert()">警告框</button>
</ion-content>
</body>
</html>

转载于:https://my.oschina.net/YongfengHe/blog/744106