See the Pen by Ionic (@ionic) on CodePen.
Сервис Ionic Popup позволяет программным способом создавать и отображатьвсплывающие окна, которые требуют ответа пользователя для продолжения процесса работы.
Система всплывающих окон имеет поддержку более гибких версий встроенных функций alert()
,prompt()
,
и confirm()
, к которым уже привыкли пользователи. Но в добавок с их помощью всплывающие окна
будут иметь полностью настраиваемый контент и внешний вид.
Вводу можно присвоить атрибут autofocus
, тогда поле ввода будет автоматически в фокусе, когда
впервые будет отображаться всплывающее окно. Однако в зависимости от определенных сценариев использования use-cases это может привести к проблемам с
системой tap/click, поэтому Ionic предпочитает использовать атрибут autofocus
в качестве настраиваемой функции, а не предполагающейся сразу по умолчанию.
Применение
Несколько основных примеров, информацию о всех доступных опциях смотрите ниже.
angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
// Triggered on a button click, or some other target
$scope.showPopup = function() {
$scope.data = {};
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-model="data.wifi">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
}
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
$timeout(function() {
myPopup.close(); //close the popup after 3 seconds for some reason
}, 3000);
};
// A confirm dialog
$scope.showConfirm = function() {
var confirmPopup = $ionicPopup.confirm({
title: 'Consume Ice Cream',
template: 'Are you sure you want to eat this ice cream?'
});
confirmPopup.then(function(res) {
if(res) {
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
// An alert dialog
$scope.showAlert = function() {
var alertPopup = $ionicPopup.alert({
title: 'Don\'t eat that!',
template: 'It might taste good'
});
alertPopup.then(function(res) {
console.log('Thank you for not eating my delicious ice cream cone');
});
};
});
Методы
show(options)
Отображает сложное всплывающее окно. Это универсальная функция отображения для всех всплывающих окон.
Сложное всплывающее окно имеет массив кнопок, у каждой кнопки имеется текстовое поле и тип
в дополнение к функции onTap
. Функция onTap
вызывается, когда нажата соответствующая кнопка всплывающего окна. По умолчанию данная функция закроет окно и обещание будет успешно завершено - будет разрешено его значение возврата. Если вы хотите сделать так, чтобы заданное по умолчанию действие не произошло, и после нажатия на кнопку всплывающее окно оставалось открытым, поставьте вызовevent.preventDefault()
, который будет передаваться при наступлении события (касания кнопки). Подробная информация дана ниже.
Параметр |
Тип |
Описание |
options |
объект |
Опции для нового всплывающего окна, в форме: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. scope: null, // Scope (optional). Область видимости, которую нужно связать с контентом всплывающего окна. buttons: [{ // Array[Object] (optional). Кнопки, которые нужно поместить в футер всплывающего окна. text: 'Cancel', type: 'button-default', onTap: function(e) { // e.preventDefault() прекратит процесс закрытия всплывающего окна при касании кнопки. e.preventDefault(); } }, { text: 'OK', type: 'button-positive', onTap: function(e) { // Возвращение значения создаст ситуацию, когда обещание должно будет разрешиться с данным значением. возвращение scope.data.response; } }] } |
- Возвращает:
object
Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную функцию
close
, которая может использоваться для того чтобы программным способом закрыть всплывающее окно.
alert(options)
Отображает простое всплывающее окно с сообщением и одной кнопкой, которую пользователь может
тапнуть, чтобы закрыть окно.
Параметр |
Тип |
Описание |
options |
объект |
Опции для отображения оповещения, в форме: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, Настраиваемое имя класса CSS subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). URL-адрес шаблона HTML, который нужно поместить в тело всплывающего окна. okText: '', // String (default: 'OK'). Текст кнопки "OK". okType: '', // String (default: 'button-positive'). Тип кнопки "OK". } |
- Возвращает:
object
Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функцию close, которая может быть вызвана с помощью любого значения, для того чтобы программным способом закрыть всплывающее окно этим самым значением.
confirm(options)
Отображает простое всплывающее окно подтверждения кнопкой Cancel и OK.
Разрешает обещание при установленном параметре "true", если пользователь нажимает кнопку "OK", и "false", если
пользователь нажимает кнопку "Cancel".
Параметр |
Тип |
Описание |
options |
объект |
Параметры для отображения подтверждающего всплывающего окна, имеющего форму: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, Настраиваемое имя CSS класса subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. cancelText: '', // String (default: 'Cancel'). Текст кнопки "Cancel". cancelType: '', // String (default: 'button-default'). Тип кнопки "Cancel". okText: '', // String (default: 'OK'). Текст кнопки "OK". okType: '', // String (default: 'button-positive'). Тип кнопки "OK". } |
- Возвращает:
object
Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функциюclose
, которая может быть вызвана с помощью любого значения, чтобы программным образом закрыть всплывающее окно этим значением.
prompt(options)
Отображает простое всплывающее окно-подсказку, в котором есть такие элементы, как поле ввода, кнопки OK и Cancel.
Разрешает обещание с помощью значения ввода, если пользователь нажимает "OK", и неопределенным значением (udefined), если пользователь нажимает "Cancel".
$ionicPopup.prompt({
title: 'Password Check',
template: 'Enter your secret password',
inputType: 'password',
inputPlaceholder: 'Your password'
}).then(function(res) {
console.log('Your password is', res);
});
Параметр |
Тип |
Описание |
options |
объект |
Параметры для отображения всплывающего окна-подсказки, имеющего форму: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. inputType: // String (default: 'text'). Тип ввода, который нужно использовать defaultText: // String (default: ''). Исходное значение, помещенное в элемент ввода. maxLength: // Integer (default: null). Определяет атрибут maxlength для ввода. inputPlaceholder: // String (default: ''). Поле для заполнения, которое нужно использовать для ввода. cancelText: // String (default: 'Cancel'. Текст кнопки "Cancel". cancelType: // String (default: 'button-default'). Тип кнопки "Cancel". okText: // String (default: 'OK'). Текст кнопки "OK". okType: // String (default: 'button-positive'). Тип кнопки "OK". } |
- Возвращает:
object
Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функциюclose
, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.