JQuery mobile

jQuery mobile

Guilherme Teodoro da Silva

Robert Wallace P. Oliveira

Nilson Ussem

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

http://www.jquerymobile.com/

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

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

Exemplos de Uso

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)

http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip




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.

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”.

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>

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>

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>

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

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>

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.


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.

Alguns Comandos

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É)

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É)

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>

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>

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” />

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=“” />

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=“” />

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>

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” />

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>

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>

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>

Referência

Site www.jquerymobile.com


JQuery mobile

Mobile

Transcript of JQuery mobile