События страниц jQuery Mobile

События страниц jQuery Mobile

События, связанные с страницей в jQuery Mobile, делятся на четыре категории:

  • Инициализация страницы - до создания страницы, в момент создания страницы и после ее инициализации
  • Загрузка/Выгрузка страницы - при загрузке, выгрузке внешней страницы или встречении ошибки
  • Переключение страницы - до и после перехода страницы
  • Изменение страницы - когда страница изменяется или встречает ошибку

Для получения полной информации о всех событиях jQuery Mobile посетите наш Руководство по событиям jQuery Mobile.

Событие инициализации jQuery Mobile

Когда стандартная страница в jQuery Mobile инициализируется, она проходит через три этапа:

  • До создания страницы
  • Создание страницы
  • Инициализация страницы

События, срабатывающие на каждом этапе, можно использовать для вставки или обработки кода.

Событие Описание
pagebeforecreate Когда страница должна быть инициализирована, и до того, как jQuery Mobile начнет улучшение страницы, срабатывает это событие.
pagecreate Когда страница уже создана, но до завершения улучшения, срабатывает это событие.
pageinit Событие триггерится, когда страница уже инициализирована, и jQuery Mobile完成了 улучшение страницы.

Следующий пример демонстрирует, когда в jQuery Mobile триггерятся различные события при создании страницы:

Пример

$(document).on("pagebeforecreate",function(event){
  alert("Триггер событие pagebeforecreate!");
}); 
$(document).on("pagecreate",function(event){
  alert("Триггер событие pagecreate!");
});
$(document).on("pageinit",function(event){
  alert("Триггер событие pageinit!");
});

Попробуйте сами

jQuery Mobile Load события

События загрузки относятся к внешним страницам.

Независимо от того, когда внешняя страница загружается в DOM, будут триггериться два события. Первый - pagebeforeload, второй - pageload (успешно) или pageloadfailed (неуспешно).

В таблице ниже объясняются эти события:

Событие Описание
pagebeforeload Триггерится до того, как будет сделан какой-либо запрос на загрузку страницы.
pageload Триггерится после успешной загрузки и вставки страницы в DOM.
pageloadfailed Если запрос на загрузку страницы失败, событие триггерится. По умолчанию, отображается сообщение "Error Loading Page".

Следующее демонстрирует принцип работы событий pageload и pageloadfailed:

Пример

$(document).on("pageload",function(event,data){
  alert("Триггер событие pageload!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Извините, запрашиваемая страница не существует.");
});

Попробуйте сами

jQuery Mobile переходные события

Мы также можем использовать события при переходе от одной страницы к другой.

Переходы страниц involve две страницы: одну "incoming" и одну "outgoing" - эти переходы делают процесс изменения текущей активной страницы (страница "incoming") в новую страницу (страницу "outgoing") более динамичным.

Событие Описание
pagebeforeshow Триггерится на странице "outgoing", до начала анимации перехода.
pageshow Триггерится на странице "outgoing", после завершения анимации перехода.
pagebeforehide Триггерится на странице "incoming", до начала анимации перехода.
pagehide Триггерится на странице "incoming", после завершения анимации перехода.

Следующее демонстрирует принцип работы времени перехода:

Пример

$(document).on("pagebeforeshow","#pagetwo",function(){ // При входе в страницу два
  alert("Страница 2 скоро будет отображена");
});
$(document).on("pageshow","#pagetwo",function(){ // При входе в страницу два
  alert("Теперь отображается страница два");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // При выходе из страницы два
  alert("Страница два будет скрыта");
});
$(document).on("pagehide","#pagetwo",function(){ // При выходе из страницы два
  alert("Теперь страница два скрыта");
});

Попробуйте сами