Todos os artigos vistos até agora incluíram as bibliotecas do jQuery Mobile diretamente pelo site, através do seguinte 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>
Como instalar no seu projeto
Caso deseje não utilizar esta forma, você pode baixar a biblioteca jQueryMobile e fazer o download 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: www.jquery.com 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:
Como configurar o HTML
Esta é a parte mais tranquila, bastando apenas referenciar os três arquivos renomeados, na tag <head> do seu HTML. Observe:
<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.
Por que retiramos a versão dos arquivos?
Quando renomeamos os arquivos, fizemos de propósito para preparar a aplicação para futuras versões. Quando sair uma nova versão do jQuery Mobile, faremos o download do ZIP, depois descompactar e renomear novamente os mesmos arquivos e em seguida, copiar por cima dos arquivos de projeto. Assim o jQuery mobile será atualizado sem que você tenha que alterar os arquivos HTML do projeto.
Até a próxima!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?