No dia 13 de abril de 2012 foi lançada a versão 1.1 do framework jQuery Mobile.
Essa matéria tem por finalidade apresentar aos leitores desse blog e em particular àqueles que adquiriram o livro jQuery Mobile do Maujor, as funcionalidades criadas por essa versão do framework.

Apresentamos a seguir a lista das novas funcionalidades e a seguir uma descrição e quando necessário exemplificação de cada um dos itens listados.

• Barra de ferramentas – posicionamento fixo
• Barra de ferramentas – opções e métodos
• Efeitos de transição de páginas
• Novo indicador visual de carregamento AJAX
• Novo atributo data-mini para controles de formulários
• Novo design para chave on/off
• Novo design e funcionalidades para slider
• Atributo data-ajax=false em containers
• Novo atributo data-enhance=false

Barra de ferramentas – posicionamento fixo

Referência no livro jQuery Mobile: Página 83, Item 3.5 — Posicionamento fixo

Topo e rodapé são widgets, previstos no framework, que podem ser posicionados de forma fixa na parte superior e inferior da viewport, independente da rolagem da tela.

A novidade para essa funcionalidade é que o mecanismo do framework para posicionamento fixo daquelas barras de ferramentas foi redesenhado de modo a aperfeiçoar o script de posicionamento.

Devido ao suporte inconsistente para a declaração position: fixed oferecido por diferentes navegadores, a versão 1.0 do framework jQuery Mobile usa um script adicional para reposicionar dinamicamente as barras de ferramentas de ferramentas (leia-se: topo e rodapé) fixas. Essa solução trouxe como consequencia um efeito estranho quando há rolagem da tela, ou seja as barras de ferramentas apesar de permanecerem fixas desaparecem e aparecem novamente quando se rola a tela.

Na versão 1.1 do framework esse comportamento foi corrigido servindo-se a declaração position: fixed para sistemas/navegadores que a suportam e position: static para aqueles não suportam posicionamento fixo. Nesses casos as barras de ferramentas rolam com a rolagem da tela.

Assim, nativamente o framework jQuery Mobile a partir da versão 1.1 não mais oferece a funcionalidade de posicionamento fixo para barras de ferramenta em dispositivos antigos (aqueles que não suportam position: fixed, por exemplo: iOS4x), contudo se você quiser implementar esse comportamento à maneira como a versão 1.0 faz, existe um script alternativo (ou polyfill) que supre essa necessidade.

Para você comprovar o novo comportamento das barras de ferramentas fixas desenvolvemos duas páginas.

            

Abra as páginas e role a tela para observar a diferença de comportamento.

O suporte pleno para barras de ferramentas fixas é obtido nas seguintes plataformas:

• iOS 5 — iPhone e iPad
• Android 2.2, 2.3
• Android 3.x tablets (Honeycomb)
• Android 4.x tablets (ICS)
• Chrome para Android
• BB PlayBook 1 =-2
• BB7
• Nook/Color tablet
• Kindle Fire
• Kindle 3
• Todos os navegadores modernos (Safari, Firefox, Opera, Chrome, IE, etc.)

Barra de ferramentas – opções e métodos

A versão 1.1 do framework jQuery Mobile criou um conjunto robusto de opções e métodos que estão à disposição do desenvolvedor para personalizar comportamentos das barras de ferramentas fixas. Vejamos a seguir cada uma dessas funcionalidades:

Opções

Referência no livro jQuery Mobile: Página 261, cria um novo item 10.3.2.11 Widget Fixedtoolbar

visibleOnPageShow

Opção booleana cujo valor padrão é true. Essa opção determina se a barra de ferramenta fixa será ou não visível quando a página for carregada. Faz o mesmo efeito do atributo data-visible-on-page-show = "true".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ visibleOnPageShow: false });

disablePageZoom

Opção booleana cujo valor padrão é true. Essa opção determina se o zoom aplicado pelo usuário deve ou não ser desabilitado em uma página que contenha barra de ferramenta fixa. Faz o mesmo efeito do atributo data-disable-page-zoom="true".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ disablePageZoom: false });

fullscreen

Opção booleana cujo valor padrão é false. Por padrão o comportamento das barras fixas reagem à interação do usuário que ao clicar ou tocar a tela seguidamente faz com que as barras desapareçam e sejam reposicionadas no topo (ou no rodapé) da página. Assim, dependendo da posição de rolagem uma barra de topo fixa, poderá por exemplo, sair de vista e ser reposicionada no início da página ficando fora de vista. Essa opção desabilita o reposicionamento da barra de ferramenta fixa fazendo com que a ação do usuário determine a retirada da barra sem reposicioná-la. Faz o mesmo efeito do atributo data-fullscreen="false".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ fullscreen: true });

Nota: Na versão 1.0 do framework jQuery Mobile o atributo data-fullscreen deve ser declarado no div qua marca a página (data-role="page"). Na versão 1.1 o atributo deve ser declarado nos div que marcam a barras (data-role="header" e data-role="footer"). Referência no livro jQuery Mobile: Página 85, Item 3.6 — Modo tela cheia

