$(document).on("pagecreate","#mypagetest",function(){
  $("span").on("click",function(){
    $(this).hide();
  });                       
});

No código acima, o #mypagetest parâmetro refere-se ao ID da página que especifica o evento da página. Também o em() O método é usado para anexar os manipuladores de eventos.

Ademais, sua simplicidade permite que os desenvolvedores dividam seus aplicativos em várias páginas. Com a estrutura, os desenvolvedores podem “escrever menos e fazer mais”.

2. Aprimoramento progressivo e degradação graciosa

Aprimoramento progressivo e degradação graciosa são os principais recursos que impulsionam a agilidade do jQuery Mobile. Eles permitem que ele suporte dispositivos de ponta e menos capazes (por exemplo, aqueles sem suporte a JavaScript).

A estrutura permite que os desenvolvedores criem aplicativos que podem ser acessados ​​pelo maior número de navegadores e dispositivos, seja o Internet Explorer 6 ou o mais novo Android ou iPhone.

O jQuery móvel também oferece aos desenvolvedores a capacidade de renderizar conteúdo básico (conforme construído) em dispositivos básicos. E as plataformas e navegadores mais sofisticados serão enriquecidos cada vez mais usando JavaScript e CSS adicionais vinculados externamente.

3. Suporte para entradas amigáveis

Durante o desenvolvimento móvel do jQuery, os desenvolvedores podem incluir um API para oferecer suporte a funcionalidades de entrada de usuário baseadas em foco, toque e mouse. Vários tipos de elementos de formulário com estilo fácil de usar e fáceis de tocar também estão incluídos na estrutura.

Os exemplos incluem elementos de caixa de seleção e rádio, controle deslizante, filtragem de pesquisa e elementos de seleção de menu. Ademais, cada um dos elementos do formulário inclui uma versão ‘mini’ alternativa, que pode ser facilmente incorporada às páginas da web para celular.

Por exemplo, veja como criar um botão de caixa de seleção usando o jQuery Mobile. Observe que o data-mini = “true” O atributo é adicionado para criar uma mini versão do botão.

Além de tudo isso, para garantir que a experiência do usuário seja otimizada em dispositivos móveis, a estrutura possui um sistema de navegação rico em Ajax que permite que as transições de páginas animadas ocorram perfeitamente.

Com os eventos de transição do jQuery Mobile, você pode animar a transição da página ativa atual para a nova página.

Por exemplo, você pode usar o pagebeforeshow evento (acionado na página “para”) e o ocultar evento (acionado na página “de”) ao fazer a transição de uma página para a seguinte. Ambos os eventos são acionados antes do início da animação de transição.

Vamos ver como eles podem ser aplicados:

$(document).on("pagebeforeshow","#myfirstpage",function(){ 
    
    // When entering myfirstpage
    
  alert("myfirstpage is about to appear");
    
});

$(document).on("pagebeforehide","#myfirstpage",function(){ 
    
    // When leaving myfirstpage
    
  alert("myfirstpage is about to disappear");
});

4. Acessibilidade

Além de seus recursos de plataforma cruzada, o jQuery for mobile foi criado com uma forte consideração pela acessibilidade.

A estrutura vem com suporte para Aplicativos Acessíveis da Internet Ricos (WAI-ARIA) para ajudar pessoas com deficiência usando leitores de tela e outras tecnologias assistivas a acessar facilmente as páginas da web.

5. tamanho leve

O tamanho leve do jQuery móvel (cerca de 40 KB quando reduzido) aumenta sua rapidez. Ademais, o fato de empregar dependências mínimas de imagem também acelera bastante seus recursos.

6. Widgets Theming e UI

O jQuery Mobile possui um sistema de temas embutido que permite que os desenvolvedores determinem seu próprio estilo de aplicativo. Com o jQuery Mobile Themeroller, os desenvolvedores podem personalizar efetivamente seus aplicativos de acordo com suas cores, gostos e preferências.

A estrutura também vem com vários widgets inovadores de plataforma cruzada que permitem que os desenvolvedores criem aplicativos mais personalizados.

Alguns dos widgets disponíveis são barras de ferramentas persistentes, botões, caixas de diálogo e o widget pop-up comumente usado.

