Crie um site móvel com jQuery Mobile

Contente

• Como codificar várias páginas em um único arquivo HTML
• Descrição
• Como usar caixas de diálogo e transições
• As transições que podem ser usadas
• Descrição
• Como criar botões
• Descrição
• Como criar uma barra de navegação
• Como codificar o HTML para uma barra de navegação:
• Como formatar conteúdo com jQuery Mobile
• Os estilos padrão que o jQuery Mobile usa
• Descrição
• Como aplicar temas a elementos HTML
• Duas maneiras de aplicar um tema:
• Descrição
• Perspectiva

Este é um trecho editado do Capítulo 15 do HTML5 e CSS3 de Murach por Zak Ruvalcaba e Anne Boehm.

jQuery Mobile é uma biblioteca JavaScript gratuita, de código aberto e de plataforma cruzada que você pode usar para desenvolver sites móveis. Essa biblioteca permite criar páginas que parecem com as páginas de um aplicativo móvel nativo.

Embora o jQuery Mobile esteja atualmente disponível como uma versão de teste beta, esta versão já fornece todos os recursos de que você precisa para desenvolver um excelente website móvel. Como resultado, você pode começar a usá-lo imediatamente. Você também pode esperar que esta versão seja continuamente aprimorada, de modo que o jQuery Mobile ficará ainda melhor.

Neste artigo, você aprenderá as técnicas básicas para criar as páginas de um site para celular. Isso incluirá o uso de caixas de diálogo, botões e barras de navegação.

Como codificar várias páginas em um único arquivo HTML

Em contraste com a maneira como você desenvolve as páginas da web para um site de tela, o jQuery Mobile permite criar várias páginas em um único arquivo HTML. Isso é ilustrado pela figura 15-7. Aqui, você pode ver duas páginas de um site junto com o HTML dessas páginas. O que é surpreendente é que ambas as páginas são codificadas em um único arquivo HTML.

Para cada página, você codifica um elemento div com “page” como o valor do atributo data-role. Em seguida, dentro de cada um desses elementos div, você codifica os elementos div para o cabeçalho, conteúdo e rodapé de cada página. Posteriormente, quando o arquivo HTML é carregado, a primeira página no corpo do arquivo é exibida.

Para vincular entre as páginas no arquivo HTML, você usa marcadores como mostrado na figura 7-11 do capítulo 7. Por exemplo, o elemento a> na primeira página neste exemplo vai para “#toobin” quando o usuário toca no Elemento h2 ou img codificado como o conteúdo deste link. Isso se refere ao elemento div com “toobin” como seu atributo id, o que significa que tocar no link leva o leitor à segunda página do arquivo.

Embora este exemplo mostre apenas duas páginas, você pode codificar muitas páginas em um único arquivo HTML. Lembre-se, porém, de que todas as páginas junto com suas imagens, JavaScript e arquivos CSS são carregados com o único arquivo HTML. Como resultado, o tempo de carregamento se tornará excessivo se você armazenar muitas páginas em um único arquivo. Quando isso acontecer, você pode dividir suas páginas em mais de um arquivo HTML.

O HTML para as duas páginas no corpo de um arquivo HTML:

div data-role = "page"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The 2011-2012 Speakers / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> 19 de outubro de 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - OS ELEMENTOS PARA O DESCANSO DOS ALTO-FALANTES - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> SJV Town Hall / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Autor do best-seller aclamado pela crítica, i> The Nine:! - THE COPY CONTINUES -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Descrição

• Ao usar o jQuery Mobile, você não precisa desenvolver um arquivo HTML separado para cada página. Em vez disso, dentro do elemento body de um único arquivo HTML, você codifica um elemento div para cada página com seu atributo data-role definido como “page”.
• Para cada elemento div, você define o atributo id como um valor de espaço reservado que pode ser acessado pelos atributos href nos elementos a> de outras páginas.

Como usar caixas de diálogo e transições

A Figura 15-8 mostra como criar uma caixa de diálogo que se abre quando um link é tocado. Para fazer isso, você codifica a caixa de diálogo da mesma forma que faria com qualquer página. Mas no elemento a> que vai para aquela página, você codifica um atributo data-rel com “dialog” como seu valor.

Como mostram os exemplos nesta figura, o arquivo CSS do jQuery Mobile formata uma caixa de diálogo de maneira diferente de uma página da web normal. Por padrão, uma caixa de diálogo terá um fundo escuro com texto em primeiro plano branco, e o cabeçalho e o rodapé não ocuparão a largura da página. Uma caixa de diálogo também terá um “X” no cabeçalho que o usuário deve tocar para retornar à página anterior.

Ao codificar um elemento a> que vai para outra página ou caixa de diálogo, você também pode usar o atributo de transição de dados para especificar uma das seis transições resumidas na tabela desta figura. Cada uma dessas transições tem o objetivo de imitar um efeito que um dispositivo móvel como o iPhone usa.

As transições que podem ser usadas

HTML que abre a página como uma caixa de diálogo com a transição “pop”:

a href = "# toobin" data-rel = "dialog" data-transaction = "pop">

HTML que abre a página com a transição “fade”:

