JQuery mobile
-
Upload
dam01pucminas -
Category
Mobile
-
view
93 -
download
0
Transcript of JQuery mobile
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
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
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)
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.
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>