Evento da Página do jQuery Mobile

Evento da Página do jQuery Mobile

Os eventos relacionados à página no jQuery Mobile são divididos em quatro categorias:

  • Inicialização da Página - Antes da criação da página, quando a página é criada e após a inicialização da página
  • Carregamento/Descarga de Página - Quando a página externa é carregada, descarregada ou falha
  • Transição de Página - Antes e após a transição da página
  • Mudança de Página - Quando a página é alterada ou falha

Para informações completas sobre todos os eventos do jQuery Mobile, acesse nosso Manual de Referência de Eventos do jQuery Mobile.

Evento de Inicialização do jQuery Mobile

Quando uma página típica do jQuery Mobile está sendo inicializada, ela passa por três fases:

  • Antes da criação da página
  • Criação da página
  • Inicialização da página

Todos os eventos acionados em cada fase podem ser usados para inserir ou operar código.

Evento Descrição
pagebeforecreate Quando a página está prestes a ser inicializada e antes que o jQuery Mobile comece a melhorar a página, aciona este evento.
pagecreate Quando a página já foi criada, mas antes de ser completada a melhoria, aciona este evento.
pageinit É acionado quando a página já foi inicializada e o jQuery Mobile completou a melhoria da página.

O exemplo a seguir demonstra quando cada evento é acionado ao criar uma página no jQuery Mobile:

Exemplo

$(document).on("pagebeforecreate",function(event){
  alert("Evento pagebeforecreate acionado!");
}); 
$(document).on("pagecreate",function(event){
  alert("Evento pagecreate acionado!");
});
$(document).on("pageinit",function(event){
  alert("Evento pageinit acionado!");
});

Experimente por Si Mesmo

Eventos de Carregamento do jQuery Mobile

Os eventos de carregamento de página pertencem às páginas externas.

Independentemente de quando a página externa for carregada no DOM, dois eventos são acionados. O primeiro é pagebeforeload, o segundo é pageload (sucesso) ou pageloadfailed (falha).

A tabela a seguir explica esses eventos:

Evento Descrição
pagebeforeload É acionado antes de qualquer solicitação de carregamento de página.
pageload É acionado após a página ser carregada com sucesso e ser inserida no DOM.
pageloadfailed Se a solicitação de carregamento da página falhar, esse evento é acionado. Por padrão, será exibida a mensagem "Error Loading Page".

A seguir, é demonstrado o funcionamento dos eventos pageload e pageloadfailed:

Exemplo

$(document).on("pageload",function(event,data){
  alert("Evento pageload acionado!\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("Desculpe, a página solicitada não existe.");
});

Experimente por Si Mesmo

Eventos de Transição do jQuery Mobile

Também podemos usar eventos ao passar de uma página para a próxima.

A transição de página envolve duas páginas: uma página "vindo" e uma página "indo" - essas transições tornam o processo de mudança da página ativa (página "vindo") para a nova página (mudança de página "indo") mais dinâmica.

Evento Descrição
pagebeforeshow No página "indo", antes do início da animação de transição.
pageshow No página "indo", após a conclusão da animação de transição.
pagebeforehide No página "vindo", antes do início da animação de transição.
pagehide No página "vindo", após a conclusão da animação de transição.

A seguir, é demonstrado o funcionamento do tempo de transição:

Exemplo

$(document).on("pagebeforeshow","#pagetwo",function(){ // Quando entrar na página dois
  alert("A página dois está prestes a ser exibida");
});
$(document).on("pageshow","#pagetwo",function(){ // Quando entrar na página dois
  alert("Agora a página dois está visível");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // Quando sair da página dois
  alert("A página dois está prestes a ser oculta");
});
$(document).on("pagehide","#pagetwo",function(){ // Quando sair da página dois
  alert("Agora a página dois está oculta");
});

Experimente por Si Mesmo