tapToggle

Opção booleana cujo valor padrão é true. Essa opção destina-se a habilitar e desabilitar a possibilidade de o usuário alterar a visibilidade da barra de ferramenta fixa com clique ou toque na tela. Faz o mesmo efeito do atributo data-tap-toggle="true".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ tapToggle: false });

Nota: A sintaxe mostrada a seguir, criada na versão 1.0 do framework foi colocada em desuso e não é suportada pela versão 1.1:

...
...
$.mobile.fixedToolbars.setTouchToggleEnabled(false);

updatePagePadding

Opção booleana cujo valor padrão é true. Essa opção destina-se a garantir que haja uma área de padding suficiente para conter as barras de ferramentas fixas quando ocorre posicionamento estático, nas transições de páginas, no redimensionamento da tela ou na mudança de direção do dispositivo móvel. Faz o mesmo efeito do atributo data-update-page-padding="true".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ updatePagePadding: false });

Nota: O time de desenvolvimento do framework jQuery Mobile recomenda que se use uma técnica de otimização da definição do espaço para barras de ferramentas fixas que consiste em se definir essa opção para o valor false e usar declaração CSS para criar um padding na página igual a altura da barra, como mostrado a seguir para uma barra de topo:

...
...
.ui-page-header-fixed { padding-top: 4.5em; }

transition

Essa opção destina-se a definir o efeito para esconder/mostrar as barras de ferramentas fixas. Os valores possíveis para essa opção são: none, slide e fade, sendo slide o valor padrão que causa o efeito slideup para o topo e slidedown para o rodapé. Faz o mesmo efeito do atributo data-transition="slide".

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ transition: "fade" });

tapToggleBlacklist

Essa opção destina-se a definir uma lista de seletores jQuery que quando clicados ou quando recebem o toque na tela não causam o efeito de esconder/mostrar as barras de ferramentas fixas. Os valores possíveis para essa opção são todos oa elementos da página sendo os seletores a .ui-header-fixed e .ui-footer-fixed os seletores padrão.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" });

hideDuringFocus

Essa opção destina-se a definir uma lista de seletores jQuery que quando recebem foco causam o efeito de esconder as barras de ferramentas fixas, exceto se eles (seletores jQuery) estiverem localizados nas barras. Os valores possíveis para essa opção são todos oa elementos da página sendo os seletores input select e textarea os seletores padrão.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "input, select, textarea" });

supportBlacklist

Essa opção tem por finalidade filtrar o suporte à declaração CSS position: fixed. O valor dessa opção é uma função retornando booleano.

Testar o suporte para a declaração CSS de posição fixa é uma tarefa complicada e que pode retornar falsos positivos e negativos. Assim, o time de desenvolvimento do framework criou essa opção que permite ao desenvolvedor desenvolver sua própria lógica para sobrescrever a lista de plateformas sem suporte ou com suporte parcial para a aquela funcionalidade CSS.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$( document ).bind("mobileinit", function(){
  $.mobile.fixedtoolbar.prototype.options.supportBlacklist = function(){
    var resultado;
    // script com a lógica para retornar a variável resultado true ou false
    return resultado;
  };
});

initSelector

Essa opção tem por finalidade definir o seletor a ser inicializado como barra de ferramenta fixa. o Valor padrão é ":jqmData(position='fixed')"

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$( document ).bind( "mobileinit", function(){
	$.mobile.fixedtoolbar.prototype.options.initSelector = ".meu_seletor";
});

Métodos

Referência no livro jQuery Mobile: Página 252, cria um novo item 10.2.9 Métodos para Fixedtoolbar

show

Esse método destina-se a mostrar a barra de ferramentas fixa.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-position='fixed']").fixedtoolbar('show');

Nota: A sintaxe mostrada a seguir, criada na versão 1.0 do framework foi colocada em desuso e não é suportada pela versão 1.1:

...
...
$.mobile.fixedToolbars.show(true);

hide

Esse método destina-se a esconder a barra de ferramentas fixa nos casos em que ela não seja uma barra em tela cheia.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-position='fixed']").fixedtoolbar('hide');

toggle

Esse método destina-se a esconder ou mostrar a barra de ferramentas dependendo do seu estado de visibilidade.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-position='fixed']").fixedtoolbar('toggle');

updatePagePadding

Esse método destina-se a atulaizar o padding da página destinado a acomodar as barras de ferramentas fixas quando ocorre posicionamento estático, nas transições de páginas, no redimensionamento da tela ou na mudança de direção do dispositivo móvel.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-position='fixed']").fixedtoolbar('updatePagePadding');

destroy

Esse método destina-se a desabilitar (destruir) a barra de ferramentas fixa retornando-a ao seu estado inicial.

A sintaxe para uso dessa opção é mostrada a seguir:

...
...
$("[data-position='fixed']").fixedtoolbar('destroy');

Efeitos de transição de páginas

Referência no livro jQuery Mobile: Página 56, item 2.1.3.7 Transições

