Conceitos básicos sobre o jQuery Mobile

jQuery Mobile é um framework de interface gráfica (UI) em plataforma cruzada para smartphones e tablets, construído sobre as fundações da biblioteca jQuery.

Usuários do jQuery Mobile constroem aplicativos através de componentes HTML com atributos de dados (data-*) personalizados. Por exemplo, um cabeçalho do jQuery Mobile é um elemento div HTML com o atributo data-role="header" e um list view em jQuery Mobile é uma lista HTML não ordenada com o atributo data-role="listview". O framework jQuery Mobile então aprimora automaticamente este markup, nos bastidores, aplicando estilos e comportamento a estes elementos utilizando os recursos de CSS e JavaScript* inclusos no framework. Estes aprimoramentos acontecem progressivamente para suportar uma grande gama de dispositivos com capacidades que variam bastante. 

O jQuery Mobile define a estrutura de uma página e o modelo de navegação entre as páginas. Uma página jQuery Mobile é um elemento div do HTML div com o atributo data-role="page". Cada página pode ter um cabeçalho, conteúdo e um rodapé. As páginas de um app podem estar em um único arquivo ou em múltiplos arquivos fonte. O framework Query Mobile permite, por padrão, um sistema de navegação de páginas estilo Ajax. Ele carrega a primeira página do app para iniciar, então injeta todas as páginas subsequentes no DOM. Cada página pode ser referenciada com uma hashtag ('#') á partir da url principal, ou, opcionalmente, como um caminho completo ao documento em novos runtimes web que suportam o histórico em HTML5.

Todos os cliques são tratados pelo framework jQuery Mobile para sobrescrever o comportamento padrão de navegação de páginas. A navegação programática das páginas é feita usando a função  $.mobile.changePage(). O framework controla todo o histórico de navegação de páginas, e provê o comportamento de voltar a navegação através do atributo data-rel="back" em um link. O framework também permite que diversos efeitos baseados em CSS sejam usandos nas transições entre páginas. Adicionalmente, o framework fornece eventos de inicialização e transição de páginas para possibilitar o processamento, em tempo hábil, dos diversos scripts de interação com o DOM de uma aplicação. Em particular, usuários do jQuery que estão familiarizados em tratar o $(document).ready(), devem trocar para o evento pageinit, pois o carregamento de páginas subsequentes não disparam o evento ready.

O jQuery Mobile também fornece um conjunto de widgets: botões, barras de ferramentas, busca, list views, elementos de formulários, acordeões, e diálogos compatíveis com dispositivos com telas sensíveis ao toque.

Para mais informações, consulte estes exemplos de jQuery Mobile:

  • Navegação em Lista: Um esqueleto multi-página usando navegação baseada em lista. Este exemplo simples pode te ajudar a se familiarizar com a utilização de páginas jQuery Mobile pages e widgets básicos como barras de ferramentas e list views.
  • Navegação Springboard: Um esqueleto multi-página usando navegação baseada em Springboard. Este exemplo demonstra técnicas de estilo personalizado para se adpatar a diversos tamanhos de tela e rotações, e obter uma aparência diferente da aparência padrão do jQuery Mobile.
  • Navegação por Abas: Um esqueleto multi-página usando navegação baseada em abas.  Este exemplo demonstra como criar um widget de menu com opções personalizadas que mantenha seu estado através das transições entre páginas, e como injetar dinamicamente widgets no DOM.
  • Listview: Uma lista paginada dos DVDs disponíveis para locação usando a API Rotten Tomatoes*. Este exemplo demonstra como popular um listview com dados vivos de uma API web, e como dinamicamente gerar páginas.
Categorías:
Para obtener más información sobre las optimizaciones del compilador, consulte el aviso sobre la optimización.