Atualizar:

jQuery Mobile 1.4

Os events a seguir foram reprovados e serão removidos no jQuery Mobile 1.5:

1. pageshow

   • Substituição: pagecontainershow

   • Uso: É usado para recuperar o id da página anterior.

      $(document).on("pagecontainershow", function (e, ui) { var previous = ui.prevPage; }); 

   • Este evento não pode ser anexado a um ID de página específico.

   • Recomendação: Use pagebeforeshow para append events a páginas específicas.
     

     Demonstração

2. pagehide

   • Substituição: pagecontainerhide

   • Uso: É usado para recuperar o id da próxima página.

      $(document).on("pagecontainerhide", function (e, ui) { var next = ui.nextPage; }); 

   • Este evento não pode ser anexado a um ID de página específico.

   • Recomendação: Use pagebeforehide para append events a páginas específicas.
     

     Demonstração

3. pageinit

   • Substituição: pagecreate

jQuery Mobile 1.3.2 e abaixo

^{Alguns events estão obsoletos, verifique a atualização}

Introdução:

O jQuery Mobile usa a navegação Ajax para carregar páginas / visualizações no DOM (pagecontainer), aprimorar (estilo) as mesmas e, em seguida, exibi-las sob solicitação. Uma página passa por várias etapas (events de página) desde o momento em que é inserida no DOM até ser removida. Isso se aplica a ambos os modelos, Single-Page e Multi-Page .

Eventos:

Eu vou passar por events essenciais e mais usados ​​em sua ordem seqüencial.

• mobileinit : ⁽¹⁾

  O primeiro evento que é acionado quando um site usando o jQM é carregado. O jQM consiste em muitos widgets que possuem opções padrão. Esses widgets não são iniciados durante esse evento, portanto, você pode replace as Configurações Globais / padrões desses widgets quando esse evento for triggersdo.

  Importante: Seu código deve ir depois do jQuery.js e antes do jQM.js para alterar com sucesso os padrões.

• pagebeforecreate e pagecreate : ⁽¹⁾

  Esses events são quase os mesmos. Durante eles, os widgets são inicializados automaticamente e começam a melhorar a marcação do conteúdo. Eles são úteis para replace os padrões do widget de um elemento específico.

   $(document).on("pagecreate", "[data-role=page]", function () { $(".selector").listview({ icon: "star" }); // changes list items icons to "star" }); 

• pageinit : ^{(1) (4)}

  Isso é semelhante a .ready() e é acionado uma vez por página quando é totalmente inicializado e estilizado, mas ainda não é visualizado. Use-o para vincular events a essa página que está sendo inicializada. Se você não especificar uma página, você receberá vários events toda vez que ocorrer uma pageinit .

   $(document).on("pageinit", "#myPage" , function () { $(this).on("swipeleft", function () { // code }); }); 

• pagebeforechange : ⁽²⁾

  Ele triggers duas vezes para uma página que não foi visualizada antes e outra para uma página em cache / visualizada. Ele omite um object de dados toPage e options , eles contêm todos os detalhes relacionados à página que será visualizada. É muito útil saber que o usuário veio da página X e vai para a página Y. Durante esse evento, você pode impedir que o usuário exiba a página Y e leve-o à página Z.

   $(document).on("pagebeforechange", function (e, data) { if(data.toPage[0].id == "Y") { $.mobile.changePage("Z"); e.preventDefault(); // don't update $.mobile.urlHistory } }); 

• pagebeforehide : ⁽³⁾

  É acionado na página ativa atual X, mas antes da transição / animação da página.

• pagebeforeshow : ⁽³⁾

  Ele triggers na página Y que será mostrada após a página atual, mas ainda sem transição / animação.

• pageshow : ^{(3) (4)}

  A transição / animação é feita e a página Y é mostrada.

• pagehide : ^{(3) (4)}

  Transição / animação é feita na página X e está oculta.

Demonstração

Diagramas (jQM 1.4) ⁽⁵⁾

^{(1) triggers uma vez.}

^{(2) triggers duas vezes para nova página e uma vez para a página em cache.}

^{(3) triggers sempre que ocorre.}

^{(4) Depreciado a partir do jQM 1.4 e será removido no jQM 1.5}

^{(5) Recurso: PageContainer Events link 1 e link 2}