JQuery mobile
- 1. jQuery mobile Guilherme Teodoro da Silva Robert Wallace P. Oliveira Nilson Ussem
- 2. O Framework jQuery mobile O jQuery mobile framework permite: Projetar um web site ou uma aplicação responsiva que trabalhará em todos os smartphones, tablets e desktops. Utilizar o web site ou aplicativo em qualquer SO. O framework é baseado em Javascript e CSS. Fonte: www.jquerymobile.com
- 3. Suporte aos Browsers Possui um amplo sistema de suporte aos browsers: Apple Android Windows Phone Blackberry Palm WebOS Firefox Mobile Chrome for Android Skyfire Opera Mobile MeeGo Tizen Samsung Bada
- 4. Recursos do Framework Possui uma semântica bastante simplificada. Possui ampla possibilidade de customização de conteúdo. Através de comandos próprios é possível: Criar uma ou múltiplas páginas Criar efeitos de transição entre páginas Criar janela de diálogo Criar até 26 temas através da ferramenta ThemeRoller Criar barra de navegação Criar um grid na página Criar collapsibles Criar formulários Criar campo text Criar campo number Criar campo date Criar campo textarea Criar slider Criar flip switch Criar radio button Criar checkbox
- 7. Instalação do jQuery mobile Para CRIAR um documento utilizando jQuery mobile é necessário fazer referência à biblioteca jQuery mobile: Pode-se utilizar as três referências que apontam para o conteúdo que está online: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile- 1.4.5.min.js"></script> Ou ainda, pode-se abaixar o Código Fonte e fazer referência a ele: Zip File: jquery.mobile-1.4.5.zip (JavaScript, CSS, e imagens)
- 8. Formatando a Página no Device Para especificarmos como o browser deve apresentar o nível de zoom da página e apresentar as suas dimensões, adicionamos na tag <head> uma tag <meta> de formatação: <head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> ... </head> Setando o viewport, a largura será setada à largura (em pixel) da tela do device.
- 9. Criar uma Página Para criar uma página adiciona-se dentro do <body> uma tag <div>: <body> <div data-role=“page”> ...(CABEÇALHO, CONTEÚDO, RODAPÉ) </div> </body> Ou seja, todo o conteúdo que estiver dentro da tag <div> será formatado pelo jQuery mobile com o tipo de formatação “page”.
- 10. Partes da Página Dentro do <div data-role=“page”> adiciona-se Cabeçalho, Conteúdo e Rodapé: <body> <div data-role=“page”> <div data-role=“header”> <h1>Cabeçalho</h1> </div> <div role=“main” class=“ui-content”> <p>Conteúdo</p> </div> <div data-role=“footer”> <h1>Rodapé</h1> </div> </div> </body>
- 11. Criar Múltiplas Páginas Criando múltiplas páginas dentro de um único documento e os links: <body> <--- Início da Página “um” --> <div data-role=“page” id=“um”> <div data-role=“header”> <h1>Cabeçalho</h1> <a href=“#dois”>Próxima Página</a> </div> ...(Conteúdo e Rodapé) </div> <--- Fim da Página “um” --> <--- Início da Página “dois” --> <div data-role=“page” id=“dois”> <div data-role=“header”> <h1>Cabeçalho</h1> <a href=“#um”>Página Anterior</a> </div> ...(Conteúdo e Rodapé) </div> <--- Fim da Página “dois” --> </body>
- 12. Efeitos de Transição entre Páginas Ao referenciar uma página pode-se adicionar efeito de transição utilizando o atributo data-transition= “pop”: <body> <div data-role=“page” id=“um”> <div data-role=“header”> <h1>Cabeçalho</h1> <a href=“#dois” data-transition=“pop”>Próxima Página</a> </div> ...(CONTEÚDO e RODAPÉ) </div> </body>
- 13. Tipos de Efeito de Transição entre Páginas Além do efeito de transição do tipo pop, temos: fade flip turn flow slidefade slide slideup slidedown none
- 14. Criar Janela de Diálogo Dentro do <body> cria-se uma <div> como Janela de Diálogo utilizando o atributo data-role=“dialog”. A Janela de Diálogo pode ser referenciada dentro do CONTEÚDO. <body> <div role=“main” class=“ui-content”> <p>Conteúdo</p> <a href=“#dialogo01” data-transition=“turn”>Janela de Diálogo</a> </div> <div data-role=“dialog” id=“dialogo01”> <div data-role=“header”> <h1>Diálogo</h1> </div> <div role=“main” class=“ui-content”> <p>Conteúdo do diálogo</p> </div> </div> </body>
- 15. Gerando Temas Na página www.jquerymobile.com no link “Themes” há a Ferramenta “ThemeRoller”. O ThemeRoller automatiza o processo de criação de TEMAS, tornando possível a criação dos arquivos CSS para até 26 tipos de temas, denominados: A, B, C ... Z.
- 16. Adicionando Temas à Página Após a criação dos Temas: Faz-se o download do arquivo e o salve dentro da pasta, ou subpasta, junto com o Documento HTML. Dentro da tag <head> adiciona-se os links dos arquivos CSS gerados.
- 17. Alguns Comandos
- 18. Barra de Navegação Para criar um BARRA DE NAVEGAÇÃO, dentro da página cria-se uma <div> utilizando o atributo data-role=“navbar”: ...(CABEÇALHO) <div data-role=“navbar”> <ul> <li><a href=“#two”>Page Two</a></li> <li><a href=“#three”>Page Three</a></li> <li><a href=“https://www.google.com.br”>Google</a></li> </ul> </div> ...(CONTEÚDO e RODAPÉ)
- 19. Grid Para criar um GRID, dentro do CONTEÚDO cria-se um <div> utilizando o atributo class=“ui-grid-a”. ...(CABEÇALHO) <div role=“main” class=“ui-content”> <div class=“ui-grid-a”> <div class=“ui-block-a”>Bloco A</div> <div class=“ui-block-b”>Bloco B</div> </div> </div> ...(RODAPÉ)
- 20. Collapsible Para criar um COLLAPSIBLE, dentro do CONTEÚDO cria-se um <div> utilizando o atributo data-role=“collapsible”: <div data-role=“collapsible”> <h3>Testando Collapsible</h3> <p>Texto do Collapsible</p> </div>
- 21. Formulário Para criar um FORMULÁRIO, dentro do CONTEÚDO cria-se um <form> utilizando o atributo action=“form01.html”: <form action=“form01.html” method=“post”> ...(CONTEÚDO DO FORMULÁRIO) </form>
- 22. Campos text no Formulário Para criar uma LABEL e um CAMPO TEXTO dentro do FORMULÁRIO cria-se dentro do <form> uma tag <label> e uma <input>, respectivamente: <label for=“text01”>Text 01</label> <input type=“text” name=“text01” />
- 23. Campo number no Formulário Para criar um CAMPO NUMBER dentro do FORMULÁRIO cria-se dentro do <form> uma tag <input> : <label for=“number01”>Number</label> <input type=“number” name=“number01” id=“number01” value=“” />
- 24. Campo date no Formulário Para criar um CAMPO DATE dentro do FORMULÁRIO cria-se dentro do <form> uma tag <input> : <label for=“date01”>Date</label> <input type=“date” name=“date01” id=“date01” value=“” />
- 25. Campo textarea no Formulário Para criar um CAMPO TEXTAREA dentro do FORMULÁRIO cria-se dentro do <form> uma tag <textarea> : <label for=“textarea01”>TextArea01</label> <textarea name=“textarea01”></textarea>
- 26. Campo slider no Formulário Para criar um CAMPO SLIDER dentro do FORMULÁRIO cria-se dentro do <form> uma tag <input> : <label for=“slider01”>Slider01</label> <input type=“range” name=“slider01” value=“40” min=“20” max=“190” step=“5” data-highlight=“true” data-theme=“g” />
- 27. Campo flip switch no Formulário Para criar um CAMPO FLIP SWITCH dentro do FORMULÁRIO cria-se dentro do <form> uma tag <select> : <label for=“flipswitch01”>FlipSwitch01</label> <select name=“flipswitch01” data-role=“flipswitch” id=“flipswitch01”> <option value=“On”>On</option> <option value=“Off”>Off</option> </select>
- 28. Radio Buttons no Formulário Para criar RADIO BUTTONS dentro do FORMULÁRIO cria-se dentro do <form> uma tag <fieldset>. Dentro desta, cria-se as tags <label> e <input>: <fieldset data-role=“controlgroup” data-type=“vertical” data-mini=“true”> <legend>RadioButtons</legend> <label for=“radio01”>RadioButton01</label> <input name=“radio01” id=“radio01” type=“radio” value=“1” /> <label for=“radio02”>RadioButton02</label> <input name=“radio01” id=“radio02” type=“radio” value=“2” /> </fieldset>
- 29. Checkbox no Formulário Para criar CHECKBOX dentro do FORMULÁRIO cria-se dentro do <form> uma tag <fieldset>. Dentro desta, cria-se as tags <label> e <input>: <fieldset data-role=“controlgroup” data-type=“vertical” data-mini=“true”> <legend>Checkbox:</legend> <label><input type=“checkbox” name=“checkbox01” checked=“true” /> Checkbox01</label> <label> ><input type=“checkbox” name=“checkbox02” />Checkbox02 </label> </fieldset>