jQuery Mobile - jQuery Mobile

jQuery Mobile

Desenvolvedor (s)	A equipe jQuery
lançamento inicial	16 de outubro de 2010 ( 2010-10-16 )
Versão estável	1.4.5 / 31 de outubro de 2014 ( 31/10/2014 )
Versão de visualização	1.5.0-rc1 / 10 de setembro de 2018 ( 10/09/2018 )
Repositório
Escrito em	JavaScript
Plataforma	Consulte Suporte a navegador móvel
Tamanho	351 KB / 142 KB (reduzido) / 40 KB (reduzido, gzipado)
Modelo	Estrutura de aplicativo móvel
Licença	MIT
Local na rede Internet	jquerymobile .com

jQuery Mobile é uma estrutura da web otimizada por toque (também conhecida como estrutura móvel), mais especificamente uma biblioteca JavaScript , desenvolvida pela equipe do projeto jQuery . O desenvolvimento se concentra na criação de um framework compatível com uma grande variedade de smartphones e tablets , necessário devido ao crescente mas heterogêneo mercado de tablets e smartphones. A estrutura do jQuery Mobile é compatível com outras estruturas e plataformas de aplicativos móveis, como PhoneGap , Worklight e muito mais.

Recursos

• Compatível com todos os principais navegadores de desktop, bem como todas as principais plataformas móveis, incluindo Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
• Construído sobre o núcleo do jQuery, para que tenha uma curva de aprendizado mínima para pessoas já familiarizadas com a sintaxe do jQuery.
• Estrutura de temas que permite a criação de temas personalizados.
• Dependências limitadas e leves para otimizar a velocidade.
• A mesma base de código subjacente será dimensionada automaticamente para qualquer tela.
• Configuração orientada a HTML5 para o layout de páginas com o mínimo de scripts.
• Navegação alimentada por AJAX com transições de página animadas que fornecem a capacidade de criar URLs semânticos por meio de pushState.
• Widgets de IU otimizados para toque e independentes de plataforma.

(Fonte: do site do jQuery Mobile)

Exemplo de uso

$('div').on('tap', function(event){
  alert('element tapped ');
});

$(document).ready(function(){
    $('.myList li').on('click touchstart', function() {
        $('.myDiv').slideDown('500');
    });
});

Um exemplo básico

O que se segue é um projeto básico do jQuery Mobile que utiliza elementos semânticos HTML5 . É importante vincular às bibliotecas jQuery e jQuery Mobile JavaScript e à folha de estilo (os arquivos podem ser baixados e hospedados localmente, mas é recomendável vincular aos arquivos hospedados no jQuery CDN ).

Uma tela do projeto é definida por um sectionelemento HTML5, e data-rolede page. Observe que data-roleé um exemplo do dataatributo HTML5 , neste caso sendo definido pelo jQuery Mobile. Uma página pode ter headere footerelementos com data-rolede headere footer, respectivamente. No meio, pode haver um articleelemento, com um rolede maine um classde ui-content. Por último, um navelemento, com data-rolede navbarpode estar presente.

Um documento HTML pode conter mais de um sectionelemento e, portanto, mais de uma tela cheia de conteúdo . Desta forma, só é necessário carregar um arquivo que inclua várias páginas de conteúdo. Uma página pode ser vinculada a outra página no mesmo arquivo fazendo referência ao atributo id da página (por exemplo href="#second").

No exemplo abaixo, dois outros atributos de dados são usados. O data-themeatributo informa ao navegador qual tema renderizar. O data-add-back-btnatributo adiciona um botão Voltar à página se definido como true.

Por último, os ícones podem ser adicionados aos elementos por meio do data-iconatributo. O jQuery Mobile possui cinquenta ícones comumente usados ​​integrados.

Uma breve explicação dos atributos de dados usados ​​neste exemplo:

data-role - especifica a função do elemento, como cabeçalho, conteúdo, rodapé, etc.

data-theme - especifica qual tema de design usar para elementos em um contêiner. Pode ser definido como: a ou b.

data-position - especifica se o elemento deve ser fixo, caso em que será renderizado na parte superior (para cabeçalho) ou inferior (para rodapé).