a href = "# toobin" data-transaction = "fade">

Descrição

• O HTML para um caixa de diálogo é codificado da mesma forma que qualquer página é codificada. No entanto, o elemento a> vinculado à página inclui o atributo data-rel com “dialog” como seu valor. Para fechar a caixa de diálogo, o usuário toca no X no cabeçalho da caixa.
• Para especificar a forma como uma página ou caixa de diálogo é aberta, você pode usar o atributo de transição de dados com um dos valores da tabela acima. Se um dispositivo não suporta a transição que você especifica, o atributo é ignorado.
• O estilo de uma caixa de diálogo é feito pelo arquivo CSS jQuery Mobile.

Como criar botões

A Figura 15-9 mostra como usar os botões para navegar de uma página para outra. Para fazer isso, você apenas define o atributo data-role de um elemento a> como “button” e o jQuery Mobile faz o resto.
No entanto, você também pode definir alguns outros atributos para os botões. Se, por exemplo, você deseja que dois ou mais botões apareçam lado a lado, como os dois primeiros botões nesta figura, você pode definir o atributo data-inline como “true”.

Se quiser adicionar um dos 18 ícones fornecidos pelo jQuery Mobile a um botão, você também codifica o atributo data-icon. Por exemplo, o terceiro botão neste exemplo usa o ícone “excluir” e o quarto botão usa o ícone “início”. Todos esses ícones se parecem com os ícones que você pode ver em um aplicativo móvel nativo. A propósito, esses ícones não são arquivos separados que a página deve acessar. Em vez disso, eles são fornecidos pela biblioteca jQuery Mobile.

Se você deseja agrupar dois ou mais botões horizontalmente, como os botões Sim, Não e Talvez nesta figura, você pode codificar os elementos a> para os botões dentro de um elemento div que tem "grupo de controle" como seu atributo de função de dados e “Horizontal” como seu atributo de tipo de dados. Ou, para agrupar os botões verticalmente, você pode alterar o atributo de tipo de dados para “vertical”.

