Por: / Gabriel Zigolis @zigolis 

» Gabriel Zigolis QUEM É? Front-End Developer há 8 anos Instrutor de desenvolvimento web há 6 anos globo.com, grupo RBS, IBM, GoodCard, SelulloidAg... [email protected] http://zigolis.com 

» jQuery Mobile O QUE É? É um framework para desenvolvimento web, otimizado para interação por toque, capaz de criar sistemas de interface unificados, baseados em HTML5 e CSS3 para as principais plataformas móveis, construído sobre o jQuery e jQuery UI. 

» jQuery Mobile COMO EU USO ISSO? Guia de introdução Documentação http://view.jquerymobile.com/1.3.0/docs/intro/ http://view.jquerymobile.com/1.3.0/ 

» jQuery Mobile INICIANDO... Adicione o Doctype de HTML5: ‹!DOCTYPE html› Adicione a meta tag (viewport) Inclua o jQuery, jQuery Mobile e os arquivos JavaScript Inclua o CSS do jQuery Mobile Baixe os arquivos ou use através do CDN 

» jQuery Mobile CÓDIGO < ! D O C T Y P E h t m l > < h t m l > < h e a d > < m e t a n a m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " > < t i t l e > j Q u e r y M o b i l e < / t i t l e > < l i n k r e l = " s t y l e s h e e t " h r e f = " h t t p : / / c o d e . j q u e r y . c o m / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . c s s " / > < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / j q u e r y - 1 . 9 . 1 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " h t t p : / / c o d e . j q u e r y . c o m / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . j s " > < / s c r i p t > < / h e a d > < b o d y > < / b o d y > < / < h t m l > 

» jQuery Mobile COMO FUNCIONA? jQm trabalha com o conceito de páginas Em cada página temos "divs" com o atributo data-role Definindo assim header, content e footer Div com atributo data-role?

» jQuery Mobile CÓDIGO < d i v d a t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " h e a d e r " > < h 1 > R S J S 2 0 1 3 < / h 1 > < / d i v > < d i v d a t a - r o l e = " c o n t e n t " > < p > S e g u n d a e d i ç ã o d o m a i o r e v e n t o d e J a v a s c r i p t d o s u l d o p a í s . < / p > < p > C o n f i r a o s u c e s s o d a p r i m e i r a e d i ç ã o e g a r a n t a o q u a n t o a n t e s a s u a i n s c r i ç ã o . < / p > < / d i v > < / d i v > 

» jQuery Mobile E A MÁGICA ACONTECE Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. RSJS 2013 Todos os direitos reservados. 

» jQuery Mobile EM OUTROS BREAKPOINTS Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. RSJS 2013 Todos os direitos reservados. 

» jQuery Mobile E PARA CUSTOMIZAR? É extramamente simples adaptar ao estilo do seu projeto, com poucas linhas de css e algumas classes no HTML. 

