forked from ionic-team/ionic-framework
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
160 lines (151 loc) · 7.41 KB
/
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Popups</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="PopupCtrl">
<ion-content>
<button class="button button-dark" ng-click="showPopup()">Generic</button>
<button class="button button-primary" ng-click="showConfirm()">Confirm</button>
<button class="button button-balanced" ng-click="showPrompt()">Prompt</button>
<button class="button button-balanced" ng-click="showPasswordPrompt()">Password Prompt</button>
<button class="button button-positive" ng-click="showAlert()">Alert</button>
<button class="button button-positive" ng-click="showTallAlert()">Tall Alert</button>
<div class="list">
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
<a class="item" href="#">Item</a>
</div>
</ion-content>
<script id="popup-template.html" type="text/ng-template">
<input ng-model="data.wifi" type="text" placeholder="Password">
</script>
<script>
angular.module('ionic.example', ['ionic'])
.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) {
$scope.showPopup = function() {
$scope.data = {}
$ionicPopup.show({
templateUrl: 'popup-template.html',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel', onTap: function(e) { return true; } },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
return $scope.data.wifi;
}
},
]
}).then(function(res) {
console.log('Tapped!', res);
}, function(err) {
console.log('Err:', err);
}, function(msg) {
console.log('message:', msg);
});
$timeout(function() {
$ionicPopup.confirm({
title: 'Do you like ice cream?',
cancelText: 'No',
okText: 'Yes, of course'
}).then(function(res) {
console.log('Your love for ice cream:', res);
});
}, 1000);
};
$scope.showConfirm = function() {
$ionicPopup.confirm({
title: 'Consume Ice Cream',
content: 'Are you sure you want to eat this ice cream?'
}).then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
$scope.showPrompt = function() {
$ionicPopup.prompt({
title: 'ID Check',
subTitle: 'What is your name?'
}).then(function(res) {
console.log('Your name is', res);
});
};
$scope.showPasswordPrompt = function() {
$ionicPopup.prompt({
title: 'Password Check',
subTitle: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password'
}).then(function(res) {
console.log('Your name is', res);
});
};
$scope.showAlert = function() {
$ionicPopup.alert({
title: 'Draft Saved',
content: 'Your Data has been saved!'
}).then(function(res) {
console.log('Your Data has been saved!');
}, function(err) {},
function(popup) {
console.log('Got popup', popup);
$timeout(function() {
popup.close();
}, 1000);
});
};
$scope.showTallAlert = function() {
$ionicPopup.alert({
title: 'Tall Alert',
content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
}).then(function(res) {
console.log('Closed');
});
};
});
</script>
</body>
</html>