jquery mobile framework

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

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”>
<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”>
<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”>
<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>
<p>Conteúdo</p>
<a href=“#dialogo01” data-transition=“turn”>Janela de Diálogo</a>
</div>
<div data-role=“dialog” id=“dialogo01”>
<h1>Diálogo</h1>
</div>
<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 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 framework

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (8)

Destaque

Destaque (17)

Semelhante a jquery mobile framework

Semelhante a jquery mobile framework (20)

jquery mobile framework