7. Responsividade

A capacidade de resposta total da estrutura permite que as mesmas bases de código subjacentes se ajustem confortavelmente em diferentes tipos de telas, de dispositivos móveis a telas de tamanho de desktop.

Estrutura básica da página do jQuery Mobile

A estrutura do jQuery Mobile possui todos os componentes e atributos da interface do usuário necessários para a criação de aplicativos e sites da web móveis fáceis de usar e ricos em recursos de todos os tipos – básicos ou avançados.

Você pode usar o jQuery mobile para criar páginas da Web, vários tipos de exibições de lista, barras de ferramentas, uma ampla variedade de elementos e botões de formulário, diálogos e outras funcionalidades.

Importante, como o jQuery Mobile é criado sobre o núcleo do jQuery, permite que os desenvolvedores aproveitem o código da interface do usuário do jQuery e acessem os principais recursos. Isso inclui animação robusta e efeitos de imagem para páginas da Web, manipulação de DOM, manipulação de eventos e Ajax para comunicação com o servidor.

Vamos ver como é o código de desenvolvimento móvel do jQuery.

Por exemplo, nesta época da pandemia do COVID-19, quando a maioria das pessoas trabalha em casa ou espaços de trabalho conjunto, vamos criar uma página da Web simples que demonstre alguns erros de gerenciamento de equipe que as pessoas cometem.

Aqui está o código:





  Exemplo de jQuery Mobile
  
  
  
  



  

    

      
Amostra para celular jCCery da fCC

    

    

      
COVID-19 Erros no gerenciamento da equipe de trabalho em casa para evitar

    

    

    
    
    
    
    
    
    
    
    
    
    
    
      
    alfrickopidi.com, 2020 - direitos autorais

    Aqui está a saída quando as linhas de código jQuery móveis acima são abertas em um navegador:

    Notavelmente, quando o navegador diminui ou aumenta, o tamanho dos itens da lista também se ajusta de maneira apropriada. Portanto, a página da web pode ser acessada facilmente em vários dispositivos com diferentes resoluções de tela sem se preocupar com a falta de consistência. O tamanho dos itens será alterado de acordo com o tipo de dispositivo.

    Como você pode ver no exemplo de código acima, o documento é um HTML5 simples que inclui três itens a seguir:

    • Arquivos do CSS do jQuery Mobile (jquery.mobile-1.4.5.min.css)
    • Arquivos do repositório jQuery (jquery-1.11.1.min.js)
    • Arquivos do repositório jQuery Mobile (jquery.mobile-1.4.5.min.js)

    Esses arquivos estão diretamente vinculados à CDN do jQuery. Outra alternativa é seguir para o página de download para obter esses arquivos e hospedá-los em um servidor privado.

    Importante, incluindo o metatag “viewport” durante o desenvolvimento móvel do jQuery instrui os dispositivos que a largura da página e a largura da tela do dispositivo são equivalentes (largura = largura do dispositivo).

    A tag também instrui o navegador a aumentar o zoom em 100% (escala = 1). Se a escala for alterada para 2, por exemplo, o navegador aumentará o zoom da página da web em 50%.

    Um exame mais detalhado do código revela alguns fatos estranhos “dados-“atributos espalhados por ele. Esse é um recurso aprimorado do HTML5 que permite que os desenvolvedores transmitam dados organizados por um aplicativo – por exemplo, o data-role = “cabeçalho” O atributo define a seção principal da página da web.

    O exemplo acima apenas arranha a superfície do que os desenvolvedores podem alcançar usando o jQuery Mobile. A estrutura documentação é fácil de seguir e descreve seus muitos recursos, incluindo vincular páginas, incorporar transições de páginas animadas e criar botões.

    Conclusão

    O jQuery para dispositivos móveis é uma estrutura rica em recursos, construída com recursos de jQuery, HTML5 e CSS para lidar com certos problemas de compatibilidade entre plataformas, dispositivos e navegadores.

    A estrutura oferece grandes oportunidades para a criação de aplicativos móveis e da Web poderosos, totalmente responsivos e prontos para o futuro.

    Você vai tentar?