» jQuery Mobile CÓDIGO . u i - p a g e { b a c k g r o u n d : # f 9 f 9 f 9 ; f o n t - f a m i l y : ' P T S a n s ' , s a n s - s e r i f ; } . u i - h e a d e r { b a c k g r o u n d : # f 9 f 9 f 9 ; b o r d e r - t o p : 5 p x s o l i d # A 5 1 D 1 D ; } . l o g o { b a c k g r o u n d : u r l ( . . / . . / i m g / l o g o . p n g ) ; f o n t : 0 / 0 a r i a l ; h e i g h t : 7 5 p x ; w i d t h : 5 8 p x ; } . u i - f o o t e r { b a c k g r o u n d : # A 5 1 D 1 D ; } 

» jQuery Mobile E SUA APLICAÇÃO FICA ASSIM Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. 

» jQuery Mobile WIDGETS De forma simples, prática e rápida podemos enriquecer nossa aplicação com o uso dos Widgets. Caixas de diálogo Elementos de formulário Navbar Transições ... 

» jQuery Mobile CÓDIGO - NAVBAR < d i v d a t a - r o l e = " n a v b a r " d a t a - g r i d = " d " > < u l > < l i > < a h r e f = " # " c l a s s = " u i - b t n - a c t i v e " > s o b r e < / a > < / l i > < l i > < a h r e f = " # " > i n s c r i ç õ e s < / a > < / l i > < l i > < a h r e f = " # " > p r o g r a m a ç ã o < / a > < / l i > < / u l > < / d i v > 

» jQuery Mobile E LÁ VEM ELE... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Todos os direitos reservados. 

» jQuery Mobile WIDGETS E navegação, como funciona se eu precisar de modais, alertas ou simples links? Ah! E como eu faço a mágica das animações? 

» jQuery Mobile CÓDIGO - NAVEGAÇÃO < d i v d a t a - r o l e = " n a v b a r " d a t a - g r i d = " d " > < u l > < l i > < a h r e f = " i n d e x . h t m l " c l a s s = " u i - b t n - a c t i v e " > s o b r e < / a > < / l i > < l i > < a h r e f = " i n s c r i c o e s . h t m l " d a t a - r e l = " d i a l o g " d a t a - t r a n s i t i o n = " p o p " > i n s c r i ç õ e s < / a > < / l i > < l i > < a h r e f = " p r o g r a m a c a o . h t m l " d a t a - t r a n s i t i o n = " f l o w " > p r o g r a m a ç ã o < / a > < / l i > < / u l > < / d i v > 

» jQuery Mobile E LÁ VEM ELE... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Todos os direitos reservados. 

» jQuery Mobile WIDGETS Beleza, mas agora eu preciso de um formulário de contato, e ai? E outra, eu gostaria que ele aparecesse diferente na tela... 

» jQuery Mobile CÓDIGO - PAINEL < d i v d a t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " p a n e l " i d = " c o n t a t o " > / * F o r m * / < / d i v > < ! - - h e a d e r - - > < ! - - c o n t e n t - - > < ! - - f o o t e r - - > < / d i v > 

» jQuery Mobile CÓDIGO - FORM < f o r m > < l a b e l f o r = " n o m e " > N o m e : < / l a b e l > < i n p u t t y p e = " t e x t " n a m e = " n o m e " i d = " n o m e " / > < l a b e l f o r = " e m a i l " > E m a i l : < / l a b e l > < i n p u t t y p e = " e m a i l " n a m e = " e m a i l " i d = " e m a i l " d a t a - c l e a r - b t n = " t r u e " / > < l a b e l f o r = " s e l e c t " > M o t i v o d o c o n t a t o : < / l a b e l > < s e l e c t n a m e = " s e l e c t " i d = " s e l e c t " d a t a - n a t i v e - m e n u = " f a l s e " > < o p t i o n > S e l e c i o n e u m a o p ç ã o < / o p t i o n > < o p t i o n v a l u e = " 1 " > D ú v i d a s < / o p t i o n > < o p t i o n v a l u e = " 2 " > S u g e s t õ e s < / o p t i o n > < / s e l e c t > < l a b e l f o r = " t e x t a r e a " > E s c r e v a s u a m e n s a g e m : < / l a b e l > < t e x t a r e a c o l s = " 4 0 " r o w s = " 8 " n a m e = " t e x t a r e a " i d = " t e x t a r e a " > < / t e x t a r e a > < i n p u t t y p e = " s u b m i t " v a l u e = " E n v i a r " > < / f o r m > 

» jQuery Mobile E DESSA VEZ O QUE TEMOS... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. sobre inscrições programação Dúvidas? Todos os direitos reservados. 

» jQuery Mobile WIDGETS Bacana, e agora mais alguma maneira de "esconder" o conteúdo? 

» jQuery Mobile CÓDIGO - COLLAPSIBLE < d i v d a t a - r o l e = " p a g e " > < d i v d a t a - r o l e = " c o n t e n t " > < p c l a s s = " d e s c - e v e n t o " > < e m > P r o g r a m a ç ã o ! < / e m > < / p > < d i v d a t a - r o l e = " c o l l a p s i b l e - s e t " > < d i v d a t a - r o l e = " c o l l a p s i b l e " d a t a - t h e m e = " c " d a t a - c o n t e n t - t h e m e = " d " > < h 4 > 8 h 3 0 < / h 4 > < p > C h e c k i n < / p > < / d i v > < d i v d a t a - r o l e = " c o l l a p s i b l e " d a t a - t h e m e = " c " d a t a - c o n t e n t - t h e m e = " d " > < h 4 > 9 h 0 0 < / h 4 > < p > D i s s e c a n d o s u a a p l i c a ç ã o c o m C h r o m e D e v T o o l s < / p > < / d i v > < / d i v > < / d i v > < / d i v > 

» jQuery Mobile SIMPLES E DIRETO... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas? 

» jQuery Mobile JAVASCRIPT E o JavaScript, onde e como a gente utiliza? 

» jQuery Mobile CÓDIGO - CHAMADA < s c r i p t s r c = " . . / j q u e r y - 1 . 9 . 1 . m i n . j s " > < / s c r i p t > < s c r i p t s r c = " j q u e r y . c o n f i g s . j s " > < / s c r i p t > < s c r i p t s r c = " . . / m o b i l e / 1 . 3 . 0 / j q u e r y . m o b i l e - 1 . 3 . 0 . m i n . j s " > < / s c r i p t > 

» jQuery Mobile CÓDIGO - JQUERY.CONFIGS.JS $ ( d o c u m e n t ) . o n ( " m o b i l e i n i t " , f u n c t i o n ( ) { $ . m o b i l e . d e f a u l t P a g e T r a n s i t i o n = " f l i p " ; } ) ; 

» jQuery Mobile E O PADRÃO DE NAVEGAÇÃO DO SISTEMA MUDA... Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas? 

» jQuery Mobile JAVASCRIPT Os eventos são outro ponto simples de trabalhar e modificar na aplicação. Touch Orientation Scroll ... 

» jQuery Mobile CÓDIGO - JQUERY.EVENTS.JS $ ( f u n c t i o n ( ) { $ ( w i n d o w ) . b i n d ( " o r i e n t a t i o n c h a n g e " , f u n c t i o n ( e ) { i f ( e . o r i e n t a t i o n = = " p o r t r a i t " ) { $ ( " # l a n d s c a p e " ) . f a d e O u t ( 5 0 0 , f u n c t i o n ( ) { $ ( " # p o r t r a i t " ) . f a d e I n ( 3 0 0 ) ; } ) ; } e l s e { $ ( " # p o r t r a i t " ) . f a d e O u t ( 5 0 0 , f u n c t i o n ( ) { $ ( " # l a n d s c a p e " ) . f a d e I n ( 3 0 0 ) ; } ) ; } } ) } ) 

» jQuery Mobile CÓDIGO - GRID < d i v d a t a - r o l e = " c o n t e n t " > < d i v c l a s s = " u i - g r i d - a " i d = " p o r t r a i t " > < d i v c l a s s = " u i - b l o c k - a b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - b b o x " > P o r t r a i t < / d i v > < / d i v > < d i v c l a s s = " u i - g r i d - c " i d = " l a n d s c a p e " > < d i v c l a s s = " u i - b l o c k - a b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - b b o x " > L a n d s c a p e < / d i v > < d i v c l a s s = " u i - b l o c k - c b o x " > O r i e n t a t i o n < / d i v > < d i v c l a s s = " u i - b l o c k - d b o x " > L a n d s c a p e < / d i v > < / d i v > < / d i v > 

» jQuery Mobile OLHA AGORA A APLICAÇÃO EM LANDSCAPE... Orientation Landscape Orientation Landscape Segunda edição do maior evento de Javascript do sul do país. Confira o sucesso da primeira edição e garanta o quanto antes a sua inscrição. Todos os direitos reservados. sobre inscrições programação Dúvidas? 

» jQuery Mobile ABRA A SUA MENTE Com a manipulação dos eventos podemos por exemplo carregar um JSON com mais dados para uma orientation. Ou para um breakpoint específico. 

» jQuery Mobile QUEM ESTÁ USANDO O JQM? http://m.fiat.es http://m.rolex.com/en/ http://mobile.united.com http://m.sears.com http://events.jquery.org/m/ http://www.jqmgallery.com 

» jQuery Mobile DÚVIDAS? SUGESTÕES OU DOAÇÕES... 

» jQuery Mobile OBRIGADO!!! Material disponível em: www.zigolis.com.br/rsjs/