Расширения AngularJS
Ionic - это и CSS-фреймворк, и Javascript UI-библиотека. Javascript часто требуется для выполнения тех или иных сценариев, хотя компоненты могут быть зачастую использованы без сопровождающего программного кода, а только за счет расширений фреймворка. Такими расширениями являются, например, расширения AngularIonic.
Ionic следует шаблону контроллера (View Controller), популяризированному в других фреймворках, например, Cocoa Touch. В шаблоне View Controller мы рассматриваем разные разделы интерфейса как дочерние представления вида или даже дочерние контроллеры вида, которые содержат другие виды. Затем контроллеры вида "приводят в действие" области просмотра, находящиеся внутри них, чтобы обеспечить взаимодействие и функциональность пользовательского интерфейса. Прекрасным примером может служить Tab Bar View Controller - контроллер вида вкладки в интерфейсе панели вкладок, который обрабатывает тапы по панели вкладок, с помощью которых происходит переключение между панелями, доступными для просмотра.
Ознакомьтесь с предлагаемой нами документацией по API, которая содержит подробную информацию о контроллерах вида и утилитах Javascript, которые имеются в Ionic.
Читать далееAction Sheet
Action Sheet, или список действий - это выдвигающаяся панель, которая позволяет пользователю выбирать нужное действие из предлагаемого набора опций.
Опасные опции подсвечиваются красным цветом, их сразу очень хорошо видно.
Убрать с экрана список действий очень легко, можно коснуться фоновой области за пределами списка или, например, нажать кнопку "escape" на клавиатуре с рабочего стола.
Применение
Чтобы список действий Action Sheet работал в вашем коде, воспользуйтесь сервисом $ionicActionSheet и контроллерами Angular.
angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {
// Triggered on a button click, or some other target
$scope.show = function() {
// Show the action sheet
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<b>Share</b> This' },
{ text: 'Move' }
],
destructiveText: 'Delete',
titleText: 'Modify your album',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
buttonClicked: function(index) {
return true;
}
});
// For example's sake, hide the sheet after two seconds
$timeout(function() {
hideSheet();
}, 2000);
};
});
Методы
show(options)
Загрузка и возврат нового списка действий.
Будет создана новая область действия идентификатора для
списка действий, и новый элемент добавится в тело.
Параметр |
Тип |
Описание |
опции |
|
Опции для этого Action Sheet. Свойства:
|
- Возвращает:
functionhideSheet
Функция, которая при вызове скрывает или отменяет список действий.
$ionicBackdrop
Отображает и прячет фоновую область поверх UI. Появляется позади всплывающих окон, индикаторов загрузки и других оверлеев (overlays).
Очень часто многие компоненты UI требуют наличия фоновой области, но за один раз в DOM бывает нужна только одна фоновая область.
Поэтому каждый компонент, требующий отображения фоновой области, вызывает
$ionicBackdrop.retain()
, когда ему нужен фон, затем $ionicBackdrop.release(),
когда фон становится не нужен.
Каждый раз, когда вызывается retain
, фоновая область будет отображаться до тех пор, пока не будет вызван release
.
Например, если retain
вызывается три раза, фон будет отображаться, пока так же три раза не будет вызван release
.
Примечание:
Сервис фона домашнего экрана будет распространять события backdrop.shown’ и ‘backdrop.hidden’ из корневой области видимости (root scope),
это удобно для оповещения нативных компонентов, содержащихся не в HTML.
Применение
function MyController($scope, $ionicBackdrop, $timeout, $rootScope) {
//Show a backdrop for one second
$scope.action = function() {
$ionicBackdrop.retain();
$timeout(function() {
$ionicBackdrop.release();
}, 1000);
};
// Execute action on backdrop disappearing
$scope.$on('backdrop.hidden', function() {
// Execute action
});
// Execute action on backdrop appearing
$scope.$on('backdrop.shown', function() {
// Execute action
});
}
Methods
retain()
Retains the backdrop.
release()
Releases the backdrop.
Читать далееКонтент
Читать далееion-content
Delegate: $ionicScrollDelegate
Директива ionContent предоставляет легкую в использовании область контента, которую можно настраивать, для того чтобы задействовать, имеющийся в Ionic пользовательский просмотр в режиме прокрутки (Scroll View) или встроенную в браузер функцию добавления полосы прокрутки при переполнении блока.
Мы все-таки рекомендуем в большинстве случаев использовать настраиваемые Scroll-функции, имеющиеся в Ionic, но иногда (по соображениям улучшения производительности) будет уместно применить нативный для браузера скроллинг при переполнении блоков. Мы сделали так, что переключаться между функцией прокрутки в Ionic и прокруткой при переполнении стало очень легко.
Вы можете обновлять данные, выполняя pull-to-refresh ("потяни, чтобы обновить") с помощью директивы ionRefresher
, а бесконечную прокрутку с помощью директивы ionInfiniteScroll
.
Если внутри ion-content есть какой-либо динамический контент, не забудьте после добавления контента сделать вызов функции .resize()
с помощью $ionicScrollDelegate
.
Имейте в виду, что эта директива получает собственную дочернюю область видимости. Если вы не понимаете, почему это важно, вы можете прочитать информацию, открыв ссылку https://docs.angularjs.org/guide/scope.
Применение
<ion-content
[delegate-handle=""]
[direction=""]
[locking=""]
[padding=""]
[scroll=""]
[overflow-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[start-x=""]
[start-y=""]
[on-scroll=""]
[on-scroll-complete=""]
[has-bouncing=""]
[scroll-event-interval=""]>
...
</ion-content>
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
|
Дескриптор handle использовался для идентификации данного ScrollView с помощью директивы |
direction (необязательный) |
|
Определяет, каким образом делать прокрутку: 'x', или 'y', или 'xy'. По умолчанию задан параметр 'y'. |
locking (необязательный) |
|
Определяет, нужно ли блокировать скроллинг в одном из направлений за один прием. Будет удобно установить значение "false" при раскрытии или прокрутке в двух направлениях. По умолчанию используется "true". |
padding (необязательный) |
|
Определяет, нужно ли добавлять заполнение к контенту. По умолчанию используется "true" в iOS, "false" в Android. |
scroll (необязательный) |
|
Определяет, нужно ли разрешать прокрутку контента. По умолчанию используется "true". |
overflow-scroll (необязательный) |
|
Определяет, нужно ли использовать прокрутку при переполнении блока вместо прокрутки Ionic. См. |
scrollbar-x (необязательный) |
|
Определяет, нужно ли отображать горизонтальную полосу прокрутки. По умолчанию используется "true". |
scrollbar-y (необязательный) |
|
Определяет, нужно ли отображать вертикальную полосу прокрутки. По умолчанию используется "true". |
start-x (необязательный) |
|
Исходное горизонтальное положение полосы прокрутки. По умолчанию 0. |
start-y (необязательный) |
|
Исходное вертикальное положение полосы прокрутки. По умолчанию 0. |
on-scroll (необязательный) |
|
Выражение для определения момента, когда контент прокручивается. |
on-scroll-complete (необязательный) |
|
Выражение для определения момента, когда прокрутка выполнена. Имеет доступ к областям прокрутки 'scrollLeft' и 'scrollTop'. |
has-bouncing (необязательный) |
|
Определяет, разрешать ли прокрутку, если выйти за края контента. По умолчанию "true" в iOS, "false" в Android. |
scroll-event-interval (необязательный) |
|
Задает количество миллисекунд между каждым запуском выражения 'on-scroll'. По умолчанию стоит значение 10. |
Читать далее
ion-refresher
Дочерний элемент ionContent
или ionScroll
Разрешает вам добавить функцию обновления данных pull-to-refresh к ScrollView.
Поместите его, как первый дочерний элемент от вашего элемента ionContent
или
ionScroll
.
Когда обновление данных завершено, идет распространение события ‘scroll.refreshComplete’ из вашего контроллера.
Применение
<ion-content ng-controller="MyController">
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="item in items"></ion-item>
</ion-list>
</ion-content>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
$scope.items = [1,2,3];
$scope.doRefresh = function() {
$http.get('/new-items')
.success(function(newItems) {
$scope.items = newItems;
})
.finally(function() {
// Stop the ion-refresher from spinning
$scope.$broadcast('scroll.refreshComplete');
});
};
});
ion-pane
Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".
Применение
<ion-pane>
...
</ion-pane>
Инпуты
Читать далееion-checkbox
Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".
Применение
<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>
See the Pen Checkbox: Nightly by Ionic (@ionic) on CodePen.
ion-radio
Радио-директива не отличается от такого элемента ввода, как радио-кнопки в HTML, только она по-другому стилизована.
Радио ведет себя, как и AngularJS радио.
Применение
<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>
See the Pen Radio Buttons: Nightly by Ionic (@ionic) on CodePen.
ion-toggle
Toggle - это анимированный переключатель, который привязывает данную модель к логическому значению.
Позволяет ставить переключатель в одно из двух положений - включено или выключено.
Чекбокс ведет себя так же, как любой чекбокс AngularJS.
Применение
Ниже дан пример директивы для элемента toggle, который привязан к модели airplaneMode
и имеет CSS-класс toggle-calm
, назначенный для внутреннего элемента.
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
See the Pen Toggle: Nightly by Ionic (@ionic) on CodePen.
Жесты и события
Читать далееon-hold
Касание, производимое в одном и том же месте экрана, длится 500 мс. Точно такие же события с длительным касанием имеются в AngularJS и jQuery.
Применение
<button on-hold="onHold()" class="button">Test</button>
on-tap
Быстрое касание экрана. Если продолжительность касания составляет более 250 мс, это уже нельзя назвать тапом.
Применение
<button on-tap="onTap()" class="button">Test</button>
on-double-tap
Двойной тап по экрану.
Применение
<button on-double-tap="onDoubleTap()" class="button">Test</button>
on-touch
Вызывается немедленно, когда пользователь в первый раз касается экрана. Этот жест не ждет наступления события touchend/mouseup.
Применение
<button on-touch="onTouch()" class="button">Test</button>
on-release
Вызывается, когда пользователь завершает прикосновение.
Применение
<button on-release="onRelease()" class="button">Test</button>
on-drag
Перемещение одним касанием в пределах данной страницы. Рекомендуется блокирование прокрутки при движении влево и вправо. Когда все события перетаскивания блокируют действия, вы отключаете прокрутку этой области.
Применение
<button on-drag="onDrag()" class="button">Test</button>
on-drag-up
Вызывается, когда элемент перетаскивается вверх.
Применение
<button on-drag-up="onDragUp()" class="button">Test</button>
on-drag-right
Вызывается, когда элемент перетаскивается вправо.
Usage
<button on-drag-right="onDragRight()" class="button">Test</button>
on-drag-down
Вызывается, когда элемент перетаскивается вниз.
Usage
<button on-drag-down="onDragDown()" class="button">Test</button>
on-drag-left
Вызывается, когда элемент перетаскивается влево.
Usage
<button on-drag-left="onDragLeft()" class="button">Test</button>
on-swipe
Вызывается, когда свайп выполняется на высокой скорости в любом направлении.
Usage
<button on-swipe="onSwipe()" class="button">Test</button>
on-swipe-up
Вызывается, когда свайп выполняется на высокой скорости в направлении вверх.
Usage
<button on-swipe-up="onSwipeUp()" class="button">Test</button>
on-swipe-right
Вызывается, когда свайп выполняется на высокой скорости в направлении вправо.
Применение
<button on-swipe-right="onSwipeRight()" class="button">Test</button>
on-swipe-down
Вызывается, когда свайп выполняется на высокой скорости в направлении вниз.
Usage
<button on-swipe-down="onSwipeDown()" class="button">Test</button>
on-swipe-left
Вызывается, когда свайп выполняется на высокой скорости в направлении влево.
Применение
<button on-swipe-left="onSwipeLeft()" class="button">Test</button>
$ionicGesture
Служба Angular, отвечающая за Ionic-жесты
ionic.EventController
.
Методы
on(eventType, callback, $element, options)
Добавляет элементу слушатель событий для жеста. См.ionic.EventController
.
Параметр |
Тип |
Описание |
eventType |
|
Событие жеста, которое нужно слушать. |
callback |
|
Функция, которая будет вызвана, когда произойдет жест. |
|
элемент |
Элемент, который применяется для слушания события. |
options |
|
объект. |
- Возвращает:
ionic.Gesture
Объект жеста (используйте это, чтобы потом убрать жест).
off(gesture, eventType, callback)
Убирает назначенный для элемента слушатель событий для жеста. См.ionic.EventController
.
Параметр |
Тип |
Описание |
gesture |
|
Жест, который нужно убрать. |
eventType |
|
Событие жеста, для которого нужно убрать слушатель. |
callback |
|
Слушатель, который нужно убрать. |
Читать далее
Хедер/Футер
Читать далееion-header-bar
Добавляет фиксированную строку заголовка над некоторым контентом.
Также может быть подзаголовком (расположенным ниже), если применяется класс ‘bar-subheader’. См. раздел документации the header CSS docs (хедер CSS).
Применение
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
API
Атрибут |
Тип |
Описание |
align-title (необязательный) |
|
Как выровнять заголовок. По умолчанию заголовок будет выровнен точно так же, как платформа выравнивает свои заголовки (в iOS заголовки ставятся по центру, в Android они сдвигаются влево). Доступно: "слева", "справа" или "по центру". По умолчанию выравнивание происходит по тем же принципам, что и для самой платформы. |
no-tap-scroll (необязательный) |
|
По умолчанию при тапе по строке заголовка в шапке контент будет прокручен на начало. Установите параметр no-tap-scroll, чтобы отключить такое поведение. Доступно: true или false. По умолчанию используется false. |
ion-footer-bar
Добавляет фиксированную строку футера под некоторым контентом.
Также может быть строкой с subfooter - располагаться выше футера, если применяется класс ‘bar-subfooter’. См. раздел документации thefooter CSS docs (футер CSS).
Примечание: Если вы используете ionFooterBar в сочетании с ng-if, окружающий контент не будет корректно выровнен. Скоро это будет исправлено.
Применение
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
API
Атрибут |
Тип |
Описание |
align-title (необязательный) |
|
Куда поместить заголовок. Доступно: "слева", "справа" или "по центру". По умолчанию задан параметр "по центру". |
Клавиатура
И в Android, и в iOS Ionic будет пытаться не допустить затемнения элементов ввода и элементов, имеющих фокус, когда производится скроллинг, и они входят в вид представления. Чтобы это работало, любой из элементов, имеющих фокус, должен быть в пределах Scroll View или такой директивы, как Content, которая имеет Scroll View.
Она тоже будет пытаться предотвратить прокрутку при нативном переполнении в отношении фокуса, что может повлечь проблемы с компоновкой, например, заголовки в шапках сдвинутся вверх и за пределы области представления.
Клавиатура лучше всего работает вместе с плагином Ionic Keyboard Plugin,
хотя и без него она тоже будет функционировать достаточно хорошо. Однако, если вы имеете дело с Cordova, нет причины для того, чтобы не воспользоваться данным плагином.
Скрыть, когда отображается клавиатура
Чтобы спрятать элемент, когда открыта клавиатура, добавьте класс hide-on-keyboard-open
.
<div class="hide-on-keyboard-open">
<div id="google-map"></div>
</div>
Примечание: Для улучшения производительности элементы не будут скрыты в течение 400 мс после запуска из плагина Ionic Keyboard plugin события native.keyboardshow
. Если вы хотите, чтобы они тут же исчезли, вы можете сделать что-то вроде:
window.addEventListener('native.keyboardshow', function(){
document.body.classList.add('keyboard-open');
});
Это добавляет тот же самый класс keyboard-open
, который обычно добавляет Ionic через 400 мс после того, как открывается клавиатура. Однако имейте в виду, что добавление этого класса к телу может моментально вызвать замедления анимации на Android. Проблемы с анимацией появляются, когда открывается клавиатура (например, при прокрутке любых затемненных элементов ввода в вид представления).
Использование плагина
Информацию по использованию плагина можно найти по этой ссылке:
https://github.com/driftyco/ionic-plugins-keyboard.
Примечание для Android
- Если ваше приложение работает в полноэкранном режиме, т.е. у вас записано
<preference name="Fullscreen" value="true" />
в файлеconfig.xml
,
вам нужно вручную прописатьionic.Platform.isFullScreen = true
- Вы можете конфигурировать поведение веб-представления при отображении клавиатуры настройкой
android:windowSoftInputMode,
меняя параметрыadjustPan
,adjustResize
илиadjustNothing
.
Это делается вAndroidManifest
.
xml
. Для Ionic рекомендуется настраиватьadjustResize
, но если вы используетеadjustPan
, вам потребуется
откорректироватьionic.Platform.isFullScreen = true
.
<activity android:windowSoftInputMode="adjustResize">
Примечание для iOS
Если контент вашего приложения (включая хедер) выходит за верхние границы области просмотра
и не виден при фокусе ввода, попытайтесь установить cordova.plugins.Keyboard.disableScroll(true)
.
Это не отключит скроллинг в Ionic scroll view,
это, скорее, деактивирует нативную функцию прокрутки при переполнении блока, которая обычно запускается автоматически в
результате фокуса на элементы ввода, расположенные ниже клавиатуры.
keyboard-attach
keyboard-attach - директива, которая является атрибутом, применение которого заставит элемент плавать над клавиатурой в момент ее отображения. На текущий момент поддерживает только директиву ion-footer-bar .
Примечание
- Эта директива требует плагина Ionic Keyboard Plugin.
- На Андроиде, не в полноэкранном режиме, т.е. у вас есть
<preference name="Fullscreen" value="false" />
or no preference in yourconfig.xml
файл,
эта директива теряет свою нужность, так как это является поведением, принятым по умолчанию. - На iOS, если имеется ввод у вас в футере, вам нужно будет установить
cordova.plugins.Keyboard.disableScroll(true)
.
Применение
<ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
<h1 class="title">Title!</h1>
</ion-footer-bar>
Списки
Читать далееion-list
Delegate: $ionicListDelegate
Список (list) - это широко используемый практически в каждом мобильном приложении элемент интерфейса. Он может содержать разнообразный контент, начиная с обычного текста, заканчивая кнопками, переключателями, иконками и пиктограммами.
Как сам список, так и входящие в него пункты могут представлять собой
любой элемент HTML. Данный элемент требует присвоения класса list
, а каждый входящий в состав списка пункт требует присвоения класса item
.
Однако использование директив ionList и ionItem легко обеспечивает поддержку различных режимов взаимодействия, таких как "проведите пальцем для редактирования", "перетащите, чтобы изменить порядок пунктов в списке", а также удаления пунктов списка.
Применение
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}!
</ion-item>
</ion-list>
<ion-list ng-controller="MyCtrl"
show-delete="shouldShowDelete"
show-reorder="shouldShowReorder"
can-swipe="listCanSwipe">
<ion-item ng-repeat="item in items"
class="item-thumbnail-left">
<img ng-src="{{item.img}}">
<h2>{{item.title}}</h2>
<p>{{item.description}}</p>
<ion-option-button class="button-positive"
ng-click="share(item)">
Share
</ion-option-button>
<ion-option-button class="button-assertive"
ng-click="edit(item)">
Edit
</ion-option-button>
<ion-delete-button class="ion-minus-circled"
ng-click="items.splice($index, 1)">
</ion-delete-button>
<ion-reorder-button class="ion-navicon"
on-reorder="reorderItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
|
Дескриптор handle используется для идентификации списка посредством |
type (необязательный) |
|
Определяет тип списка, который нужно использовать (список-вставка или список-карточка) |
show-delete (необязательный) |
|
Определяет, нужно ли отобразить или спрятать на данный момент кнопки удаления для пунктов списка. |
show-reorder (необязательный) |
|
Определяет, нужно ли отобразить или спрятать на данный момент кнопки изменения порядка перечисления для пунктов списка. |
can-swipe (необязательный) |
|
Определяет, позволяется ли проводить пальцем по пунктам в списке, чтобы стали доступны кнопки опций. По умолчанию используется параметр true. |
ion-item
Применение
<ion-list>
<ion-item>Hello!</ion-item>
<ion-item href="#/detail">
Link to detail page
</ion-item>
</ion-list>
ion-delete-button
Применение
<ion-list show-delete="shouldShowDelete">
<ion-item>
<ion-delete-button class="ion-minus-circled"></ion-delete-button>
Hello, list item!
</ion-item>
</ion-list>
<ion-toggle ng-model="shouldShowDelete">
Show Delete?
</ion-toggle>
ion-reorder-button
Дочерний эллемент ionItem
Применение
<ion-list ng-controller="MyCtrl" show-reorder="true">
<ion-item ng-repeat="item in items">
Item
<ion-reorder-button class="ion-navicon"
on-reorder="moveItem(item, $fromIndex, $toIndex)">
</ion-reorder-button>
</ion-item>
</ion-list>
function MyCtrl($scope) {
$scope.items = [1, 2, 3, 4];
$scope.moveItem = function(item, fromIndex, toIndex) {
//Move the item in the array
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
};
}
API
Атрибут | Тип | Описание |
---|---|---|
on-reorder
(optional)
|
expression |
Expression to call when an item is reordered. Parameters given: $fromIndex, $toIndex. |
ion-option-button
Дочерний элемент ionItem
Создает кнопку выбора внутри пункта списка, она становится видна, когда пользователь
делает по данному пункту списка свайп влево. Открытые свайпом кнопки выбора могут быть скрыты с помощью
$ionicListDelegate.closeOptionButtons.
Может быть назначен любой класс кнопок.
Для более подробного объяснения и дополнительных примеров см. ionList
Применение
<ion-list>
<ion-item>
I love kittens!
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive">Edit</ion-option-button>
</ion-item>
</ion-list>
collection-repeat
collection-repeat
позволяет приложению отображать списки, содержащие огромное количество пунктов. При этом действует более эффективно, чем ng-repeat
.
В DOM передаются только те пункты, которые видны в данный момент.
Это означает, что на экране телефона, где могут уместиться только восемь пунктов списка, будут в данном виде отображения видны восемь пунктов списка (без применения прокрутки).
Основы:
- Данные, передающиеся в collection-repeat, должны представлять собой массив.
- Если не предоставляются атрибуты
item-height
иitem-width
, будет сделано допущение, что каждый пункт в списке имеет точно такие же размеры, как и самый первый его пункт. - Не используйте с collection-repeat одноразовую привязку Angular (
::
). По мере прокрутки области видимости каждого пункта из списка присваиваются новые данные, и происходит процесс переклассификации. Привязки нуждаются в обновлениях, а одноразовым привязкам обновление не нужно.
Возможности повышения производительности:
- Узкое место производительности веб-представления в iOS наблюдается при отключении атрибутов
<img src>
.
Чтобы увеличить эффективность работы с изображениями в iOS, заранее поместите изображения в кэш и, если возможно, уменьшите число уникальных изображений.
Usage
Basic Item List (codepen)
<ion-content>
<ion-item collection-repeat="item in items">
{{item}}
</ion-item>
</ion-content>
Grid of Images (codepen)
<ion-content>
<img collection-repeat="photo in photos"
item-width="33%"
item-height="200px"
ng-src="{{photo.url}}">
</ion-content>
Horizontal Scroller, Dynamic Item Width (codepen)
<ion-content>
<h2>Available Kittens:</h2>
<ion-scroll direction="x" class="available-scroller">
<div class="photo" collection-repeat="photo in main.photos"
item-height="250" item-width="photo.width + 30">
<img ng-src="{{photo.src}}">
</div>
</ion-scroll>
</ion-content>
API
Атрибут |
Тип |
Описание |
collection-repeat |
|
Выражение, показывающее как нумеровать коллекцию, по формату |
item-width (необязательный) |
|
Ширина повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же ширина, как у первого пункта в списке. (ранее это называлось collection-item-width) |
item-height (необязательный) |
|
Высота повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же высота, как у первого пункта в списке. (ранее это называлось collection-item-height) |
item-render-buffer (необязательный) |
|
Число пунктов, которые нужно загрузить до и после видимых пунктов в списке. По умолчанию: 3. Подсказка: если у вас много изображений для предварительной загрузки, задайте число побольше, но не слишком большое, иначе начнется потеря производительности. |
force-refresh-images (необязательный) |
|
Заставляет изображения обновляться, когда вы осуществляете прокрутку. Это решает проблему там, где элемент взаимно заменяется при скроллинге: изображение все равно имеет старый scr в то время, как загружается новый scr. Установка значения на true приводит к небольшой потере производительности. |
$ionicListDelegate
Делегат для управления директивой ionList
.
Вызываемые напрямую методы сервиса $ionicListDelegate будут управлять всеми списками.
Используйте метод $getByHandle, чтобы управлять указанными экземплярами ionList.
Применение
<ion-content ng-controller="MyCtrl">
<button class="button" ng-click="showDeleteButtons()"></button>
<ion-list>
<ion-item ng-repeat="i in items">
Hello, {{i}}!
<ion-delete-button class="ion-minus-circled"></ion-delete-button>
</ion-item>
</ion-list>
</ion-content>
function MyCtrl($scope, $ionicListDelegate) {
$scope.showDeleteButtons = function() {
$ionicListDelegate.showDelete(true);
};
}
Методы
showReorder([showReorder])
Параметр |
Тип |
Описание |
showReorder (необязательный) |
|
Устанавливает, будут или нет отображаться кнопки изменения порядка пунктов в этом списке. |
- Возвращает:
логическое значение
(boolean) Будут ли отображаться кнопки изменения последовательности.
showDelete([showDelete])
Параметр |
Тип |
Описание |
showDelete (необязательный) |
|
Устанавливает, будет этот список отображать кнопки удаления или нет. |
- Возвращает:
логическое значение
(boolean) Будут или нет отображаться кнопки удаления.
canSwipeItems([canSwipeItems])
Параметр |
Тип |
Описание |
canSwipeItems (необязательный) |
|
Устанавливает, будет ли возможность для этого списка открывать свайпом кнопки с опциями. |
- Возвращает:
логическое значение
(boolean) Будет ли возможность отображения кнопок с опциями для этого списка.
closeOptionButtons()
Закрывает любую из кнопок выбора вариантов в списке, которая открыта свайпом.
$getByHandle(handle)
Параметр |
Тип |
Описание |
handle |
|
(string) |
- Возвращает:
delegateInstance
Экземпляр делегата, который управляет
директивамиionList
приведениемdelegate-handle
в соответствие с данным обработчиком.
Пример: $ionicListDelegate.$getByHandle('my-handle').showReorder(true);
Загрузка
Читать далее$ionicLoading
Оверлей, который можно использовать для индикации действия во время блокировки действий пользователя.
Применение
angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
$scope.show = function() {
$ionicLoading.show({
template: 'Loading...'
});
};
$scope.hide = function(){
$ionicLoading.hide();
};
});
Методы
show(opts)
Отображает индикатор загрузки. Если индикатор уже отображается,
он настроит имеющиеся опции и продолжит отображать индикатор. Примечание: Пока эта
функция продолжает возвращать экземпляр $ionicLoading для обратной совместимости,
использовать ее не рекомендуется.
Параметр |
Тип |
Описание |
opts |
|
Опции для индикатора загрузки Доступные свойства:
|
hide()
Скрывает индикатор загрузки, если он отображается.
Читать далее$ionicLoadingConfig
Устанавливает дефолтные опции, которые требуется передать сервису $ionicLoading
.
Применение
var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
template: 'Default Loading Template...'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
$scope.showLoading = function() {
$ionicLoading.show(); //options default to values in $ionicLoadingConfig
};
});
Модальные окна
Читать далее$ionicModal
Смежные темы: ionicModal controller.
Модальное окно - это панель с контентом, которая временно может появиться поверх основного вида представления пользователя.Обычно используется для совершения выбора или редактирования элемента (пункта).
Поместите контент модального окна внутрь элемента <ion-modal-view>
.
Примечание:
Модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.
- Этот пример предполагает, что ваше модальное окно находится в главном файле индекса или другом файле-шаблоне. Если оно находится в своем собственном
файле-шаблоне, уберите теги script и назовите его по имени файла.
Usage
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">My Modal title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-modal-view>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
// Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
// Execute action
});
});
Методы
fromTemplate(templateString, options)
Параметр |
Тип |
Описание |
templateString |
|
Строка шаблона, которую нужно использовать как контент модального окна. |
options |
|
Опции, которые передаются методом ionicModal#initialize. |
- Возвращает:
object
Экземпляр контроллераionicModal.
fromTemplateUrl(templateUrl, options)
Параметр |
Тип |
Описание |
templateUrl |
|
Адрес URL, указывающий, откуда нужно загружать шаблон. |
options |
|
Опции, которые должны передаваться методу ionicModal#initialize. Объект опций. |
- Возвращает:
promise
Обещание, которое будет выполнено с помощью экземпляра
контроллераionicModal
.
ionicModal
Обрабатывается сервисом $ionicModal
.
После того, как вы закончили с каждым из модальных окон, обязательно вызовите remove(), чтобы провести очистку и избежать утечек памяти.
Примечание: модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Примечание: Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.
Методы
initialize(options)
Создает новый экземпляр модального контроллера.
Параметр |
Тип |
Описание |
options |
|
Объект опции со следующими свойствами:
|
show()
Отображает этот экземпляр модального окна.
- Возвращает:
promise
Обещание, которое разрешено (resolved), когда закончится анимация внутреннего контента модального окна.
hide()
Скрывает этот экземпляр модального окна.
- Возвращает:
promise
Обещание, которое разрешено, когда закончится анимация модального окна.
remove()
Убирает этот экземпляр модального окна из дерева DOM и выполняет очистку.
- Возвращает:
promise
Обещание, которое разрешено, когда закончится анимация модального окна.
isShown()
- Возвращает:
логическое значение Определяет, отображается ли в текущий момент это модальное окно.
Навигация
Читать далееion-nav-view
See the Pen Tabs And Navigation: Nightly by Ionic (@ionic) on CodePen.
Пользователь использует навигацию для переходов по приложению, а Ionic способен отслеживать историю его перемещений. Зная историю, переходы между видами представлений корректно происходят во всех направлениях с использованием стиля переходов, характерным для платформы. Дополнительное преимущество навигационной системы Ionic состоит в его способности управлять несколькими историями. Например, каждая вкладка может иметь свою историю перемещений.
Ionic использует модуль AngularUI Router, поэтому интерфейсы приложений могут быть организованы в различные "состояния". Как и базовый $route-сервис у Angular, управлять видами представлений так же могут и URL. Однако AngularUI Router является более мощным менеджером состояний, состояния привязаны к видам - с именем, вложенным и параллельным, позволяя более, чем одному шаблону быть представленным на одной и той же странице. К тому же каждое состояние не обязательно должно быть привязано к URL, и данные могут доставляться к каждому из состояний, которые позволяют большую гибкость.
Директива ionNavView используется для рендеринга шаблонов в ваше приложение. Каждый шаблон является частью состояния. К состояниям обычно привязан адрес URL, и они определяются программным образом с помощью angular-ui-router (см. документы,
и помните, что в примерах нужно заменить ui-view на ion-nav-view).
Применение
В этом примере мы создадим видовое представление навигации, которое содержит разные состояния для конкретного приложения.
Чтобы это сделать, в нашей разметке мы используем директиву верхнего уровня. Для отображения строки заголовка мы используем директиву ionNavBar
, которая обновляется по мере нашего продвижения по стеку переходов.
Затем нам понадобится установить состояния, которые будут рендериться.
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'home.html'
})
.state('music', {
url: '/music',
templateUrl: 'music.html'
});
});
Затем при запуске приложения $stateProvider будет смотреть на адрес URL, определяя, подходит ли он состоянию индекса, и затем попытается загрузить home.html в <
ion
-
nav
-
view
>
.
Страницы загружаются согласно заданным адресам URL. Один простой способ создания шаблонов в Angular предполагает записывать их напрямую в ваш HTML-файл и использовать синтакс <script type="text/ng-template">
.
Вот один из способов записи home.html в наше приложение:
<script id="home" type="text/ng-template">
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<a href="#/music">Go to music page!</a>
</ion-content>
</ion-view>
</script>
Это хороший способ, потому что шаблон будет помещаться в кэш и, следовательно, будет очень быстро загружаться, а не браться из сети.
Кеширование
По умолчанию виды представлений кэшируются, это улучшает производительность. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отключается от цикла $watch
. Когда перемещение в вид уже помещено в кэш, область видимости снова подключается, и существующий элемент, который был оставлен в DOM, становится активным видом представления. Это также позволяет поддерживать
положение полосы прокрутки предыдущих видов.
Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов, но не только этот параметр можно настраивать, приложения тоже могут прямо указывать, какие виды следует и не следует кэшировать.
Имейте в виду, что от того, что мы помещаем эти виды в кэш, мы не разрушаем области видимости. Вместо этого области видимости отключаются от цикла наблюдения. Так как области видимости не разрушаются и воссоздаются заново, контроллеры не загружаются опять при последующем просмотре. Если приложению/контроллеру требуется знать, когда вид вошел или вышел, то могут быть полезны события вида, которые генерируются из области видимости ionView
, такие как $ionicView.enter
.
По умолчанию, когда происходит перемещение назад в истории, "последующие" виды убираются из кэша.
Если вы перемещаетесь вперед, снова в тот же самый вид, то будет создан новый DOM-элемент и экземпляр контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Это можно конфигурировать, используя
$ionicConfigProvider
:
$ionicConfigProvider.views.forwardCache(true);
Глобальное отключение кэширования
Можно использовать $ionicConfigProvider
для того чтобы установить максимально разрешенное число видов, которое может быть помещено в кэш. Но эту функцию можно также использовать и для общего отключения кэширования, если числовое значение записать как 0.
$ionicConfigProvider.views.maxCache(0);
Отключение кэширования в рамках состояния провайдера
$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})
Отключение кэширования с помощью значений атрибутов
<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>
AngularUI Router
Дополнительную информацию можно найти в AngularUI Router’s docs
Ниже вы найдете видеоролик, созданный командой, занимающейся разработкой AngularUI Router. Видео поможет объяснить, как это все работает.
API
Атрибут | Тип | Описание |
---|---|---|
name
(optional)
|
string |
Имя представления (вида). Имя должно быть уникальным среди других видов представлений в одном и том же состоянии. У вас могут быть виды с одинаковыми именами, но они будут существовать в других состояниях. Более подробную информацию смотрите в документации ui-view в разделе ui-router |
See the Pen Tabs And Navigation: Nightly by Ionic (@ionic) on CodePen.
ion-view
Дочерний элемент ionNavView
Контейнер для контента вида и любой информации, относящейся к панели навигации и строке заголовка. Когда вид входит и выходит из своего родительского ionNavView
, вид также генерирует информацию, такую как заголовок, или то, должна ли отображаться кнопка возврата или нет, должна ли демонстрироваться соответствующая директива ionNavBar
или нет, какой из переходов должен сопровождаться анимацией, и в каком направлении анимация должна осуществляться.
Виды помещаются в кэш для улучшения производительности. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отсоединяется от цикла $watch
. При перемещении в вид, который уже находится в кэше, его область видимости подключается заново, и существующий элемент, который был
оставлен в структуре DOM, снова становится активным. Это можно отключить, или же максимальное число видов, находящихся в кэше, можно изменить в $ionicConfigProvider
, в конфигурации вида $state
, или
с помощью изменения значения атрибута самого вида (см. ниже).
Применение
Ниже дан пример того, как страница будет загружена с ionNavBar
, где в качестве заголовка содержится “My Page”.
<ion-nav-bar></ion-nav-bar>
<ion-nav-view>
<ion-view view-title="My Page">
<ion-content>
Hello!
</ion-content>
</ion-view>
</ion-nav-view>
Жизненный цикл вида и события
Виды можно кэшировать, а это означает, что контроллеры нормально загружаются только один раз. Это может повлиять на логику вашего контроллера. Чтобы знать, когда вид стал доступен или уже нет, были добавлены события, которые эмитируются из области видимости вида. Эти события также содержат данные о виде представления, такие как заголовок и информации о том, должна ли отображаться кнопка возврата. Также содержатся данные перехода, такие как тип перехода и направление, которое или будет, или уже было использовано.
|
Вид загружен. Это событие связано только с одним видом, который создается и добавляется в DOM. Если вид уходит, но он помещен в кэш, то это событие не запустится снова при последующем просмотре. Загруженное событие - это хорошее место для размещения кода установки для вида; однако это не то событие, которое рекомендуется слушать, когда вид становится активным. |
|
Вид полностью вошел и сейчас является активным. Это событие запустится, не важно, загружено ли оно впервые, или вид берется из кэша. |
|
Вид закончил выход и больше не является активным. Это событие запустится, не важно, в кэше ли оно или разрушено. |
|
Вид готов к входу и готов стать активным. |
|
Вид готов к выходу и больше не будет активным. |
|
Вид полностью вошел и сейчас является активным. |
|
Вид закончил выход и больше не является активным. |
|
Контроллер вида уничтожен и его элемент удален из DOM. |
Кэширование
Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов. Вы можете принять необязательное решение отключить кэширование либо для отдельного вида, либо в глобальной конфигурации. Дополнительную информацию смотрите в главе Caching (кэширование) раздел ionNavView
API
Атрибут |
Тип |
Описание |
view-title (необязательный) |
|
Заголовок (title) text-only, который должен отображаться в родительском |
cache-view (необязательный) |
|
Определяет, позволено ли этому виду быть помещенным в кэш или нет. Для получения более подробной информации см. раздел Caching в |
can-swipe-back (необязательный) |
|
Если этому виду должно быть позволено использовать такой жест, как свайп, чтобы делать возврат. Это не активирует свайп как действие для возврата назад, если такой жест не доступен на данной платформе, или же не существует предыдущего вида представления. По умолчанию используется |
hide-back-button (необязательный) |
|
Определяет, возможно ли по умолчанию скрывать кнопку возврата на родительском |
hide-nav-bar (необязательный) |
|
Определяет, скрывать или нет по умолчанию родительский |
Читать далее
ion-nav-bar
Delegate: $ionicNavBarDelegate
Если у нас имеется директива ionNavView
, мы также можем создать
<ion-nav-bar
, который создаст верхнюю строку, которая будет обновляться по мере изменения состояния приложения.
Мы можем добавить кнопку возврата, поместив ionNavBackButton
внутрь.
Мы можем добавить кнопки в зависимости от видимого в данный момент представления, используя ionNavButtons
.
Имейте в виду, что элемент ion-nav-bar будет работать корректно, если вокруг вашего контента находится ionView.
Применение
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-content>Hello!</ion-content>
</ion-view>
</ion-nav-view>
</body>
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
|
Метка, используемая для идентификации этой навигационной панели с помощью |
align-title (необязательный) |
|
В какую сторону выравнивать заголовок в навигационной панели. Доступно: "слева", "справа", "по центру". По умолчанию задан параметр "по центру". |
no-tap-scroll (необязательный) |
|
По умолчанию при касании навигационной панели контент прокрутится на самое начало. Установите параметр "true" для no-tap-scroll, чтобы отключить такое поведение. |
ion-nav-back-button
Дочерний элемент ionNavBar
Создает кнопку возврата внутри ionNavBar
.
Кнопка возврата появится, когда пользователь имеет возможность совершить обратный шаг в текущем стеке переходов. По умолчанию описание кнопки возврата выстраивается автоматически пр помощи соответствующих параметров, принятых по умолчанию в данной платформе (iOS-иконка кнопки возврата в iOS и Android-иконка в Android).
В дополнение к этому кнопка автоматически настраивается $ionicGoBack()
на клик/тап. По умолчанию при нажатии на кнопку возврата приложение перейдет на один вид назад. Возможно и более продвинутое поведение, такое, как описано ниже.
Применение
Рекомендуемая разметка для настроек по умолчанию.
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-bar>
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-clear"
ng-click="myGoBack()">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicHistory) {
$scope.myGoBack = function() {
$ionicHistory.goBack();
};
}
ion-nav-buttons
Дочерний элемент ionNavView
Используйте кнопки навигации, чтобы настроить кнопки на вашей ionNavBar
изнутри ionView
. Это дает каждому шаблону вида возможность определить, какие кнопки должны отображаться в навигационной панели, имея приоритет над любыми дефолтными кнопками, уже находящимися в навигационной панели.
Любые заявленные кнопки будут размещены в навигационной панели с соответствующей стороны. Кнопки, имеющие приоритет, как правило, располагаются с левой стороны хедера, а второстепенные кнопки, в основном, находятся с правой стороны. Однако за точное расположение кнопок отвечает непосредственно сама платформа.
Например, в iOS основные кнопки помещены в самый левый край хедера, а
второстепенные кнопки - в самом правом краю, заголовок "шапки" располагается по центру между ними. Однако для Android обе группы кнопок размещаются с правого края "шапки", заголовок шапки смещен влево.
Мы рекомендуем всегда использовать параметры основные
и второстепенные
, так кнопки правильно занимают место на своей стороне шапки, это удобно для пользователей каждой из платформ. Но в случаях, когда кнопки должны всегда быть на определенной стороне, возможно использовать и левое
, и правое
расположение. Например,
кнопка переключения (toggle) для меню расположенного слева должна быть на левой стороне; в этом случае мы бы рекомендовали использовать side="left"
, чтобы она всегда была слева независимо от платформы.
Имейте в виду, что ion-nav-buttons
должны быть непосредственными потомками ion-view
или элементом ion-nav-bar
(проще говоря, не "заворачивайте" его в другой div).
Применение
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
API
Атрибут |
Тип |
Описание |
side |
|
Сторона, в которую нужно помещать кнопки в |
ion-nav-title
Дочерний элемент ionNavView
Директива навигации по заголовку замещает текст заголовка ionNavBar
собственным HTML-кодом, взятым из шаблона ionView
. Это дает каждому виду способность определять свой собственный настраиваемый элемент заголовка, такой как изображение или любой код HTML, а не всего лишь text-only. Или же, заголовки text-only могут быть обновлены при использовании атрибута view-title
ionView
.
Имейте в виду, что ion-nav-title
должны быть непосредственными потомками ion-view
или элементом ion-nav-bar
(проще говоря, не "заворачивайте" его в другой div).
Применение
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<img src="logo.svg">
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
nav-transition
Тип перехода, который должен использовать переход nav view при анимации.
Сейчас опции ограничены вариантами ios
, android
и none
. Скоро появится больше опций.
Применение
<a nav-transition="none" href="#/home">Home</a>
nav-direction
Направление, в котором должна осуществляться анимация перехода nav view. Доступны следующие опции: forward
, back
, enter
, exit
, swap
(вперед, назад, ввод, выход, перестановка)
Применение
<a nav-direction="forward" href="#/home">Home</a>
$ionicNavBarDelegate
Делегирует управление директивой ionNavBar
Применение
<body ng-controller="MyCtrl">
<ion-nav-bar>
<button ng-click="setNavTitle('banana')">
Set title to banana!
</button>
</ion-nav-bar>
</body>
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.setNavTitle = function(title) {
$ionicNavBarDelegate.title(title);
}
}
Методы
align([direction])
Выравнивает заголовок с кнопками в заданном направлении.
Параметр |
Тип |
Описание |
direction (необязательный) |
|
Направление, в котором нужно выравнивать текст заголовка. Доступно: "слева", "справа", "по центру". По умолчанию: "по центру". |
showBackButton([show])
Set/get для отображения ionNavBackButton
(если она - кнопка возврата существует, и есть предыдущее представление вида, к которому можно перейти).
Параметр |
Тип |
Описание |
show (необязательный) |
|
Определяет, нужно ли отображать кнопку возврата. |
- Возвращает:
логическое значение (
boolean
) Определяет, нужно ли
отображать кнопку возврата.
showBar(show)
Set/get для отображения ionNavBar
.
Параметр |
Тип |
Описание |
show |
|
Определяет, нужно ли отображать строку. |
- Возвращает:
логическое значение
(boolean) Определяет, нужно ли отображать строку.
title(title)
Установить заголовок для ionNavBar
.
Параметр |
Тип |
Описание |
title |
|
Новый заголовок, который нужно отображать. |
$ionicHistory
$ionicHistory отслеживает виды во время перемещения пользователя по приложению. Точно так же, как ведет себя браузер, Ionic-приложение способно отслеживать и сохранять предыдущий вид, текущий вид и следующий за ним вид (если он есть). Как правило, типичный веб-браузер сохраняет линейно только один стек истории.
В отличие от традиционной среды, характерной для браузера, приложения и веб-приложения имеют параллельные независимые истории, как и с вкладками. Пользователь может на одной вкладке перемещаться по нескольким интернет-страницам с достаточной глубиной просмотров, а затем переключиться на новую вкладку и снова вернуться назад. Кнопка возврата при этом относится не к предыдущей вкладке, а к предыдущим страницам, которые пользователь посетил в рамках той вкладки.
$ionicHistory
обеспечивает такую параллельную архитектуру истории.
Методы
viewHistory()
Просмотр данных истории приложения, к которым относятся виды и истории переходов,
а также то, в каком порядке они осуществлялись и как были связаны между собой в пределах стека переходов.
- Возвращает:
объект (
object
)
Возвращает объект, содержащий данные истории видов приложения.
currentView()
Текущий вид приложения.
- Возвращает:
объект
(object) Возвращает текущий вид.
currentHistoryId()
ID стека истории, который является родительским контейнером текущего вида.
- Возвращает:
строку
(string) Возвращает ID текущей истории.
currentTitle([val])
Получает и устанавливает заголовок текущего вида.
Параметр |
Тип |
Описание |
val (необязательный) |
|
Заголовок, который будет служить обновлением текущего вида. |
- Возвращает:
строку
(string) Возвращает заголовок текущего вида.
backView()
Возвращает вид, который был до текущего вида в стеке истории.
Если пользователь осуществлял навигацию из Вида A в Вид B, то Вид A должен быть предыдущим видом, а
вид B будет текущим видом.
- Возвращает:
объект(object)
Возвращает предыдущий вид.
backTitle()
Получает заголовок предыдущего вида.
- Возвращает:
строку (string)
Возвращает заголовок предыдущего вида.
forwardView()
Возвращает вид, который был перед текущим видом в стеке истории.
Следующий вид существовал бы при условии, если бы пользователь перешел от Вида A к Виду B, а затем переместился обратно к Виду A. В этой точке Вид B был бы следующим видом, а Вид A был бы текущим видом.
- Возвращает:
объект (object)
Возвращает следующий вид.
currentStateName()
Возвращает имя текущего состояния.
- Возвращает:
строку (
string)
goBack([backCount])
Перемещает приложение к предыдущему виду, если он существует.
Параметр |
Тип |
Описание |
backCount (необязательный) |
|
Настройка дополнительного отрицательного целого числа, задающего величину, на сколько видов нужно возвращаться назад. По умолчанию использование значения |
clearHistory()
Очищает всю историю приложения кроме истории для текущего вида.
clearCache()
Убирает из кэша все виды в рамках каждого ionNavView
.
Это убирает элемент вида из DOM, и также разрушает его область видимости.
- Возвращает:
обещание (promise)
nextViewOptions()
Задает опции для следующего вида. Этот метод может быть полезен, когда нужно
принудительно обойти параметры вида/перехода, назначенные по умолчанию, прямо перед тем, как произойдет переход вида. Например, директива menuClose
использует данный метод внутренним образом, чтобы гарантировать, что анимированный переход вида не произойдет в тот момент, когда открыто боковое меню. Также она
устанавливает следующий вид как корневой в своем стеке истории. После перехода эти опции снова сводятся к неопределенному значению.
Доступные опции:
disableAnimate
: Не делать анимацию для следующего перехода.disableBack
: Следующий вид должен забыть свой предыдущий вид и установить его на пустое значение.historyRoot
: Следующий вид должен стать корневым (основным) видом в стеке истории.
$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true
});
Читать далееПлатформа
Читать далее$ionicPlatform
Angular-абстракция ionic.Platform.
Используется для детектирования текущей платформы, а также выполнения таких действий, как подавление
Android-кнопки "Назад" в PhoneGap/Cordova.
Методы
onHardwareBackButton(callback)
В некоторых платформах есть аппаратная кнопка возврата, и это один из способов
привязки к данной кнопке.
Параметр |
Тип |
Описание |
callback |
|
обратный вызов, который запустится при наступлении события |
offHardwareBackButton(callback)
Убирает слушателя событий для кнопки возврата.
Параметр |
Тип |
Описание |
callback |
|
Функция слушателя, у которого была изначальная привязка. |
registerBackButtonAction(callback, priority, [actionId])
Регистрирует действие аппаратной кнопки возврата. Только одно действие будет выполняться,
когда произведен клик кнопкой "Назад", поэтому данный метод решает, какое из
зарегистрированных действий кнопки возврата имеет самый высокий приоритет.
Например, если список действий (Action Sheet) показывает, что кнопка возврата должна
закрывать список, но при этом не должно быть перехода обратно к виду страницы на экране
или не должно закрываться модальное окно, которое может быть в тот момент открыто.
Приоритеты существующих привязок кнопки возврата могут быть следующими:
Возврат к предыдущему виду = 100
Закрытие бокового меню = 150
Закрытие модального окна = 200
Закрытие списка действий (Action Sheet) = 300
Закрытие всплывающего окна = 400
Прекращение загрузки оверлея (overlay) = 500
Ваше действие кнопки возврата будет подавлять каждое из указанных выше действий,
приоритет которых ниже приоритета, который вами задан. Например,
действие с назначенным приоритетом 101 будет подавлять "возврат к
предыдущему виду", но только это, а не какое-то другое действие.
Параметр |
Тип |
Описание |
callback |
|
Вызывается, когда нажата кнопка возврата, если у этого слушателя самый высокий приоритет. |
приоритет |
|
Будет исполняться только самый высокий приоритет. |
actionId (необязательный) |
|
Идентификатор (id), который будет назначен этому действию. По умолчанию: случайный и уникальный ID. |
- Возвращает:
function
Функция, которая при вызове разрегистрирует
это действие backButtonAction.
on(type, callback)
Добавляет слушатели событий Cordova, такие как pause
, resume
, volumedownbutton
, batterylow
,
offline
и т.д. Более подробную информацию о типах событий можно найти в
Документации по событию Cordova.
Параметр |
Тип |
Описание |
тип |
строка |
тип события Cordova. |
callback |
функция |
Вызывается, когда запускается событие Cordova. |
- Возвращает:
function
Возвращает функцию разрегистрации, для того чтобы убрать слушатель события.
ready([callback])
Запускает обратный вызов (callback)
, как только устройство готово,
или сразу же, если устройство уже готово.
Параметр |
Тип |
Описание |
callback (необязательный) |
|
Функция, которую нужно вызвать. |
- Возвращает:
promise
Обещание, которое разрешено, когда устройство готово.
Читать далее
Вспомогательный экран
Читать далее$ionicPopover
Смежная тема: контроллер ionicPopover.
Вспомогательный экран (popover) - это вид, который всплывает над контентом приложения. Вспомогательные экраны обеспечивают легкий способ представления или сбора информации от пользователя.
Обычно они используются в следующих ситуациях:
- При показе более развернутой информации о текущем виде
- При выборе часто используемого инструмента или конфигурации
- При представлении списка действий, которые должны выполняться внутри одного из ваших видов
Поместите контент вспомогательного экрана внутрь элемента <ion-popover-view>
.
Применение
<p>
<button ng-click="openPopover($event)">Open Popover</button>
</p>
<script id="my-popover.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
Hello!
</ion-content>
</ion-popover-view>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
// .fromTemplate() method
var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';
$scope.popover = $ionicPopover.fromTemplate(template, {
scope: $scope
});
// .fromTemplateUrl() method
$ionicPopover.fromTemplateUrl('my-popover.html', {
scope: $scope
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event) {
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
$scope.popover.remove();
});
// Execute action on hide popover
$scope.$on('popover.hidden', function() {
// Execute action
});
// Execute action on remove popover
$scope.$on('popover.removed', function() {
// Execute action
});
});
Методы
fromTemplate(templateString, options)
Параметр |
Тип |
Описание |
templateString |
строка |
Строка шаблона, которую нужно использовать в качестве контента вспомогательного экрана. |
options |
объект |
Параметры, которые должны передаваться в метод инициализации. |
- Возвращает:
object
ЭкземплярionicPopover
контроллера (ionicPopover построен поверх $ionicPopover).
fromTemplateUrl(templateUrl, options)
Параметр |
Тип |
Описание |
templateUrl |
строка |
Адрес URL, указывающий, откуда нужно загружать шаблон. |
options |
объект |
Параметры, которые должны передаваться в метод инициализации. |
- Возвращает:
promise
Обещание, которое будет разрешено с экземпляром
контроллераionicPopover
(ionicPopover построен поверх $ionicPopover).
ionicPopover
Реализуется сервисом $ionicPopover
.
После окончания работы с каждым вспомогательным экраном не забудьте вызвать remove()
,
чтобы провести очистку и избежать утечек памяти.
Примечание: вспомогательный экран будет транслировать события ‘popover.shown’, ‘popover.hidden’ и ‘popover.removed’ из
генерируемой области видимости в себя в качестве аргумента события. Оба события - и popover.removed, и popover.hidden
вызываются, когда вспомогательный экран убран.
Методы
initialize(options)
Создает новый экземпляр контроллера вспомогательного экрана.
Параметр |
Тип |
Описание |
options |
объект |
Объект параметров, имеющий следующие свойства:
|
show($event)
Отображает этот экземпляр вспомогательного экрана.
Параметр |
Тип |
Описание |
$event |
|
$event или целевой элемент, по которому должен выравниваться вспомогательный экран. |
- Возвращает:
promise
Обещание, которое разрешено, когда заканчивается анимация, сопровождающая сворачивание вспомогательного экрана.
hide()
Скрывает этот экземпляр вспомогательного экрана.
- Возвращает:
promise
Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.
remove()
Убирает этот экземпляр вспомогательного экрана из дерева DOM и выполняет очистку.
- Возвращает:
promise
Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.
isShown()
- Возвращает:
boolean
Определяет, отображается ли в текущий момент данный вспомогательный экран.
Всплывающее окно
Читать далее$ionicPopup
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
, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.
Прокрутка
Читать далееion-scroll
Delegate: $ionicScrollDelegate
Создает контейнер с возможностью прокрутки для всего содержимого, которое будет находиться внутри него.
Применение
Основное применение:
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
Обратите внимание на этот факт: важно задать высоту окна просмотра, так же как и высоту
контента, который будет находиться внутри этого окна, чтобы была возможность прокрутки. Этот элемент позволяет полностью контролировать зоны прокрутки.
Если же вам нужно, чтобы зона прокрутки была только для контента, расположенного по центру, используйте вместо этого ionContent
.
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
строка string |
Метка, использующаяся для идентификации этого элемента ScrollView с помощью$ionicScrollDelegate. |
direction (необязательный) |
строка string |
Каким образом делать прокрутку. 'x' или 'y' или 'xy'. По умолчанию задан параметр 'y'. |
locking (необязательный) |
boolean |
Определяет, блокировать ли скроллинг в одном из направлений за один прием. Лучше поставить "false" при увеличении масштаба просмотра или прокрутке в двух направлениях. По умолчанию "true". |
paging (необязательный) |
boolean |
Определяет, делать прокрутку постраничной или нет. |
on-refresh (необязательный) |
выражение expression |
Вызывается при осуществлении функции обновления данных pull-to-refresh, запускается посредством ionRefresher. |
on-scroll (необязательный) |
выражение expression |
Вызывается, когда бы пользователь ни начал выполнять прокрутку. |
scrollbar-x (необязательный) |
boolean |
Определяет, отображать ли горизонтальную полосу прокрутки. По умолчанию "true". |
scrollbar-y (необязательный) |
boolean |
Определяет, отображать ли вертикальную полосу прокрутки. По умолчанию "true". |
zooming (необязательный) |
boolean |
Определяет, поддерживать или нет функцию "pinch-to-zoom" (масштабирование двумя пальцами) |
min-zoom (необязательный) |
целое число (integer) |
Самая маленькая допустимая величина масштабирования (по умолчанию 0.5) |
max-zoom (необязательный) |
целое число (integer) |
Самая большая допустимая величина масштабирования (по умолчанию 3). |
has-bouncing (необязательный) |
boolean |
Определяет, разрешать ли прокрутку для того чтобы отскочить от краев контента. По умолчанию "true" в iOS, "false" в Android. |
ion-infinite-scroll
Дочерний элемент ionContent
или ionScroll
Директива ionInfiniteScroll позволяет вызывать функцию каждый раз,
когда пользователь достигает нижней части страницы или находится рядом с нижней частью страницы.
Выражение, которое вы передаете для on-infinite
, вызывается, когда пользователь
прокрутил экран на большую величину, чем distance
до нижней границы контента. Как только on-infinite
закончит загрузку новых данных, он должен транслировать событие scroll.infiniteScrollComplete
из вашего контроллера (см. пример, данный ниже).
Применение
<ion-content ng-controller="MyController">
<ion-list>
....
....
</ion-list>
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('$stateChangeSuccess', function() {
$scope.loadMore();
});
}
Легкий способ прекратить бесконечную прокрутку, если больше нет данных для загрузки, это
воспользоваться директивой ng-if
, имеющейся в Angular:
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
API
Атрибут |
Тип |
Описание |
on-infinite |
выражение expression |
Определяет, что должно быть вызвано, когда полоса прокрутки достигает нижнего предела. |
distance (необязательный) |
строка string |
Расстояние снизу, которого нужно достичь при прокрутке, чтобы сработало выражение on-infinite. По умолчанию: 1%. |
spinner (необязательный) |
строка string |
ionSpinner для отображения во время процеса загрузки. ionSpinner стандарта SVG теперь является дефолтным, он замещает вращающиеся шрифтовые иконки. |
icon (необязательный) |
строка string |
Иконка, которая должна отображаться во время процесса загрузки. По умолчанию: 'ion-load-d'. Это устаревший вариант, он замененionSpinner стандарта SVG. |
immediate-check (необязательный) |
boolean |
Определяет, нужно ли проверять границы бесконечной прокрутки сразу же после загрузки. |
$ionicScrollDelegate
Делегирует управление элементом scrollViews (созданным директивами ionContent
и ionScroll
).
Вызываемые напрямую методы сервиса $ionicScrollDelegate будут управлять всеми видами прокрутки. Используйте метод $getByHandle для управления определенными видами прокрутки (scrollViews).
Применение
<body ng-controller="MainCtrl">
<ion-content>
<button ng-click="scrollTop()">Scroll to Top!</button>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}
Пример расширенного применения, когда имеются две зоны прокрутки и для более точного управления используется delegate-handle
<body ng-controller="MainCtrl">
<ion-content delegate-handle="mainScroll">
<button ng-click="scrollMainToTop()">
Scroll content to top!
</button>
<ion-scroll delegate-handle="small" style="height: 100px;">
<button ng-click="scrollSmallToTop()">
Scroll small area to top!
</button>
</ion-scroll>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollMainToTop = function() {
$ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
};
$scope.scrollSmallToTop = function() {
$ionicScrollDelegate.$getByHandle('small').scrollTop();
};
}
Методы
resize()
Сообщает scrollView о перерасчете размера своего контейнера.
scrollTop([shouldAnimate])
Параметр |
Тип |
Описание |
shouldAnimate (необязательный) |
(boolean) |
Определяет, должна ли прокрутка сопровождаться анимацией. |
scrollBottom([shouldAnimate])
Параметр |
Тип |
Описание |
shouldAnimate (необязательный) |
(boolean) |
Определяет, должна ли прокрутка сопровождаться анимацией. |
scrollTo(left, top, [shouldAnimate])
Параметр |
Тип |
Описание |
left |
число (number) |
Значение x (x-value), до которого должна осуществляться прокрутка. |
top |
число (number) |
Значение y (y-value), до которого должна осуществляться прокрутка. |
shouldAnimate (необязательный) |
(boolean) |
Определяет, должна ли прокрутка сопровождаться анимацией. |
scrollBy(left, top, [shouldAnimate])
Параметр |
Тип |
Описание |
left |
число (number) |
Параметр x-offset, определяющий позиции прокрутки. |
top |
число (number) |
Параметр y-offset, определяющий позиции прокрутки. |
shouldAnimate (необязательный) |
(boolean) |
Определяет, должна ли прокрутка сопровождаться анимацией. |
zoomTo(level, [animate], [originLeft], [originTop])
Параметр |
Тип |
Описание |
level |
число (number) |
Уровень, ограничивающий величину масштабирования. |
animate (необязательный) |
(boolean) |
Определяет, должно ли масштабирование сопровождаться анимацией. |
originLeft (необязательный) |
число (number) |
Детализация (приближение) изображения в процессе масштабирования при заданной левой координате. |
originTop (необязательный) |
число (number) |
Детализация (приближение) изображения в процессе масштабирования при заданной верхней координате. |
zoomBy(factor, [animate], [originLeft], [originTop])
Параметр |
Тип |
Описание |
factor |
число (number) |
Коэффициент увеличения изображения. |
animate (необязательный) |
(boolean) |
Определяет, должно ли масштабирование сопровождаться анимацией. |
originLeft (необязательный) |
число (number) |
Детализация (приближение) изображения в процессе масштабирования при заданной левой координате. |
originTop (необязательный) |
число (number) |
Детализация (приближение) изображения в процессе масштабирования при заданной верхней координате. |
getScrollPosition()
- Возвращает:
object Позиция прокрутки этого вида, имеющая следующие свойства: - {number} left Расстояние слева, на которое пользователь прокрутил контент (начинается от 0).
- {number} top Расстояние от верхней границы, на которое пользователь прокрутил контент (начинается от 0).
anchorScroll([shouldAnimate])
Дает команду ScrollView прокрутить элемент с ID, который
соответствует window.location.hash.
Если подходящий элемент не найден, будет выполнена прокрутка до самой верхней позиции.
Параметр |
Тип |
Описание |
shouldAnimate (необязательный) |
логическое значение (boolean) |
Определяет, должна ли прокрутка сопровождаться анимацией. |
freezeScroll([shouldFreeze])
Не позволяет этому виду прокручиваться по параметрам x или y.
Параметр |
Тип |
Описание |
shouldFreeze (необязательный) |
логическое значение (boolean) |
Определяет, позволить этому виду прокручиваться или нет. |
- Возвращает:
boolean Определяет, запрещен этому Scroll View режим прокрутки или нет.
freezeAllScrolls([shouldFreeze])
Не разрешает любому из Scroll View приложения прокручиваться по параметрам x или y.
Параметр |
Тип |
Описание |
shouldFreeze (необязательный) |
логическое значение (boolean) |
Определяет, следует ли предотвратить возможность прокрутки для всех элементов прокрутки в приложении или нет. |
getScrollView()
- Возвращает:
object Данный ScrollView ассоциируется с этим делегатом.
$getByHandle(handle)
Параметр |
Тип |
Описание |
handle |
строка (string) |
- Возвращает:
delegateInstance Экземпляр делегата, который управляет только
видами прокрутки ScrollViews с помощью delegate-handle в соответствие с данным обработчиком.
Пример: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();
Читать далееБоковые меню
Читать далееion-side-menus
ion-side-menus
Delegate: $ionicSideMenuDelegate
Элемент контейнера для бокового меню (боковых меню) и основного контента. Разрешает включение левого и/или правого бокового меню
с помощью перетаскивания зоны основного контента из стороны в сторону.
Чтобы автоматически закрыть открытое меню, вы можете добавить директиве атрибут menuClose
.
Атрибут menu-close
обычно добавляется к ссылкам и кнопкам в пределах ion-side-menu-content
, так чтобы когда по элементу производится клик, открытое боковое меню закрылось бы автоматически.
Можно добавить в хедер переключатели в стиле “Burger Icon”, прописав директиве атрибут menuToggle
.
Клик по такому переключателю будет открывать и закрывать боковое меню, как директива menu-close
.
Боковое меню будет автоматически скрывать дочерние страницы, но такое поведение можно обойти с помощью
атрибута enable-menu-with-back-views, о котором упоминается ниже.
По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. К тому же, при добавлении
атрибута директивы exposeAsideWhen
элементу директивы ionSideMenu
, боковое меню может получать инструкции о том,
"когда" меню должно раскрываться (быть всегда доступным для просмотра).
Для получения более подробной информации о боковых меню, см.:
Применение
Чтобы использовать боковые меню, добавьте родительский элемент <ion-side-menus>. Это охватит все страницы, у которых
есть боковое меню и которые имеют, по крайней мере, 2 дочерних элемента: 1 <ion-side-menu-content> для контента по центру и
еще одну или более директив <ion-side-menu> для каждого бокового меню (левого/правого), которые вы хотите разместить.
<ion-side-menus>
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
API
Атрибут |
Тип |
Описание |
enable-menu-with-back-views (необязательный) |
bool |
Определяет, активировать боковое меню, когда отображается кнопка возврата. Когда установлено на false, любой элемент menuToggle будет скрыт, и пользователь не сможет открыть меню свайпом. При возвращении на корневую страницу бокового меню (страница, на которой не видно кнопки возврата), любые кнопки menuToggle будут отображаться снова, и снова будут активны меню. |
delegate-handle (необязательный) |
строка (string) |
Метка, используемая для идентификации этого бокового меню с помощью $ionicSideMenuDelegate. |
ion-side-menu-content
Child of ionSideMenus
Контейнер для основного видимого контента, являющийся родственным одной или более директивам ionSideMenu
Usage
<ion-side-menu-content
edge-drag-threshold="true"
drag-content="true">
</ion-side-menu-content>
Пример полного бокового меню можно посмотреть в документации ionSideMenus.
API
API
Атрибут |
Тип |
Описание |
drag-content (необязательный) |
(boolean) |
Определяет, можно ли перетаскивать контент. По умолчанию "true". |
edge-drag-threshold |
boolean|number |
Определяет, может ли быть начато перетаскивание контента только в том случае, если контент находится ниже определенного порогового расстояния от края экрана. По умолчанию "false". Принимает три типа значений:
|
ion-side-menu
Child of ionSideMenus
Контейнер для бокового меню, являющийся родственным директиве ionSideMenuContent
.
Usage
<ion-side-menu
side="left"
width="myWidthValue + 20"
is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>
Пример полного бокового меню см. в документации ionSideMenus.
API
API
Атрибут |
Тип |
Описание |
side |
(string) |
Определяет, на какой стороне в данный момент находится боковое меню. Допустимые значения: 'left' или 'right'. |
is-enabled (необязательный) |
(boolean) |
Определяет, подключено ли это боковое меню. |
width (необязательный) |
(number) |
Определяет, сколько пикселей в ширину должно иметь боковое меню. По умолчанию 275. |
expose-aside-when
Child of ionSideMenus
Является обычным элементом для планшетного приложения, служит для того, чтобы скрывать меню при переходе в портретный режим отображения, но отображает то же самое меню с левой стороны, когда планшет повернут в ландшафтный режим отображения. Атрибут директивы exposeAsideWhen
, который может быть использован для выполнения точно такого же интерфейса.
По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. Однако при добавлении
атрибута директивы exposeAsideWhen
элементу директивы ionSideMenu
, боковое меню может получать инструкции о том, "когда" меню должно раскрываться (быть всегда доступным для просмотра). Например, атрибут expose-aside-when="large"
будет удерживать боковое меню в скрытом состоянии, когда ширина области просмотра будет менее 768px
, но когда ширина области просмотра будет 768px
и более, то меню будет отображаться всегда, и его нельзя будет открыть или закрыть, как это можно делать, если размер области просмотра будет меньше.
Использование large
в качестве значения атрибута является значением для ярлыка для (min-width:768px)
, так как это самый распространенный use-case (сценарий использования). Однако для большей гибкости в качестве значения может быть добавлен любой действительный медиа-запрос, например, (min-width:600px)
; или даже несколько запросов, таких как (min-width:750px) и (max-width:1200px)
.
Usage
<ion-side-menus>
<ion-side-menu-content>
</ion-side-menu-content>
<ion-side-menu expose-aside-when="large">
</ion-side-menu>
</ion-side-menus>
Пример полного бокового меню см. в документации ionSideMenus
.
menu-toggle
Переключает боковое меню на данную сторону.
Применение
Ниже дается пример связи внутри навигационной панели. Касание этой кнопки откроет данное боковое меню, повторное касание кнопки закроет его.
<ion-nav-bar>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
Кнопка, скрытая на дочерних представлениях вида
По умолчанию кнопка переключения меню будет появляться только на корневой странице бокового меню. Перемещение к дочерним видам будет скрывать кнопку переключения меню. Их можно сделать видимыми на дочерних страницах, если установить атрибут enable-menu-with-back-views директивы ionSideMenus
на значение "true".
<ion-side-menus enable-menu-with-back-views="true">
menu-close
menu-close
является атрибутом директивы, которая закрывает открытое в текущий момент боковое меню. Примите во внимание тот факт, что по умолчанию навигационные переходы между видами не будут сопровождаться анимацией, когда меню открыто. К тому же, эта директива заново установит стек истории входящего вида, делая новую страницу корневой в стеке истории. Это сделано для того чтобы продублировать пользовательский опыт в большинстве реализаций бокового меню, которые не должны отображать кнопку возврата в корне стека, а должны отображать только кнопку меню. Мы рекомендуем вам также использовать атрибут enable-menu-with-back-views="false"
ionSideMenus
, когда применяется директива menuClose.
Применение
Ниже дан пример связи, существующей внутри бокового меню. Тап по этой ссылке автоматически закроет открытое в данный момент меню.
<a menu-close href="#/home" class="item">Home</a>
Имейте в виду, что если ваше состояние назначения использует разрешение, и разрешение, происходящее асинхронно, занимает времени больше, чем стандартный переход (300 мс), вам нужно будет вручную установить nextViewOptions
, как только ваше разрешение будет выполнено.
$ionicHistory.nextViewOptions({
historyRoot: true,
disableAnimate: true,
expire: 300
});
$ionicSideMenuDelegate
Делегирует управление директиве ionSideMenus
.
Вызываемые напрямую методы сервиса $ionicSideMenuDelegate будут управлять всеми боковыми меню. Используйте метод $getByHandle метод, используемый для управления указанными экземплярами ionSideMenus.
Применение
<body ng-controller="MainCtrl">
<ion-side-menus>
<ion-side-menu-content>
Content!
<button ng-click="toggleLeftSideMenu()">
Toggle Left Side Menu
</button>
</ion-side-menu-content>
<ion-side-menu side="left">
Left Menu!
<ion-side-menu>
</ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
Методы
toggleLeft([isOpen])
Переключает на левостороннее меню (если оно существует).
Параметр |
Тип |
Описание |
isOpen (необязательный) |
(boolean) |
Определяет, нужно ли открыть или закрыть меню. По умолчанию: Переключает меню. |
toggleRight([isOpen])
Переключает на правостороннее меню (если оно существует).
Параметр |
Тип |
Описание |
isOpen (необязательный) |
(boolean) |
Определяет, нужно ли открыть или закрыть меню. По умолчанию: Переключает меню. |
getOpenRatio()
Получает коэффициент, определяющий размер открытого меню. Например, меню шириной 100, которое открыто в размере на 50 пикселей, получается открытым на 50% и вернет коэффициент, равный 0.5.
- Возвращает:
float 0, если ничего не открыто; между 0 и 1, если открыто/открывается левое меню;
и между 0 и -1, если открыто/открывается правое меню.
isOpen()
- Возвращает:
boolean Определяет, какое меню открыто в данный момент - левое или правое.
isOpenLeft()
- Возвращает:
boolean Определяет, открыто ли в данный момент левое меню.
isOpenRight()
- Возвращает:
boolean Определяет, открыто ли в данный момент правое меню.
canDragContent([canDrag])
Параметр |
Тип |
Описание |
canDrag (необязательный) |
(boolean) |
Определяет, может или не может перетаскиваться контент для открытия боковых меню. |
- Возвращает:
boolean Определяет, можно ли перетаскивать контент для открытия боковых меню.
edgeDragThreshold(value)
Параметр |
Тип |
Описание |
value |
boolean|number |
Определяет, может ли быть начато перетаскивание контента только в том случае, если контент находится ниже определенного порогового расстояния от края экрана. Принимает три типа значений:
|
- Возвращает:
boolean Определяет, может ни быть начато перетаскивание только в пределах границ, определяемых краями экрана.
$getByHandle(handle)
Параметр |
Тип |
Описание |
handle |
строка (string) |
- Возвращает:
delegateInstance Экземпляр делегата, который управляет только
директивами ionSideMenus приведением delegate-handle в соответствие
данным обработчиком.
Пример: $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
Читать далееСлайд-бокс
Читать далееion-slides
ion-slides
Delegate: $ionicSlideBoxDelegate
Новая версия Ionic Slide Box, базирующаяся на Swiper виджет от idangerous.
Применение
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide-page>
<ion-slide-page>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide-page>
</ion-slides>
$scope.options = {
loop: false,
effect: fade,
speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
$scope.slider = $scope.data.slider;
})
ion-slide-box
Устаревший API
будет удален в следующем релизе Ionic, на смену придет новый компонент ion-slides. Не зависит от внутреннего поведения этого виджета.
Применение
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
строка (string) |
Метка, используемая для идентификации этого слайд-бокса с помощью $ionicSlideBoxDelegate. |
does-continue (необязательный) |
(boolean) |
Определяет, должен ли быть закольцован данный слайд-бокс. |
auto-play (необязательный) |
(boolean) |
Определяет, должен ли слайд-бокс выкатываться автоматически. По умолчанию "true", если для does-continue задан параметр "true". |
slide-interval (необязательный) |
число (number) |
Определяет, сколько миллисекунд длится ожидание между сменой слайдов (если для does-continue установлен параметр "true"). По умолчанию 4000. |
show-pager (необязательный) |
(boolean) |
Определяет, должен ли отображаться пейджер для данного слайд-бокса. Принимает выражения через show-pager="". По умолчанию "true". |
pager-click (необязательный) |
выражение (expression) |
Выражение, которое должно вызываться, когда происходит клик по пейджеру (если для show-pager установлен параметр "true"). Передается переменная 'index'. |
on-slide-changed (необязательный) |
выражение (expression) |
Выражение, которое вызывается всякий раз, когда меняется слайд. Передается переменная '$index'. |
active-slide (необязательный) |
выражение (expression) |
Модель, к которой должен быть привязан индекс текущего слайда. |
ion-slide
Дочерний элемент ionSlideBox
Отображает слайд внутри слайд-бокса.
Большее количество примеров находится в разделе ionSlideBox
.
Применение
<ion-slide-box>
<ion-slide>1</ion-slide>
<ion-slide>2</ion-slide>
</ion-slide-box>
Читать далее$ionicSlideBoxDelegate
Делегирует, что управляет директивой ionSlideBox
.
Вызываемые напрямую методы сервиса $ionicSlideBoxDelegate будут управлять всеми слайд-боксами. Используйте метод $getByHandle метод, управляющий указанными экземплярами слайд-бокса.
Применение
<ion-view>
<ion-slide-box>
<ion-slide>
<div class="box blue">
<button ng-click="nextSlide()">Next slide!</button>
</div>
</ion-slide>
<ion-slide>
<div class="box red">
Slide 2!
</div>
</ion-slide>
</ion-slide-box>
</ion-view>
function MyCtrl($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
}
Методы
update()
Обновляет слайд-бокс (например, если использовать Angular ng-repeat,
меняет размер слайд-бокса в соответствии с элементами, расположенными внутри него).
slide(to, [speed])
Параметр |
Тип |
Описание |
to |
число (number) |
Индекс, к которому нужно переместиться. |
speed (необязательный) |
число (number) |
Количество миллисекунд, за которые должно происходить изменение. |
enableSlide([shouldEnable])
Параметр |
Тип |
Описание |
shouldEnable (необязательный) |
логическое значение (boolean) |
Определяет, активировать ли переходы в слайд-боксе. |
- Возвращает:
boolean
previous([speed])
Переход к предыдущему слайду. Разворачивается в обратную сторону, если попадает на начало.
Параметр |
Тип |
Описание |
speed (необязательный) |
число number |
Количество миллисекунд, за которые должно происходить изменение. |
next([speed])
Переход к следующему слайду. Заворачивается назад, если это конец.
Параметр |
Тип |
Описание |
speed (необязательный) |
число (number) |
Количество миллисекунд, за которые должно происходить изменение. |
stop()
Прекращение переходов (слайдинга). slideBox останется без движения, пока
не получит команду возобновить возможность переходов.
start()
Снова начинаются переходы после того, как slideBox был остановлен.
currentIndex()
- Возвращает:
число number Индекс текущего слайда.
slidesCount()
- Возвращает:
number Число слайдов, имеющихся на данный момент.
$getByHandle(handle)
Параметр |
Тип |
Описание |
handle |
строка (string) |
- Возвращает: delegateInstance Экземпляр делегата, который управляет только директивами ionSlideBox приведением delegate-handle в соответствие с данным обработчиком.
Пример: $ionicSlideBoxDelegate.$getByHandle('my-handle').stop();
Спиннер
Читать далееion-spinner
Директива ionSpinner
предоставляет целый набор анимированных вращающихся элементов (спиннеров).
Вращающиеся иконки позволяют вам организовать с пользователями что-то типа обратной связи, чтобы они видели, что приложение работает/что-то обрабатывает/загружает. Вы можете отображать прохождение какого угодно процесса внутри приложения с помощью вращающейся иконки.
По умолчанию функция ionRefresher
использует этот спиннер, а не вращающиеся шрифтовые иконки (которые раньше были в составе ionicons).
Шрифтовые иконки прекрасно смотрятся вместе с простой графикой или с изображениями разных канцелярских предметов, но они не подходят для анимации более продвинутого уровня, поэтому Ionic теперь использует SVG-графику.
Ionic предлагает 10 готовых спиннеров. По умолчанию будет использоваться тот, который лучше всего подходит для той платформы, на которой он должен запускаться. Директива ionSpinner
динамически создает требуемый SVG-элемент, который позволяет фреймворку Ionic задействовать все десять анимированных SVG, чтобы размер не превышал 3 Кбайт.
В каждом вращающемся элементе (спиннере) используется анимация SVG (SMIL). Но для Android-спиннера также используется JavaScript.
Поэтому спиннеры работают и на Android 4.0-4.3. Кроме того, каждый спиннер может быть стилизован с помощью CSS
и отмасштабирован до любого размера.
Применение
Применение следующего кода будет запускать дефолтный спиннер для платформы, на которой ему нужно будет запускаться. Если это не iOS и не Android, то по умолчанию будет использоваться ios
.
<ion-spinner></ion-spinner>
Установкой атрибута icon
вы можете точно определить, какой спиннер нужно использовать, не обращая внимания на
платформу.
<ion-spinner icon="spiral"></ion-spinner>
Цвета
Как и в случае со многими другими компонентами Ionic, можно менять стиль спиннеров с
помощью стандартных кодов цвета, соответствующих соглашению о назначении имен. Например:
<ion-spinner class="spinner-energized"></ion-spinner>
Создание стиля SVG с помощью CSS
Есть одна очень приятная черта в SVG - это то, что можно менять стиль с помощью CSS! Некоторые свойства имеют разные названия, например, SVG использует термин stroke
вместо border
и fill
вместо background-color
.
.spinner svg {
width: 28px;
height: 28px;
stroke: #444;
fill: #444;
}
Вкладки
Читать далееion-tabs
Делает возможным использование интерфейса с вкладками и панелью вкладок, а также устанавливает "страницы", которые будут отображаться в виде вкладок.
Назначает элементу любой tabs class , чтобы определить, как он будет выглядеть и ощущаться.
В iOS вкладки появятся в нижней части экрана. В Android вкладки появятся в верхней части экрана под навигационной панелью. Должно быть соответствие дизайну каждой ОС, но можно менять конфигурацию с помощью $ionicConfigProvider
.
Более подробную информацию о вкладках см. в документации в разделе ionTab
.
individual tabs.
Примечание: не помещайте ion-tabs внутри элемента ion-content; есть информация, что это может
вызвать ошибку CSS.
Применение
<ion-tabs class="tabs-positive tabs-icon-top">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
</ion-tab>
</ion-tabs>
API
Атрибут |
Тип |
Описание |
delegate-handle (необязательный) |
(string) |
Метка, используемая для идентификации этих вкладок с помощью $ionicTabsDelegate. |
ion-tab
Содержит контент вкладки. Контент существует, пока выбрана данная вкладка.
Каждая ionTab имеет свою историю видов представления.
Применение
<ion-tab
title="Tab!"
icon="my-icon"
href="#/tab/tab-link"
on-select="onTabSelected()"
on-deselect="onTabDeselected()">
</ion-tab>
Полностью рабочий пример панели вкладок можно посмотреть в документации, в разделе ionTabs .
API
Атрибут |
Тип |
Описание |
title |
(string) |
Заголовок вкладки. |
href (необязательный) |
(string) |
Ссылка, после тапа, по которой будет осуществлен переход на эту вкладку. |
icon (необязательный) |
(string) |
Иконка вкладки. Если иконка есть, она станет дефолтной для icon-on и icon-off. |
icon-on (необязательный) |
(string) |
Иконка вкладки, если она выбрана. |
icon-off (необязательный) |
(string) |
Иконка (отсутствует). |
badge (необязательный) |
(expression) |
Значок (badge), который нужно поместить на эту вкладку (обычно это число). |
badge-style (необязательный) |
expression |
Стиль значка, который нужно добавить на эту вкладку (пример: badge-positive). |
on-select (необязательный) |
expression |
Вызывается, когда выбрана эта вкладка. |
on-deselect (необязательный) |
expression |
Вызывается, когда отменен выбор этой вкладки. |
ng-click (необязательный) |
expression |
По умолчанию вкладка выбирается кликом. Если установлен параметр ngClick, выбор вкладки не произойдет. Вы можете явно включить вкладки, используя $ionicTabsDelegate(). |
hidden (необязательный) |
expression |
к атрибуту hidden. |
disabled (необязательный) |
expression |
к атрибуту disabled. |
Читать далее
$ionicTabsDelegate
Делегат для управления директивой ionTabs
.
Вызываемые напрямую методы сервиса $ionicTabsDelegate будут управлять всеми директивами вкладок ionTabs.
директивы. Используйте метод $getByHandle
чтобы управлять указанными экземплярами ionList.
Применение
<body ng-controller="MyCtrl">
<ion-tabs>
<ion-tab title="Tab 1">
Hello tab 1!
<button ng-click="selectTabWithIndex(1)">Select tab 2!</button>
</ion-tab>
<ion-tab title="Tab 2">Hello tab 2!</ion-tab>
</ion-tabs>
</body>
function MyCtrl($scope, $ionicTabsDelegate) {
$scope.selectTabWithIndex = function(index) {
$ionicTabsDelegate.select(index);
}
}
Методы
select(index)
Выберите вкладку, подходящую к данному индексу.
Параметр |
Тип |
Описание |
index |
(number) |
Индекс вкладки, которую нужно выбрать. |
selectedIndex()
- Возвращает:
number Индекс выбранной вкладки, или -1.
showBar(show)
Set/get, определяющие отображается ionTabs или нет.
Параметр |
Тип |
Описание |
show |
(boolean) |
Определяет, отображать строку или нет. |
- Возвращает:
boolean Определяет, отображать строку или нет.
$getByHandle(handle)
Параметр |
Тип |
Описание |
handle |
(string) |
- Возвращает:
delegateInstance Экземпляр делегата, который управляет только
директивами ionTabs приведением delegate-handle в соответствие с
данным обработчиком.
Пример: $ionicTabsDelegate.$getByHandle('my-handle').select(0);
Тап и клик
Читать далеетап (tap)
На сенсорных устройствах, таких как смартфоны и планшеты, некоторые браузеры делают задержку, равную 300 мс, от момента, когда пользователь прекращает касаться дисплея до момента, когда браузер выполняет клик. Эта задержка была изначально введена для того, чтобы браузер мог понять, хочет ли пользователь детализировать изображение с помощью двойного клика по веб-странице. Обычно браузер ждет приблизительно 300 мс, чтобы определить,
будет ли пользователь делать двойной тап или же он коснулся экрана один раз.
Ionic (в своем виде "из коробки") автоматически убирает задержку в 300 мс, чтобы Ionic-приложения
чувствовали себя более "по-нативному". В результате, другие решения, такие как
fastclick и в Angular
ngTouch не должны использоваться, чтобы не вызывать конфликтов.
Некоторые браузеры уже умеют убирать задержку с помощью настроек, таких как свойство CSS
touch-events: none
или с помощью особых значений метатегов области просмотра. Однако каждый из этих
браузеров до сих пор обрабатывает клики по-разному, например, определяет, когда отменить или прекратить событие
(такое как прокрутка, когда целью является кнопка или долгое удерживание кнопки).
Для браузеров, в которых уже нет задержки в 300 мс, рассмотрите как вариант систему тапов Ionic.
Она может привести в норму то, как будут обрабатываться клики на разных устройствах - то есть, будет ожидаться ответ,
неважно, какое это устройство, платформа или версия. К тому же, Ionic будет предотвращать
"призрачные клики" (ghostclicks), которые случаются даже в тех браузерах, в которых убрана задержка.
В некоторых случаях третьесторонние библиотеки могут также работать, пока не будет касаний - touch events, которые могут
вступать в конфликт с tap-системой. Например, mapping-библиотеки, такие как Google или Leaflet Maps часто
запускают систему обнаружения касания, которая конфликтует с tap-системой Ionic.
Отключение tap-системы
Чтобы отключить тап для какого-то элемента и всего его дочерних элементов,
добавьте атрибут data-tap-disabled="true"
.
<div data-tap-disabled="true">
<div id="google-map"></div>
</div>
Дополнительная информация:
- Тап Ionic работает с JavaScript-прокруткой Ionic.
- Элементы могут приходить и уходить из DOM, а тап Ionic не будет продолжать добавлять и убирать
слушателей. - Не будет задержки тапа “tap delay” после первого "тапа" (вы можете "тапать" по экрану так быстро, как вы этого хотите, все касания будут считаться кликами)
- Слушатели минимальных событий добавляются только в документ
- Корректный фокус для каждого типа ввода ((select, textearea, range) на каждой платформе/устройстве
- Корректно отображает и прячет виртуальную клавиатуру для каждой платформы/устройства
- Работает с метками окружающих входных значений
- Не игнорирует клик, если пользователь сдвигает указатель мыши слишком далеко
- Добавляет и убирает "активированный" css-класс
- Многократное модульное тестирование для каждого сценария
Utility (Сервисная программа)
Читать далее$ionicConfigProvider
Ionic автоматически подхватывает конфигурации платформы, чтобы выполнить настройки параметров и
определить, какой стиль переходов нужно использовать, какие иконки вкладок отображать вверху или внизу. Например,
iOS будет идти вперед с помощью перехода во входящий вид по направлению справа к центру, а
выход из вида будет осуществляться из центра в левую сторону. На Android переходы будут выполняться по-другому: во входящий вид по направлению снизу к центру, закрывая предыдущий вид, который останется на месте. Следует отметить,
что когда платформа и не iOS, и не Android, то по умолчанию будет все происходить так, как для iOS. Поэтому если вы
разрабатываете десктопный браузер, в нем будет дефолтная конфигурация для iOS.
Эти конфигурации можно менять с помощью $ionicConfigProvider
во время фазы настройки
вашего приложения. Кроме того, $ionicConfig
может так же установить и получить требуемые для конфигурации значения во время фазы первого прогона приложения.
По умолчанию все базовые переменные для конфигурации устанавливаются как 'platform'
, что означает, что
будут подхвачены параметры конфигурации, дефолтные для той платформы, на которой запущено приложение. Параметры конфигурации могут быть настроены на этом
уровне, и получится, что на всех платформах будут одинаковые настройки, а не разные конфигурации для каждой из них.
Установить одинаковые переменные конфигурации для всех платформ можно с помощью этого кода:
$ionicConfigProvider.views.maxCache(10);
Кроме того, каждая платформа может иметь собственную конфигурациб в пределах свойства $ionicConfigProvider.platform
. Конфигурация, приведенная ниже, подойдет только для Android-устройств.
$ionicConfigProvider.platform.android.views.maxCache(5);
Применение
var myApp = angular.module('reallyCoolApp', ['ionic']);
myApp.config(function($ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(5);
// note that you can also chain configs
$ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});
Методы
Методы
views.transition(transition)
Стиль анимации при переходе между видами представления. Дефолтная платформа (platform).
Параметр |
Тип |
Описание |
transition |
строка (string) |
Определяет, какой стиль перехода от вида к виду использовать.
|
- Возвращает:
string значение
views.maxCache(maxNumber)
Максимальное число элементов вида, которое нужно кэшировать в DOM. Когда максимальное число превышено,
вид, к которому дольше всего не было доступа, будет убран. У видов представления, которые
остаются в DOM, кэшируется область видимости, текущее состояние и положение прокрутки. Область видимости
отключается от цикла $watch, когда она сохраняется в кэше и подключается снова, когда она опять входит.
Когда максимальный кэш - 0, элемент уходящего вида будет убираться из DOM после
каждого перехода. В следующий раз будет отображаться тот же самый вид, он будет скомпилирован заново,
подключен к DOM, и элемент снова будет в его структуре. На самом деле кэширования происходить не будет.
Параметр |
Тип |
Описание |
maxNumber |
число (number) |
Максимальное число видов, которое нужно сохранять. По умолчанию 10. |
- Возвращает:
number Сколько видов Ionic будет сохранять пока вид не будет убран.
views.forwardCache(value)
По умолчанию, во время осуществления навигации виды, которые недавно были активными, будут помещаться в кэш,
а те же самые данные экземпляра и элементы DOM получат ссылки, по которым к ним можно будет вернуться еще раз. Однако, когда будет совершаться переход к предыдущим видам, сохраненным в истории, "следующие" за ними виды будут убраны из кэша. Если вы переходите вперед, к тому же самому виду, будет создано новый элемент DOM и экземпляр
контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Установите для данной конфигурации параметр true, чтобы "следующие" виды помещались в кэш и не устанавливались заново при каждой загрузке.
Параметр |
Тип |
Описание |
value |
(boolean) |
- Возвращает:
логическое значение (boolean)
scrolling.jsScrolling(value)
Определяет, использовать прокрутку JS или нативную. По умолчанию задается нативная прокрутка. Настройка на
true будет иметь тот же самый эффект, что и настройка каждого ion-content на overflow-scroll='false'.
Параметр |
Тип |
Описание |
value |
(boolean) |
По умолчанию используется false как в Ionic 1.2 |
- Возвращает:
логическое значение (boolean)
backButton.icon(value)
Иконка кнопки возврата.
Параметр |
Тип |
Описание |
value |
строка (string) |
- Возвращает:
строка (string)
backButton.text(value)
Текст кнопки возврата.
Параметр |
Тип |
Описание |
value |
строка (string) |
По умолчанию Back. |
- Возвращает:
строка (string)
backButton.previousTitleText(value)
Если текст предыдущего заголовка должен стать текстом кнопки возврата. Это
является параметром по умолчанию для iOS.
Параметр |
Тип |
Описание |
value |
(boolean) |
- Возвращает:
логическое значение (boolean)
form.checkbox(value)
Стиль оформления чекбокса. По умолчанию в Android используются квадратики, в iOS кружочки.
Параметр |
Тип |
Описание |
value |
строка (string) |
- Возвращает:
строка (string)
form.toggle(value)
Стиль toggle-переключателя. В Android по умолчанию используется small, а в iOS по умолчанию используется large.
Параметр |
Тип |
Описание |
value |
строка (string) |
- Возвращает:
строка (string)
spinner.icon(value)
Иконка вращающегося элемента, которая должна использоваться по умолчанию.
Параметр |
Тип |
Описание |
value |
строка (string) |
Может быть:android, ios, ios-small, bubbles, circles, crescent, dots, lines, ripple, or spiral. |
- Возвращает:
строка (string)
tabs.style(value)
Стиль оформления вкладки. В Android по умолчанию используется striped, а в iOS по умолчанию используется standard.
Параметр |
Тип |
Описание |
value |
строка (string) |
Доступные значения это striped и standard. |
- Возвращает:
строка (string)
tabs.position(value)
Позиция вкладки. В Android по умолчанию используется top , а в iOS по умолчанию используется bottom.
Параметр |
Тип |
Описание |
value |
строка (string) |
Возможные значения – это top и bottom. |
- Возвращает:
строка (string)
templates.maxPrefetch(value)
Устанавливает максимальное число шаблонов, которые будут предварительно выбраны из templateUrls, заданного в
$stateProvider.state. Если настроено на 0, пользователю придется ждать,
пока будет произведена первая выборка шаблона при переходе на новую страницу. По умолчанию 30.
Параметр |
Тип |
Описание |
value |
(integer) |
Максимальное число шаблонов, которые будут предварительно выбраны из templateUrls, заданного в $stateProvider.state(). |
- Возвращает:
целое число (integer)
navBar.alignTitle(value)
Определяет, по какой стороне навигационной панели выравнивать заголовок. По умолчаниюcenter (по центру).
Параметр |
Тип |
Описание |
value |
(string) |
сторона навигационной панели, по которой нужно выравнивать заголовок.
|
- Возвращает:
значение string (строка)
navBar.positionPrimaryButtons(value)
По какой стороне навигационной панели выравнивать основные кнопки этой панели. По умолчаниюleft.
Параметр |
Тип |
Описание |
value |
(string) |
сторона навигационной панели, по которой нужно выравнивать основные кнопки навигационной панели.
|
- Возвращает:
значение string (строка)
navBar.positionSecondaryButtons(value)
По какой стороне навигационной панели нужно выравнивать второстепенные кнопки навигационной панели. По умолчанию right.
Параметр |
Тип |
Описание |
value |
(string) |
сторона навигационной панели, по которой нужно выравнивать второстепенные кнопки навигационной панели.
|
- Возвращает:
string значение
ionic.Platform
Набор методов сервисной программы, которые могут быть использованы для того чтобы подготовить устройство и
извлечь много другой информации, например, что это за платформа, на которой в текущий момент устанавливается приложение.
Применение
angular.module('PlatformApp', ['ionic'])
.controller('PlatformCtrl', function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});
Методы
ready(callback)
Запускает обратный вызов (callback), как только устройство готово, или немедленно,
если устройство уже готово. Этот метод может быть запущен
откуда угодно и не требует "заворачивания" в какие-то другие дополнительные методы.
Когда приложение находится в пределах WebView (Cordova), оно запустит
обратный вызов (callback) сразу же, как только устройство будет готово. Если приложение находится в
веб-браузере, оно запустить обратный вызов (callback) после window.load
.
Пожалуйста, не забывайте о том, что компоненты Cordova (Camera, FileSystem и т.д.) пока
не работают в веб-браузере.
Параметр |
Тип |
Описание |
callback |
|
Функция, которую нужно вызвать. |
setGrade(grade)
Устанавливает ранг устройства: ‘a’, ‘b’ или ‘c’. ‘a’ является лучшим
(активно большинство css-функций), ‘c’ является худшим. По умолчанию устанавливает ранг
в зависимости от текущего устройства.
Параметр |
Тип |
Описание |
grade |
|
Новый ранг, который нужно установить. |
device()
Возврат текущего устройства (дается по cordova).
- Возвращает:
object
Объект устройства.
isWebView()
- Возвращает:
boolean
Проверяет, не происходит ли работа в пределах WebView (как, например, Cordova).
isIPad()
- Возвращает:
boolean
Определяет, не осуществляется ли работа приложения на iPad.
isIOS()
- Возвращает:
boolean
isAndroid()
- Возвращает:
boolean
Определяет, не осуществляется ли работа приложения на Android.
isWindowsPhone()
- Возвращает:
boolean
Определяет, не осуществляется ли работа приложения на Windows Phone.
isEdge()
- Возвращает:
boolean
Определяет, не осуществляется ли работа приложения наMS Edge/Windows 10 (в том числе Phone)
platform()
- Возвращает:
string
Название текущей платформы.
version()
- Возвращает:
number
Версия платформы текущего устройства.
is(Platform)
Параметр |
Тип |
Описание |
Platform |
|
name. |
- Возвращает:
boolean
Определяет, принято ли предоставленное название платформы.
exitApp()
Выходит из приложения.
showStatusBar(shouldShow)
Отображает или скрывает строку статуса устройства (в Cordova). Требует cordova plugin add org.apache.cordova.statusbar
Параметр |
Тип |
Описание |
shouldShow |
|
Определяет, отображать или нет строку статуса. |
fullScreen([showFullScreen], [showStatusBar])
Устанавливает, работает ли приложение в полноэкранном режиме или нет (в Cordova).
Параметр |
Тип |
Описание |
showFullScreen (необязательный) |
|
Определяет, настраивать ли приложение для работы в полноэкранном режиме. По умолчанию "true". Требует |
showStatusBar (необязательный) |
|
Определяет, отображать или нет строку статуса устройства. По умолчанию "false". |
Свойства
· boolean
isReady
Определяет, готово ли устройство.
· boolean
isFullScreen
Определяет, работает ли устройство в полноэкранном режиме.
· Array(string)
platforms
Массив всех найденных платформ.
· string
grade
К какому рангу принадлежит текущая платформа.
Читать далееionic.DomUtil
Методы
requestAnimationFrame(callback)(альтернативное имя: ionic.requestAnimationFrame)
ВызываетrequestAnimationFrameили полизаполнение, если это не доступно.
Параметр |
Тип |
Описание |
callback |
function |
Функция, которая будет вызвана, когда произойдет следующий кадр. |
animationFrameThrottle(callback)(альтернативное имя: ionic.animationFrameThrottle)
При осуществлении обратного вызова, если эта операция происходит 100 раз между
кадрами анимации, добавление Throttle (дросселя) сделает так, что будет выполнен последний
из 100 вызовов.
Параметр |
Тип |
Описание |
callback |
function |
функция, которую нужно регулировать к requestAnimationFrame |
- Возвращает:
function Функция, которая затем вызовет переданную в обратном вызове.
Переданная в обратном вызове получит контекст, с помощью которого была вызвана
возвращенная функция.
getPositionInParent(element)
Находит смещение прокрутки элемента в пределах контейнера.
Параметр |
Тип |
Описание |
element |
DOMElement |
Элемент, смещение которого нужно найти. |
- Возвращает:
object Объект положения со следующими свойствами: - {number} left Сдвиг элемента влево.
- {number} top Сдвиг элемента вверх.
ready(callback)
Вызывает функцию, когда DOM готов, или если он уже готов,
вызывает функцию немедленно.
Параметр |
Тип |
Описание |
callback |
function |
Функция, которую нужно вызвать. |
getTextBounds(textNode)
Получает rect-функцию, представляющую границы данного textNode.
Параметр |
Тип |
Описание |
textNode |
DOMElement |
textNode, границы которого нужно найти. |
- Возвращает:
object Объект, представляющий границы узла. Свойства: - {number} left Левая позиция textNode.
- {number} right Правая позиция textNode.
- {number} top Верхняя позиция textNode.
- {number} bottom Нижняя позиция textNode.
- {number} width Ширина textNode.
- {number} height Высота textNode.
getChildIndex(element, type)
Получает первый индекс дочернего узла в пределах данного элемента
заданного типа.
Параметр |
Тип |
Описание |
element |
DOMElement |
Элемент, индекс которого нужно найти. |
type |
строка string |
nodeName, по которому нужно согласовывать дочерние элементы. |
- Возвращает:
number Индекс, или -1 дочернего элемента с nodeName соответствующего типа.
getParentWithClass(element, className)
Параметр |
Тип |
Описание |
element |
DOMElement |
|
className |
строка string |
- Возвращает:
DOMElement Самый близкий родительский элемент, подходящий по параметру
className или пустое значение.
getParentOrSelfWithClass(element, className)
Параметр |
Тип |
Описание |
element |
DOMElement |
|
className |
строка string |
- Возвращает:
DOMElement Самый близкий родительский или свой элемент, подходящий по параметру
className или пустое значение.
rectContains(x, y, x1, y1, x2, y2)
Параметр |
Тип |
Описание |
x |
число number |
|
y |
число number |
|
x1 |
число number |
|
y1 |
число number |
|
x2 |
число number |
|
y2 |
число number |
- Возвращает:
boolean Определяет, вписывается ли {x,y} в границы прямоугольника, определяемого
{x1,y1,x2,y2}.
blurAll()
Затемняет любой текущий элемент ввода, который находится в фокусе
- Возвращает:
DOMElement Затемненный элемент или пустое значение
ionic.EventController
Методы
trigger(eventType, data, [bubbles], [cancelable])(альтернативное имя: ionic.trigger)
Параметр |
Тип |
Описание |
eventType |
строка string |
Событие, которое нужно запустить. |
data |
объект object |
Данные для события. Подсказка: передает{target: targetElement} |
bubbles (необязательный) |
логическое значение boolean |
Определяет, должно ли событие перенаправляться в DOM. |
cancelable (отменяемое) (необязательный) |
логическое значение boolean |
Определяет, должно ли событие быть отменяемым. |
on(type, callback, element)(альтернативное имя: ionic.on)
Слушает событие на элементе.
Параметр |
Тип |
Описание |
type |
строка string |
Событие, которое нужно слушать. |
callback |
function |
Слушатель, который нужно вызвать. |
element |
DOMElement |
Элемент, на который нужен слушатель событий. |
off(type, callback, element)(альтернативное имя: ionic.off)
Убирает слушатель событий.
Параметр |
Тип |
Описание |
type |
строка string |
|
callback |
function |
|
element |
DOMElement |
onGesture(eventType, callback, element, options)(альтернативное имя: ionic.onGesture)
Добавляет на элемент слушатель событий для жеста.
Доступные типы eventTypes (из hammer.js):
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown,
dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight,
transform, transformstart, transformend, rotate, pinch, pinchin, pinchout,
touch, release
Параметр |
Тип |
Описание |
eventType |
строка string |
Событие жеста, которое нужно слушать. |
callback |
function(e) |
Функция, которая будет вызвана, когда произойдет жест. |
element |
DOMElement |
Элемент Angular для слушания размещенного на нем события. |
options |
объект object |
объект object. |
- Возвращает:
ionic.Gesture Объект жеста (используйте это для того, чтобы потом убрать жест).
offGesture(gesture, eventType, callback)(альтернативное имя: ionic.offGesture)
Убирает слушатель события для жеста, созданный на элементе.
Параметр |
Тип |
Описание |
gesture |
ionic.Gesture |
Жест, который нужно убрать. |
eventType |
строка string |
Событие жеста, для которого нужно убрать слушатель. |
callback |
function(e) |
Слушатель, который нужно убрать. |
$ionicPosition
Набор методов сервисной программы, которые могут быть использованы для того чтобы извлечь позицию элементов DOM.
Предполагается, что это будет использовано там, где нам нужно будет узнать абсолютную позицию элементов DOM по
отношению к другим, существующим элементам (это случай, актуальный для справочных надписей, вспомогательных экранов и т.д.).
Взято из AngularUI Bootstrap,
(лицензия)
Методы
position(element)
Получает текущие координаты элемента относительно к сдвинутому элементу родителя.
Эквивалент read-only функции выбора позиции jQuery.
Параметр |
Тип |
Описание |
element |
element |
element to. |
- Возвращает:
object Возвращает объект, содержащий свойства верх, лево, ширина и высота.
offset(element)
Получает текущие координаты элемента, по отношению к документу.
Эквивалент read-only функции сдвига jQuery’.
Параметр |
Тип |
Описание |
element |
element |
Элемент, для которого нужно получить параметры сдвига. |
- Возвращает:
object Возвращает объект, содержащий свойства верх, лево, ширина и высота.