Se você definir o atributo data-rel de um botão como “back” e o atributo href como o símbolo sustenido (#), o botão retornará à página que o chamou. Em outras palavras, o botão funciona como um botão Voltar. Isso é ilustrado pelo último botão no conteúdo da página.

Os dois últimos botões mostram como os botões aparecem no rodapé de uma página. Aqui, os ícones e o texto são brancos contra um fundo preto. Nesse caso, o atributo de classe para o rodapé é definido como “ui-bar”, o que informa ao jQuery Mobile que ele deve colocar um pouco mais de espaço ao redor do conteúdo do rodapé. Você aprenderá mais sobre isso na figura 15-12.

O HTML para os botões na seção:

! - Para botões embutidos, defina o atributo data-line como true -> a href = "#" data-role = "button" data-inline = "true"> Cancelar / a> a href = "#" dados -role = "button" data-inline = "true"> OK / a>! - Para adicionar um ícone a um botão, use o atributo data-icon -> a href = "#" data-role = "botão "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Para agrupar botões, use um elemento div com os atributos que se seguem -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Sim / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Não / a> a href = "#" data-role = "button"> Maybe / a> / div>! - Para codifique um botão Voltar, defina o atributo data-rel como back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Voltar para a página anterior / a >

O HTML para os botões no rodapé:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Adicionar ao Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet esta página / a> / footer>

Descrição

• Para adicionar um botão a uma página da web, você codifica um elemento a> com seu atributo data-role definido como “botão”.

Como criar uma barra de navegação

A Figura 15-10 mostra como você pode adicionar uma barra de navegação a uma página da web. Para fazer isso, você codifica um elemento div com sua função de dados definida como “navbar”. Dentro desse elemento, você codifica um elemento ul que contém elementos li que contêm os elementos a> para os itens na barra de navegação. Observe, entretanto, que você não codifica o atributo data-role para os elementos a>.

Para alterar a cor dos itens na barra de navegação, o código neste exemplo inclui o atributo data-theme-b para cada item. Como resultado, o jQuery Mobile altera a cor de fundo de cada item de preto, que é o padrão, para um azul atraente. Além disso, este código define o atributo de classe do botão ativo como “ui-btn-active”, de modo que o jQuery Mobile altera a cor do botão ativo para um azul mais claro. Isso mostra como você pode alterar a formatação que é usada pelo jQuery Mobile e você aprenderá mais sobre isso a seguir.

O HTML da barra de navegação:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" b "> Speakers / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Fale Conosco / a> / li> / ul> / div> / header>

Como codificar o HTML para uma barra de navegação:

• Codifique um elemento div dentro do elemento do cabeçalho. Em seguida, defina o atributo data-role para o elemento div como “navbar”.
• Dentro do elemento div, codifique um elemento ul que contenha um elemento li para cada link.
• Dentro de cada elemento li, codifique um elemento a> com um atributo href que usa um espaço reservado para a página para a qual o link deve ir. Em seguida, defina o atributo data-icon para o ícone de sua escolha.
• Para o item ativo na barra de navegação, defina o atributo de classe como “ui-btn-active”.Então, a cor deste item será mais clara do que os outros itens na barra de navegação.
• Você também deve usar o atributo data-theme para aplicar um tema jQuery Mobile a cada item na barra de navegação. Caso contrário, os botões da barra serão da mesma cor que o resto do cabeçalho. Para saber mais sobre a aplicação de temas, consulte a figura 15-12.

Como formatar conteúdo com jQuery Mobile

Como você já viu, o jQuery Mobile formata automaticamente os componentes de uma página da web com base em sua própria folha de estilo. Agora, você aprenderá mais sobre isso, bem como como ajustar o estilo padrão que o jQuery Mobile usa.

Os estilos padrão que o jQuery Mobile usa

A Figura 15-13 mostra os estilos padrão que o jQuery Mobile usa para elementos HTML comuns. Para todos os seus estilos, o jQuery Mobile depende do mecanismo de renderização do navegador, portanto, seu próprio estilo é mínimo. Isso mantém o tempo de carregamento rápido e minimiza a sobrecarga que o CSS excessivo imporia a uma página.

Como você pode ver, o estilo do jQuery Mobile é tão eficaz que você não deve precisar modificar seu estilo fornecendo sua própria folha de estilo CSS. Por exemplo, o espaçamento entre os itens na lista não ordenada e a formatação da tabela são aceitáveis ​​do jeito que são. Além disso, o tipo preto no fundo cinza é consistente com a formatação para aplicativos móveis nativos.

Descrição

• Por padrão, o jQuery Mobile aplica estilos automaticamente aos elementos HTML de uma página. Esses estilos não são apenas atraentes, mas também imitam os estilos nativos de um navegador.
• Por padrão, o jQuery Mobile aplica uma pequena quantidade de preenchimento à esquerda, direita, parte superior e inferior de cada página móvel.
• Por padrão, os links são um pouco maiores do que o texto normal. Isso torna mais fácil para o usuário tocar nos links.
• Por padrão, os links são sublinhados em azul como a cor da fonte.

Como aplicar temas a elementos HTML

Em alguns casos, você desejará alterar os estilos padrão que o jQuery Mobile usa. Você já viu isso na barra de navegação da figura 15-10. Para alterar os estilos padrão, você pode usar os cinco temas que o jQuery Mobile fornece. Eles estão resumidos na figura 15-12. Novamente, esses temas pretendem imitar a aparência de um aplicativo móvel nativo.

Uma maneira de aplicar temas é codificar um atributo data-theme com a letra do tema como seu valor. Você viu isso na barra de navegação na figura 15-10 e pode ver no código da segunda barra de navegação nesta figura. Aqui, o atributo data-theme aplica o tema “e” ao cabeçalho e o tema “d” aos itens na barra de navegação.

A outra maneira de aplicar temas é definir o atributo de classe de um elemento para um nome de classe que indique um tema. Isso é ilustrado pelo primeiro exemplo após a tabela. Aqui, o atributo class é usado para aplicar as classes “ui-bar” e “ui-bar-b” ao elemento div. Como resultado, o jQuery Mobile primeiro aplica seu estilo padrão para uma barra ao elemento e, em seguida, aplica o tema b a esse estilo. Nas páginas a seguir, você verá outros exemplos desse tipo de estilo.

Observe que a tabela nesta figura diz para usar o tema e com moderação. Isso porque ele usa uma cor laranja que funciona bem para acentuar um item, mas não é atraente em grandes doses. Isso é ilustrado pelo segundo cabeçalho e barra de navegação nesta figura, que tende a ser chocante quando você a vê em cores.

Em geral, é melhor ficar com os estilos padrão e os três primeiros temas, que geralmente funcionam bem juntos. Em seguida, você pode experimentar os temas dee quando achar que precisa de algo mais.

O HTML para o segundo cabeçalho e barra de navegação:

header data-role = "header" data-theme = "e"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" d "> Speakers / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Notícias / a> / li> / ul> / div> / header>

Os cinco temas do jQuery Mobile:

Duas maneiras de aplicar um tema:

Usando um atributo data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Usando um atributo de classe que indica o tema:

div> Bar / div>

Descrição

• Usando os cinco temas incluídos com o jQuery Mobile, você pode fazer ajustes apropriados aos estilos padrão para os elementos HTML.
• Embora você possa usar sua própria folha de estilo CSS com um aplicativo jQuery Mobile, você deve evitar fazer isso sempre que possível.

Perspectiva

O uso de dispositivos móveis aumentou dramaticamente nos últimos anos. Por causa disso, tornou-se cada vez mais importante criar sites que sejam fáceis de usar a partir desses dispositivos. Embora isso geralmente signifique desenvolver um site separado, esse pode ser um aspecto crítico para manter sua presença na Internet.

Felizmente, a tarefa de construir um site móvel se tornou muito mais fácil com o advento do jQuery Mobile. As páginas da web para celular não estão mais limitadas a páginas estáticas que contêm títulos, parágrafos, links e imagens em miniatura. Com o jQuery Mobile, os desenvolvedores da web agora podem construir sites da web ricos em recursos que se parecem com aplicativos móveis nativos.