mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
161 lines
7.4 KiB
HTML
161 lines
7.4 KiB
HTML
<!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>
|