JQueryMobile HTML5, JavaScript e CSS5 para multiplataforma.

Apresentação em tema: "JQueryMobile HTML5, JavaScript e CSS5 para multiplataforma."— Transcrição da apresentação:

1 JQueryMobile HTML5, JavaScript e CSS5 para multiplataforma

2 Agenda Listas

3 LISTAS Formatação de Conteúdo

4 ESTILIZAÇÃO BÁSICA Elementos ul e ol; Não contempla dl; Trabalha basicamente sobre a apresentação; Apenas um data-role listview na tag ul ou ol;

5 ESTILIZAÇÃO BÁSICA Elementos ul e ol; Não contempla dl; Trabalha basicamente sobre a apresentação;

6 ESTILIZAÇÃO BÁSICA

7 ..................

8 MÚLTIPLAS LISTAS Listas renderizadas com JQM em uma mesma tela causam problemas; Solução: data-inset=true

9 MÚLTIPLAS LISTAS

10

11 SEPARADORES Destaque de um item; Um item marcado com a tag li; Pode estar em uma mesta ListView ou em conjuntos; RS

12 SEPARADORES

13 LISTAS ANINHADAS Framework trabalha pesado na renderização; Constrói outra interface para escolha na lista aninhada; Sem marcação especial, apenas listas dentro de listas; Para adicionar botão back na segunda tela: $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = true })

14 LISTAS ANINHADAS $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = true }) Rio Grande do Sul... São Paulo...

15 LISTAS ANINHADAS

16 NUMERAÇÃO Listas com contagem de itens; Marcação span; Renderização produzida pelo JQM; Para melhor renderização, o span e o texto devem estar marcados como hiperlink com a tag a;

17 NUMERAÇÃO

18 ... RS 87 SC 77 PR 25...

19 ÍCONES EM LISTAS Personalização do ícone a esquerda; Ícone padrão para todos os li que servirá como link; Thumbnail;

20 PERSONALIZAÇÃO ÍCONE Uso do li no exemplo anterior: Rio Grande do Sul 87 Agora: Rio Grande do Sul 87

21 PERSONALIZAÇÃO ÍCONE

22 ÍCONE LINK

23 Em uma lista coloca-se dois links; Na construção do ul ou ol coloca-se o atributo data-split-icon=“icone” Grêmio Site...

24 BUSCAS EM LISTAS Implementa uma busca completa nos itens da lista; Busca compreende parte interna dos textos; Na construção do listview, basta adicionar o atributo data-filter=“true”

25 BUSCAS EM LISTAS