A versão 1.0 previa 6 efeitos de transição de páginas sendo slide a transição padrão. A versão 1.1 criou mais 3 efeitos de transição a saber: slidefade, turn e flow. Além disso a transição padrão passa a ser fade.

Para você visualizar os novos efeitos de transição clique o botão a seguir.

Novo indicador visual de carregamento AJAX

Referência no livro jQuery Mobile: Página 195, item 9.2.1 Propriedades

Na versão 1.0 o indicador visual de carregamento AJAX, por padrão, é constituído por um spinner e um texto (por padrão o texto é: Loading…). A versão 1.1 adota por padrão apresentar somente o spinner e possibilita ao desenvolvedor optar por apresentar o spinner e o texto ou somente o texto. Além disso possibilitou também escolher um tema para apresentação do indicador visual do carregamento AJAX.

Propriedade $.mobile.loadingMessageTextVisible = booleano

Essa propriedade define a apresentação do texto no indicador visual de carregamento AJAX. O valor padrão é false. A sintaxe para essa propriedade é msotrada a seguir:

<script>
$(document).bind("mobileinit", function(){
  $.mobile.loadingMessageTextVisible = true;
});
</script>

Propriedade $.mobile.showPageLoadingMsg([parâmetros])

Essa propriedade destina-se a definir o tema, a presença/ausência do spinner e/ou do texto no indicador visual do carregamento AJAX. Por padrão é apresentado somente o spinner de acordo com o tema padrão “a”.

$.mobile.showPageLoadingMsg(“a”, “Carregando…”)

Essa sintaxe estiliza o indicador segundo o tema “a”, apresenta o spinner e o texto Carregando…

$.mobile.showPageLoadingMsg(“c”, “Carregando…”, true)

Essa sintaxe estiliza o indicador segundo o tema “c”, apresenta o texto Carregando… não apresenta o spinner.

Para você visualizar os novos indicadores de carregamento AJAX clique o botão a seguir.

Novo atributo data-mini para controles de formulários

Referência no livro jQuery Mobile: Página 165, subtítulo Atributos data-*

Esse atributo destina-se a estilizar controles de formulário com sua dimensões reduzidas. É ideal para inserção de controles de formulário no topo e no rodapé. No caso de grupamentos de botões o atributo poderá ser declarado no elemento container. Admite valor booleano sendo false o valor padrão, ou seja para reduzir o tamanho de um controle de formulário declare data-mini="true" no elemento que marca o controle.

Novo design para chave on/off

Referência no livro jQuery Mobile: Página 167, item 7.2.6.2 Chave on/off

A chave on/off foi redesenhada para ter uma aparência mais próxima àquela da maioria das chaves nativas das diferentes plataformas. A chave foi miniaturizada e o botão deslizante a forma arredondada.

Para você visualizar o novo design da chave on/off desenvolvemos duas páginas.

            

Novo design e funcionalidades para slider

Referência no livro jQuery Mobile: Página 152, item 7.2.5.8 Campo tipo range

O slider foi redesenhado e admite dois novos atributos a serem definidos no elemento input: atributo data-highlight que destaca em cor diferente o trecho à esquerda do botão na guia do slider e o atributo step destinado a fazer a contagem dos valores do slider em intervalos.

Para você visualizar o novo design e conferir o uso dos atributos desenvolvemos duas páginas.

            

Atributo data-ajax=false em containers

Por padrão a navegação no framework é feita com uso de AJAX, contudo é possível desabilitar AJAX e optar por requisição HTTP normal com uso do atributo data-ajax="false" a ser declarado no elemento form com a finalidade de enviar um formulário por HTTP ou no elemento link com a finalidade de requisitar seu destino sem uso de AJAX.

A versão 1.1 criou a possibilidade de se declarar esse atributo no container de vários links possibilitando uma espécie de desabilitação AJAX em grupo em lugar de se ter que declarar o atributo individualmente por links.

Novo atributo data-enhance=false

Esse novo atributo destina-se a não permitir que o DOM seja modificado pelo framework. Foi criado com a finalidade de possibilitar a inserção de códigos de terceiros (widgets ou bibliotecas) sem que a marcação HTML de tais códigos seja modificada o que “quebraria” o funcionamento do widget.

Observações finais

Nessa matéria mostramos e exemplificamos as novas funcionalidades criadas pela versão 1.1 da jQuery Mobile, bem como destacamos as melhorias e funcionalidades em desuso.

Se você adquiriu o livro jQuery Mobile do Maujor que foi escrito baseado na versão 1.0 o conteúdo dessa matéria atualiza seu livro para a versão 1.1.

De acordo com a previsão do time de desenvolvimento do framework, dentro de alguns meses será lançada a versão 1.2. Tão logo aconteça esse lançamento publicarei outra matéria nesse blog informando e exemplificando as novas funcionalidades.

Esta matéria foi publicada em: 2012-04-19 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2012/04/19/novidades-na-jquery-mobile-1-1/trackback no seu site.