transição de dados - especifica uma das dez animações integradas para usar ao carregar novas páginas.

data-icon - especifica um dos cinquenta ícones integrados que podem ser adicionados a um elemento.

<!doctype html>
<html>
    <head>
		<meta charset="utf-8">
		<title>jQuery Mobile Example</title>
		<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">		
    </head>
 
    <body>
        <section data-role="page" id="first" data-theme="a">
            <header data-role="header" data-position="fixed">
                <h1>Page 1 Header</h1>
            </header>
 
            <article role="main" class="ui-content">
                <h2>Hello, world!</h2>
                <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right">Go to Page 2</a>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 1 Footer</h4>
            </footer>
        </section>
 
        <section data-role="page" id="second" data-theme="b">
            <header data-role="header" data-position="fixed"  data-add-back-btn="true">
                <h1>Page 2 Header</h1>
            </header>
 
            <article role="main" class="ui-content">
                <h2>Example Page</h2>
            </article>
 
            <footer data-role="footer" data-position="fixed">
                <h4>Page 2 Footer</h4>
            </footer>
        </section>
		<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </body>
</html>

Temas

O jQuery Mobile fornece uma estrutura de temas que permite aos desenvolvedores personalizar esquemas de cores e certos aspectos CSS dos recursos de IU. Os desenvolvedores podem usar o aplicativo jQuery Mobile ThemeRoller para customizar essas aparências e criar experiências de marca. Depois de desenvolver um tema no aplicativo ThemeRoller, os programadores podem baixar um arquivo CSS customizado e incluí-lo em seu projeto para usar seu tema customizado.

Cada tema pode conter até 26 "amostras" de cores exclusivas, cada uma das quais consiste em uma barra de cabeçalho, corpo de conteúdo e estados de botão. A combinação de diferentes amostras permite que os desenvolvedores criem uma gama mais ampla de efeitos visuais do que seriam capazes com apenas uma amostra por tema. Alternar entre diferentes amostras dentro de um tema é tão simples quanto adicionar um atributo chamado "data-theme" aos elementos HTML.

O tema padrão do jQuery Mobile vem com duas amostras de cores diferentes, chamadas "a" e "b". Aqui está um exemplo de como criar uma barra de ferramentas com a amostra "b":

<div data-role="header" data-theme="b"> 
	<h1>Page Title</h1> 
</div>

(Fonte: do site do jQuery Mobile)

Já existe um punhado de temas de estilo de código aberto que são desenvolvidos e suportados por organizações de terceiros. Um desses temas de estilo de código-fonte aberto é o tema de estilo Metro que foi desenvolvido e lançado pela Microsoft Open Technologies, Inc. O tema de estilo Metro foi criado para imitar a IU do Metro (linguagem de design) que a Microsoft usa em seus sistemas operacionais móveis.

Suporte a navegador móvel

Chave:

• A - Alta qualidade. Um navegador capaz de, no mínimo, utilizar consultas de mídia (um requisito para o jQuery Mobile). Esses navegadores serão testados ativamente, mas podem não receber todos os recursos do jQuery Mobile.
• B - Qualidade média. Um navegador capaz que não tem participação de mercado suficiente para garantir os testes diários. As correções de bugs ainda serão aplicadas para ajudar esses navegadores.
• C - Baixa qualidade. Um navegador que não é capaz de utilizar consultas de mídia. Eles não receberão nenhum script jQuery Mobile ou CSS (voltando para HTML puro e CSS simples).
• * - Próximo navegador. Este navegador ainda não foi lançado, mas está em testes alfa / beta.

(Fonte: do site do jQuery Mobile)

Histórico de lançamento

Veja também

• jQTouch
• jQuery
• Adaptação de conteúdo
• Estúdio DaVinci
• iUI
• PhoneGap
• Tizen
• ViziApps
• Bootstrap

Referências

Leitura adicional

links externos

• Website oficial
• O Projeto jQuery
• Documentação e demonstração do jQuery Mobile
• Estrutura do jQuery Mobile: escreva menos, faça mais
• jQuery Mobile C # ASP.NET por Matthew David Elgert
• PropertyCross, ajudando você a selecionar uma estrutura móvel de plataforma cruzada: jQuery Mobile