jQuery Mobile - Configuração

Neste capítulo, discutiremos como instalar e configurar o jQuery Mobile.

Baixe o jQuery Mobile

Ao abrir o link jquerymobile.com/ , você verá que há duas opções para baixar a biblioteca móvel jQuery.

Custom Download - Clique neste botão para baixar uma versão personalizada da biblioteca.
Latest Stable - Clique neste botão para obter a versão estável e mais recente da biblioteca móvel jQuery.

Download personalizado com o Download Builder

Usando o Download Builder, você pode criar um build personalizado incluindo apenas as partes da biblioteca de que você precisa. Ao fazer o download dessa nova versão customizada do jQuery Mobile, você verá a tela a seguir.

Você pode selecionar as bibliotecas de acordo com sua necessidade e clicar no botão Build My Download botão.

Download estável

Clique no botão Estável , que leva diretamente a um arquivo ZIP contendo os arquivos CSS e JQuery, para a versão mais recente da biblioteca móvel jQuery. Extraia o conteúdo do arquivo ZIP para um diretório móvel jQuery.

Esta versão contém todos os arquivos, incluindo todas as dependências, uma grande coleção de demos e até mesmo o conjunto de testes de unidade da biblioteca. Esta versão é útil para começar.

Baixe a biblioteca jQuery de CDNs

Uma CDN (Content Delivery Network) é uma rede de servidores projetada para servir arquivos aos usuários. Se você usar um link CDN em sua página da web, ele transfere a responsabilidade de hospedar arquivos de seus próprios servidores para uma série de servidores externos. Isso também oferece a vantagem de que, se um visitante de sua página da web já tiver baixado uma cópia do jQuery mobile do mesmo CDN, não será necessário baixá-la novamente. Você pode incluir os seguintes arquivos CDN no documento HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Estamos usando as versões CDN da biblioteca em todo este tutorial. Usamos AMPPS (AMPPS é uma pilha WAMP, MAMP e LAMP do servidor Apache, MySQL, MongoDB, PHP, Perl e Python) para executar todos os nossos exemplos.

Exemplo

A seguir está um exemplo simples de jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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>
   </head>

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

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

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

Os detalhes do código acima são -

Este código é especificado dentro do elemento head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

A janela de visualização é usada para especificar (pelo navegador) para exibir o nível de zoom da página e dimensão.
content = "width = device-width" é usado para definir a largura em pixels da página ou dispositivo de tela.
escala inicial = 1 define o nível de zoom inicial, quando a página é carregada pela primeira vez.

Inclui os seguintes CDNs

<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>

O conteúdo dentro da tag <body> é uma página exibida no navegador.

<div data-role = "page">
   ...
</div>

data-role = "header" cria o cabeçalho no topo da página.
data-role = "main" é usado para definir o conteúdo da página.
data-role = "footer" cria o rodapé na parte inferior da página.
class = "ui-content" inclui preenchimento e margem dentro do conteúdo da página.

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como simple_example.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/simple_example.html e a seguinte saída será exibida.

↰ Previous page Next page ↱