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
pageshow
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.
pagebeforeshow
para append events a páginas específicas.Demonstração
pagehide
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.
pagebeforehide
para append events a páginas específicas.Demonstração
pageinit
pagecreate
jQuery Mobile 1.3.2 e abaixo
Alguns events estão obsoletos, verifique a atualizaçã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 .
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
(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