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.
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:
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:
Referência no livro jQuery Mobile: Página 261, cria um novo item 10.3.2.11 Widget Fixedtoolbar
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 });
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 });
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
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);
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; }
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" });
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" });
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" });
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;
};
});
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";
});
Referência no livro jQuery Mobile: Página 252, cria um novo item 10.2.9 Métodos para Fixedtoolbar
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);
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');
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');
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');
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');
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.
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.
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>
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”.
Essa sintaxe estiliza o indicador segundo o tema “a”, apresenta o spinner e o texto Carregando…
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.
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.
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.
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.
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.
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.
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.
Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em…
Há muito tempo que eu não publico um "Teste seu conhecimento". Esta semana, revendo algumas…
Introdução Elementos da marcação HTML podem ser aninhados uns dentro de outros, criando-se uma cadeia…
HTML5? Web universal? É comum eu me deparar com dúvidas sobre a HTML5 não só…
Quem é Tab Atkins Jr? Tab Atkins Jr, um desenvolvedor americano, trabalhou durante muitos anos…
Pessoal, a BrazilJS Conf 2013 disponibilizou para o Maujor cupons de desconto para serem oferecidos…
View Comments
Obrigada pela matéria. Super explicativa!
Matéria muito boa!
Dica valiosa, muito bom!
Opa Consegui fazer oque preciso com esse plugin aqui
http://dev.jtsage.com/jQM-SimpleDialog/demos2/install.html
Maurício e sobre esse exemplo aqui: http://www.jqmovel.com.br/c2/7/
Como seria para abrir a janela modal direto pelo javascript sem existir o clique do mouse?