É uma estrutura de interface de usuário que é construída no núcleo do jQuery e usada para desenvolver sites ou aplicativos responsivos que são acessíveis em dispositivos móveis, tablets e desktops.

• Ele cria aplicativos da web de forma que funcionem da mesma forma em dispositivos móveis, tablets e desktops.

• É compatível com outros frameworks como PhoneGap, Whitelight etc.

• Ele fornece um conjunto de entradas de formulário amigáveis ​​ao toque e widgets de interface do usuário.

• Ele traz funcionalidades para todas as plataformas de celulares, tablets e desktops e adiciona carregamentos de página eficientes e suporte mais amplo a dispositivos.

• Ele é construído no jQuery Core e estrutura de UI "escreva menos, faça mais".

• É um código aberto, plataforma cruzada e compatível com vários navegadores.

• É escrito em JavaScript e usa recursos de jQuery e jQueryUI para construir sites amigáveis ​​móveis.

• Ele integra HTML5, CCS3, jQuery e jQueryUI em uma estrutura para a criação de páginas com o mínimo de script.

• Inclui um sistema de navegação Ajax que usa transições de página animadas.

• É fácil aprender e desenvolver aplicativos se você tiver conhecimento dos recursos HTML5 e CSS3.

• Ele é compatível com várias plataformas e navegadores, então você não precisa se preocupar em escrever códigos diferentes para cada resolução de dispositivo.

• Ele usa HTML5 junto com JavaScript para facilitar o desenvolvimento de aplicativos da web.

• Ele é construído de forma a permitir que o mesmo código seja dimensionado automaticamente da tela do celular para a tela do desktop.

• Existem opções limitadas para temas CSS, de forma que os sites podem ser semelhantes aos criados por esses temas.

• Os aplicativos desenvolvidos com jQuery Mobile são mais lentos em celulares.

• Torna-se mais demorado quando você combina o jQuery mobile com outras estruturas móveis.

• É difícil fornecer um design visual personalizado completo.

• Custom Download : Para baixar uma versão personalizada da biblioteca.

• Latest Stable: Para obter a versão estável e mais recente da biblioteca jQuery Mobile.

Você pode usar os seguintes arquivos CDN -

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

Ele cria o cabeçalho no topo da página.

É usado para definir o conteúdo da página.

Ele cria rodapé na parte inferior da página.

Inclui preenchimento e margem dentro do conteúdo da página.

Múltiplas páginas podem ser incluídas em um único documento móvel jQuery que carregam juntos adicionando vários divs com atributo data-role = "page"

Use o atributo data-dialog = "true" para qualquer página para exibir um diálogo.

O atributo de transição de dados é usado para aplicar as diferentes transições na caixa de diálogo, como deslizar, virar etc.

O botão pode ser fechado usando o atributo data-close-btn.

O atributo data-rel = "back" é usado para navegar e voltar ao diálogo anterior.

O tema pode ser incluído na caixa de diálogo adicionando tema de dados de atributo a quaisquer contêineres, como cabeçalho, rodapé ou conteúdo.

ui-corner-all

Você pode definir o ícone no botão usando a classe ui-icon e a classe ui-btn-icon-pos_name para especificar a posição do ícone.

Você pode adicionar a sombra do ícone em seu botão usando a classe ui-shadow-icon.

Você pode remover o círculo cinza ao redor do ícone usando a classe ui-nodisc-icon.

Use a classe ui-grid-solo na tag div para criar uma grade de coluna única.

Adicione a classe ui-grid-a à tag div e inclua dois contêineres filho com as classes ui-block-a e ui-block-b para criar o layout de duas colunas.

Use a classe ui-grid-b na tag div para criar uma grade de três colunas.

Use a classe ui-grid-c na tag div para criar uma grade de quatro colunas.

Use a classe ui-grid-d na tag div para criar uma grade de cinco colunas.

Crie um botão básico simples na página usando a classe ui-btn.

Crie um grupo de botões vertical e horizontalmente na página usando o atributo data-role = "controlgroup".

Você pode criar um botão menor na página usando a classe ui-mini e exibir a posição dos ícones no botão usando a classe ui-btn-icon-ico_pos.

Use o atributo data-role = "date" no campo de entrada para exibir no formato dd / mm / aa.

O recolhível pode ser criado usando o atributo data-role = "collapsible" para um contêiner.

Você pode exibir o grupo de controle usando o atributo data-role = "controlgroup".

Usando o atributo data-filter = "true", você pode filtrar os filhos de qualquer elemento.

Flip Switch permite que você ligue / desligue ou true / false o switch clicando nele para entrada de estilo booleano.

O Listview é usado para exibir uma lista de itens. O atributo data-role = "listview" é incluído no contêiner para exibir a lista na lista rolável vertical.

O widget Rangeslider oferece um par de alças que permitem selecionar um intervalo de valor numérico.

Um evento responderá à interação do usuário quando o usuário clicar em determinada página ou passar o mouse sobre um elemento, etc.

Ele é disparado quando o usuário toca em um elemento usando o id da página para especificar o evento e o método on () anexa os manipuladores de eventos.

Ele é disparado quando o usuário arrasta horizontalmente mais de 30 px sobre um elemento usando o id da página para especificar o evento e o método on () anexa os manipuladores de eventos.

O evento de início de rolagem é disparado quando o usuário começa a rolar a página e o evento de parada de rolagem é disparado quando o usuário para de rolar a página usando o id da página para especificar o evento e o método on () anexa os manipuladores de eventos.

Você pode acionar o evento de orientação quando o usuário gira o dispositivo vertical ou horizontalmente usando o evento de mudança de orientação . Ele usa a propriedade window.orientation para especificar se a janela ou dispositivo está definido com orientação vertical ou horizontal.

Você pode exibir o valor do controle deslizante como uma dica de ferramenta usando o atributo data-popup-enabled = "true".

A alternância de coluna coloca as colunas em um local oculto e permite que o usuário selecione colunas conforme sua escolha usando o atributo data-mode = "columntoggle".

Ele representa os dados em formato horizontal, recolhendo a tabela em uma representação empilhada usando o atributo data-mode = "reflow".

Você pode exibir os conjuntos de dados em formato de faixas e traços usando as classes table-stripe e table-stroke.

Você pode aumentar a qualidade e a funcionalidade das entradas de texto definindo o atributo data-Enhanced = "true" no campo de entrada.

Você pode alterar a cor do ícone para preto usando a classe ui-alt-icon. Por padrão, todos os ícones são brancos.

Foi desenvolvido pela equipe do projeto jQuery no ano de 2010 e escrito em JavaScript.

Indica se as páginas devem ser carregadas por meio de ajax ou não.