Download
1 / 25
250 likes | 321 Views
JQueryMobile. HTML5, JavaScript e CSS5 para multiplataforma. Agenda. Listas. Formatação de Conteúdo. LISTAS. 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 ;. ESTILIZAÇÃO BÁSICA.
E N D
JQueryMobile HTML5, JavaScript e CSS5 para multiplataforma
Agenda • Listas
Formatação de Conteúdo LISTAS
ESTILIZAÇÃO BÁSICA • Elementos ule ol; • Não contempla dl; • Trabalha basicamente sobre a apresentação; • Apenas um data-rolelistviewna tagulou ol;
ESTILIZAÇÃO BÁSICA • Elementos ule ol; • Não contempla dl; • Trabalha basicamente sobre a apresentação;
ESTILIZAÇÃO BÁSICA ... <div data-role="content"> <uldata-role="listview"> <li>... </li> </ul> <br> <ul> <li>...</li> </ul><br> <oldata-role="listview"> <li>...</li> </ol> <br> <ol> <li>...</li> </ol> </div> </div> ...
MÚLTIPLAS LISTAS • Listas renderizadas com JQM em uma mesma tela causam problemas; • Solução: • data-inset=true
SEPARADORES • Destaque de um item; • Um item marcado com a tagli; • Pode estar em uma mestaListView ou em conjuntos; • <li data-role="list-divider">RS</li>
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 })
LISTAS ANINHADAS <head> <script src="jquery-1.6.4.min.js"></script> <script> $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = true }) </script> </head> <body> <uldata-role="listview"> <li>Rio Grande do Sul <ul> <li> ... </li> </ul> </li> <li>São Paulo <ul> <li> ...</li> </ul> </li> </ul> </body>
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 taga;
NUMERAÇÃO ... <div data-role="content"> <uldata-role="listview"> <li><a href="#">RS<span class="ui-li-count">87</span></a></li> <li><a href="#">SC<span class="ui-li-count">77</span></a></li> <li><a href="#">PR<span class="ui-li-count">25</span></a></li> </ul> </div> ...
ÍCONES EM LISTAS • Personalização do ícone a esquerda; • Ícone padrão para todos os li que servirá como link; • Thumbnail;
PERSONALIZAÇÃO ÍCONE • Uso do li no exemplo anterior: • <li><a href="#">Rio Grande do Sul <span class="ui-li-count">87</span></a></li> • Agora: • <li><a href="#"><img src=“a.jpg” class=“ui-li-icon”/>Rio Grande do Sul <span class="ui-li-count">87</span></a></li>
ÍCONE LINK • Em uma lista coloca-se dois links; • Na construção do ulou olcoloca-se o atributo data-split-icon=“icone” <uldata-role="listview" data-inset="true" data-split-icon="gear"> <li> <a href="#">Grêmio</a> <a href="#">Site</a> </li> ...
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”
