Configurando o script do jQuery Mobile

Eu sou novo no jQuery mobile. Eu sei perfeitamente como fazer referência a todos os meus scripts e arquivos CSS. Mas agora estou um pouco confuso sobre como incorporar meu próprio código. Tomemos por exemplo quando codificamos o jQuery normal que usamos:

$(document).ready(function (){ // we embedded codes here }); 

Mas para o jQuery Mobile eu tenho um código que eu uso:

 $(document).bind('pageinit',function (){ }); 

Então eu insiro todo o meu código dentro.

Todo o código deveria estar no bind? Eu estou apenas um pouco confuso sobre isso ou quando eu devo incorporar um código dentro do bind? É o código que eu quero executar quando a página é carregada?

Qual é a diferença entre o mobileinit e o pageinit?

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 : (1)

    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 : (1)

    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 : (2)

    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 : (3)

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

  • pagebeforeshow : (3)

    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) (5)

Modelo de várias páginas


Modelo de Página Única

(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