ionic-popup(alert/prompt/confirm定制各种弹出框)

ionic-popup(alert/prompt/confirm定制各种弹出框)

       Ionic弹窗服务允许程序创建、显示弹出窗口，需要用户继续响应。 弹窗系统支持更多灵活的构建 alert() ， prompt() 和 confirm() 功能版本，以及用户习惯， 除了允许查看完全自定义内容的的弹窗。

示例代码：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
 6     <link rel="stylesheet" href="css/ionic.css"/>
 7     <script src="js/ionic.bundle.js"></script>
 8     <title></title>
 9 </head>
10 <body ng-controller="myCtr">
11     <ion-header-bar>
12         <h1 class="title">Header</h1>
13         <button class="button icon ion-refresh" ng-click="showLoding()">刷新</button>
14     </ion-header-bar>
15     <ion-content>
16         <p>Hello</p>
17         <button class="button button-assertive" ng-click="showAlert()">警告弹窗</button>
18         <button class="button button-positive" ng-click="showConfirm()">确认弹窗</button>
19         <button class="button button-royal" ng-click="showPrompt()">输入提示弹窗</button>
20     </ion-content>
21     <ion-footer-bar>
22         <h1 class="title">Footer</h1>
23     </ion-footer-bar>
24 <script>
25     var app = angular.module('myApp', ['ionic']);
26     app.controller('myCtr',[
27         '$scope',
28         '$ionicPopup',
29         '$ionicLoading',
30         '$timeout'
31         ,function($scope,$ionicPopup,$ionicLoading,$timeout){
32         $scope.showLoding = function(){
33             $ionicLoading.show({
34                 template:'正在加载...'
35             });
36             $timeout(function(){
37                 $scope.hideLoading();
38             },2000)
39         }
40         $scope.hideLoading = function(){
41             $ionicLoading.hide();
42         }
43 
44             $scope.showAlert = function(){
45             $ionicPopup.alert({
46                 title:'Donnot touch',
47                 template:'食物有毒'
48             });
49         }
50         $scope.showConfirm = function(){
51             $ionicPopup.confirm({
52                 title:'确认',
53                 template:'确定要这样操作码？'
54             })
55              .then(function(result){
56                         console.log(result);
57                     })
58         }
59         $scope.showPrompt = function(){
60             $ionicPopup.prompt({
61                 title:'标题',
62                 template:'请输入金额'
63             }).then(function(result){
64                 console.log(result);
65             })
66         }
67     }]);
68 </script>
69 </body>
70 </html>

效果图如下：

1、alert

2、confirm

3、prompt

posted @ 2017-01-09 18:45  时间脱臼  阅读(2223)  评论(0)    收藏  举报