Instalando o jQuery Mobile no seu site

por **michellgomes** Sáb Jan 14, 2012 8:41 pm

Como instalar
Você pode baixar a biblioteca jQueryMobile e fazer o DONWLOAD da última versão estável. Neste artigo iremos realizar o download da versão 1.0 alpha 4, baixando o arquivo ZIP “jquery-mobile-1.0a4.1.zip”

Após realizar o download, extraia o arquivo e copie a pasta extraída para o seu projeto. Neste momento você pode renomear as pastas e arquivos do zip, da seguinte forma:

Pasta “jquery.mobile-1.0a4.1” para “jquerymobile”
Arquivo “jquery.mobile-1.0a4.1.min.css” para “jquerymobile.css”
Arquivo “jquery.mobile-1.0a4.1.min.js” para “jquerymobile.js”

Após renomear, precisamos obter a biblioteca jquery, na versão 1.5.2. Acesse: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] e clique em download, selecionando o pacote “production”, que é compactado. Copie o arquivo “jquery-1.5.2.min.js” para a pasta “jquerymobile”, e renomeie-o para jquery.js.

Com todos os arquivos prontos, temos uma estrutura semelhante a figura a seguir:
Instalando o jQuery Mobile no seu site 35608

Instalando o jQuery Mobile no seu site 35608

Como configurar o HTML
Esta é a parte mais tranquila, bastando apenas referenciar os três arquivos renomeados, na tag do seu HTML. Observe:

Código:: <head> <title>Page Title</title> <link rel="stylesheet" href="jquerymobile/jquerymobile.css" /> <script type="text/javascript" src="juqerymobile/jquery.js"></script> <script type="text/javascript" src="jquerymobile/jquerymobile.js"></script> </head>

Dependendo de onde você inserir os arquivos, deverá alterar o caminho para que a página os encontre.

Imasters

Agora também da para fazer com esses arquivos já online e é só utilizar esse código:

Código:: <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head> <body> [Bloco de códigos html JQM] </body> </html>