jQuery Mobile: O que ele pode fazer por você?

Descubra como o framework jQuery para dispositivos móveis pode ajudar a construir uma ótima aparência, apps para todo tipo de aparelho-web com facilidade. Temos muitos exemplos de código e demos incluídos.

Por | @gregoryylaborde Programação

Descubra como o framework jQuery para dispositivos móveis pode ajudar a construir uma ótima aparência, apps para todo tipo de aparelho-web com facilidade. Temos muitos exemplos de código e demos incluídos.

jQuery tem sido uma biblioteca JavaScript bastante popular para a criação de websites altamente interativos e aplicações web. No entanto, ele foi projetado principalmente para navegadores desktop, ele não tem muitos recursos projetados especificamente para a construção de aplicativos móveis para web.

jQuery mobile é um novo projeto que aborda esse justamente este déficit. É um quadro construído em cima do jQuery que fornece uma gama de elementos da interface do usuário e recursos para você usar em seus aplicativos móveis.
A situação é bem sofisticada no momento da escrita na verdade, a primeira versão alpha foi liberada somente no mês passado , mas já é possível fazer algumas coisas com ela.

Neste artigo vamos olhar para alguns dos principais recursos e benefícios de Mobile jQuery, e mostrar alguns exemplos de como este novo quadro pode ajudar você a construir aplicativos móveis de alta qualidade em pouco tempo.

O que podemos fazer com jQuery ?


  • jQuery mobile torna fácil o desenvolvimento das interfaces de usuário para aplicações web móvel .
  • A configuração da interface de marcação é orientada , o que significa que você pode muito bem criar sua interface de aplicativo básica inteiramente em HTML, sem precisar escrever uma única linha de JavaScript. (Claro, você ainda precisa escrever JavaScript se sua aplicação for fazer algo de útil!)
  • Ele fornece uma série de novos eventos personalizados para deixá-lo realizar ações específicas, como toque, toque e segure, furto, e mudar a orientação (ou seja, girando o dispositivo).
  • Implementa a melhoria de forma progressiva para garantir que sua interface de app funciona em praticamente qualquer dispositivo web-enabled .


A estrutura da página móvel jQuery


A maioria das páginas de jQuery para aplicativos web móvel irá seguir este modelo básico:
 
 
   
  Page Title</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
<div data-role="page">
  <div data-role="header">
    <h1>Page Title</h1>
  </div>
 
  <div data-role="content"> 
    <p>Page content goes here.</p>    
  </div>
 
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>
</body>
</html></code></pre><br />
<br />
Para usar jQuery para dispositivos móveis, primeiro você precisa incluir 3 coisas na sua página:<br />
<ul>
<li>jQuery Celular arquivo CSS ( jquery.mobile-1.0a1.min.css )</li><li>A biblioteca jQuery ( jquery-1.4.3.min.js )</li><li>jQuery biblioteca móvel ( jquery.mobile-1.0a1.min.js )</li></ul><br />
Na página acima, já temos ligado diretamente a estes arquivos no CDN jQuery, mas se você preferir, pode baixar os arquivos e hospedá-los em seu próprio servidor.<br />
Como você pode ver, o conteúdo da página em si é envolto em uma div com dados de role- atributos de "página". Isso permite que o jQuery móvel saiba  onde o conteúdo está na marcação.<br />
<br />
Dentro da "página" div , existem outros "header" , "conteúdo" e "footer" div s.Todos eles são opcionais, embora você provavelmente vai querer incluir pelo menos o"conteúdo" div:<br />
<pre><code><div data-role="header"></code></pre><br />
<br />
Isso permite que você crie uma barra de ferramentas na parte superior da página, usando para coisas como o título da página e os botões.(Normalmente existem pelo menos um botão "Voltar" no  qual o usuário pode tocar para retornar à página anterior.) Ao acrescentar dados de posição = "fixo" para o cabeçalho, você pode ter certeza que o cabeçalho ficará sempre no topo da tela.<br />
<br />
<br />
<pre><code><div data-role="content"></code></pre><br />
Contém o conteúdo principal da página, como texto, imagens, botões, listas, formulários e assim por diante.<br />
<br />
<br />
<pre><code><div data-role="footer"></code></pre><br />
Cria uma barra de ferramentas na parte inferior da página, que é bastante útil para coisas como botões de função principal. Ao adicionar os dados de posição = "fixo" para o rodapé, você pode ter certeza que sempre fica na parte inferior da tela.<br />
<br />
<br />
<h2>Páginas dentro de páginas</h2><br />
<pre><code><!DOCTYPE html> 
<html> 
  <head> 
  <title>jQuery Mobile: Pages within Pages</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Home</h1>
  </div>
 
  <div data-role="content"> 
    <p><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#about']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23about" rel="nofollow" >About this app</a></p>    
  </div>
 
</div>
 
<div data-role="page" id="about">
 
  <div data-role="header">
    <h1>About This App</h1>
  </div>
 
  <div data-role="content"> 
    <p>This app rocks! <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#home']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23home" rel="nofollow" >Go home</a></p>    
  </div>
 
</div>
 
</body>
</html></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/pages-within-pages.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fpages-within-pages.html" rel="nofollow" >Veja uma demonstração</a><br />
<br />
Como você pode notar, a página acima contém duas "páginas": Home (com um ID de"home" ) e Sobre (com um ID de "sobre" ). A página inicial possui links para a página Sobre o uso de # cerca , enquanto os links Sobre a página de volta para a página inicial usando # casa . O jQuery Mobile automaticamente intercepta estas ligações de modo que cada div aparece como uma nova "página" no navegador do celular.<br />
<br />
<br />
<h2>Ajax utilizado para navegação</h2><br />
A fim de tornar a experiência do usuário tão simples quanto possível em dispositivos móveis,  o Mobile jQuery usa <a onclick="_gaq.push(['_trackEvent', 'link_tag', 'pfr2842', 'tagto_ajax']);" href='https://www.oficinadanet.com.br/ajax'>Ajax</a> para carregar páginas linkadas por padrão. Então, ao invés do browser seguir o link e abrir uma nova página, o  jQuery intercepta a ligação móvel, solicita a página via Ajax, e injeta o conteúdo da nova página para o DOM da página existente. Ele também usa hashes URL para garantir que cada página ainda receba o seu próprio URL, único bookmarkable.<br />
<br />
O resultado disso é que o usuário é mantido sempre dentro da mesma página principal. O conteúdo das páginas novas simplesmente aparecem dentro dessa página principal. Isso resulta em uma experiência mais suave do que a abordagem tradicional de abrir uma página nova, o que normalmente resulta em uma tela em branco e alguns segundos de polegar girando. Além do mais, uma vez que as novas páginas são inseridas como nova data = papel = "page" div s para a página principal, a página principal efetivamente caches o conteúdo buscado, tornando-o muito mais rápido para exibir as páginas buscadas  em uma próxima vez.<br />
<br />
Enquanto tudo isso soa incrivelmente complexo ( muitas maneiras, é!), Para a maior disso tudo você não precisa saber os detalhes de como ele funciona. Ele apenas faz.<br />
<br />
<br />
<h2>Transições de página</h2><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="jQuery Mobile: O que ele pode fazer por você?" src="http://www.oficinadanet.com.br//imagens/coluna/3244//page-transitions-jquery.jpg" alt="jQuery Mobile: O que ele pode fazer por você?" ></div></blockquote><br />
<br />
Você pode aplicar um  número muito grande de efeitos diferenciados de transição para uma nova págin. Para fazer isso, basta adicionar uma transição de dados e  atributos para o link. Os Valores possíveis são:<br />
<ul>
<li>slide - Deslize da direita para a esquerda (da esquerda para a direita, se tocar no botão Voltar). Este é o padrão.</li><li>slideup - Deslize de baixo para cima (de cima para baixo, se tocar no botão Voltar).</li><li>slideDown - Deslizar de cima para baixo (de baixo para cima, se tocar no botão Voltar).</li><li>pop - Expandir a nova página (contrato-la se tocar no botão Voltar). Ótimo para diálogos e popups.</li><li>desvanecer - Desaparecer a nova página  (realizar se tocar no botão Voltar).</li><li>aleta - Virar a página da velha e da nova página na, como lançar um cartão.</li></ul><br />
Por exemplo, alterando uma linha no anterior "Páginas dentro de páginas"   por exemplo, podemos fazer a página "Sobre" entrar e sair:<br />
<pre><code><p><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#about']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23about" rel="nofollow"  data-transition="flip">About this app</a></p>    </code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/flip-transition.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fflip-transition.html" rel="nofollow" >VER DEMONSTRAÇÃO</a><br />
<br />
<br />
<h2>Diálogos</h2><br />
Pela adição de dados rel = "diálogo" com um link, você pode fazeR a página vinculada aparecer como uma caixa de diálogo, com cantos arredondados, margens e um fundo escuro. Também é uma boa idéia para adicionar uma transição, como tela deslizante , pop ou virar de modo que parece que você está abrindo um diálogo.<br />
<br />
Vamos modificar o nosso link "Sobre" a partir do exemplo acima para que a página vinculada parece um diálogo:<br />
<pre><code><p><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#about']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23about" rel="nofollow"  data-rel="dialog" data-transition="slideup">About this app</a></p>    </code></pre><br />
<br />
<h2>Botões</h2><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="jQuery Mobile: O que ele pode fazer por você?" src="http://www.oficinadanet.com.br//imagens/coluna/3244//buttons.jpg" alt="jQuery Mobile: O que ele pode fazer por você?" ></div></blockquote><br />
Botões são uma parte essencial de qualquer aplicativo baseado no toque. Eles são preferíveis aos links, porque eles fornecem um alvo maior quando a intenção é tocar (importante se você tem dedos gordos como eu!). Para transformar um link em um botão em Mobile jQuery, basta adicionar dados role-= "button" para a marca:<br />
<pre><code><div data-role="content"> 
    <p><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#about']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23about" rel="nofollow"  data-role="button">About this app</a></p>    
  </div>
 
...
 
  <div data-role="content"> 
    <p>This app rocks!</p>
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#home']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23home" rel="nofollow"  data-role="button">Go home</a>
  </div></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/buttons.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fbuttons.html" rel="nofollow" > Ver Demonstração</a><br />
<br />
Você pode facilmente adicionar vários links para os botões usando o ícone de dados e  atributos, para criar uma linha entre botões e grupos horizontalmente ou verticalmente.<br />
<br />
<h2>Conteúdo de formatação</h2><br />
Para tornar-se tão flexível quanto possível, o Mobile jQuery deixa mais n de conteúdo HTML . Ele adiciona um bit de preenchimento para tornar o conteúdo mais legível, mas isso é tudo.<br />
Há também um par de estilos de conveniência para tornar a vida um pouco mais fácil: grids de layout e blocos de conteúdo desmontável.<br />
<br />
<strong>Grids de layout</strong>: permitem organizar o conteúdo das colunas. Há uma grade de duas colunas, e também uma versão em 3 colunas.<br />
<br />
<strong>Blocos de conteúdo dobráveis ou "acordeons": </strong>são blocos de conteúdo com um cabeçalho que, quando clicado,  pode expandir e contrair.<br />
<br />
Aqui está um exemplo de um bloco de conteúdo desmontável:<br />
<pre><code><!DOCTYPE html> 
<html> 
  <head> 
  <title>Collapsible Content Demo</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Home</h1>
  </div>
 
  <div data-role="content">
    <div data-role="collapsible" data-state="collapsed">
      <h2>About this app</h3>
      <p>This app rocks!</p>
    </div>
  </div>
 
</div>
 
</body>
</html></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/collapsible.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fcollapsible.html" rel="nofollow" >Ver Demonstração</a><br />
<br />
<h2>Toque otimizado em  elementos do formulário</h2><br />
<blockquote><div style="text-align:center"><img itemprop="image" class="lazy " title="jQuery Mobile: O que ele pode fazer por você?" src="http://www.oficinadanet.com.br//imagens/coluna/3244//form-elements.jpg" alt="jQuery Mobile: O que ele pode fazer por você?" ></div></blockquote><br />
O jQuery Celular pode substituir automaticamente o padrão de controles de formulário HTML, como campos de texto, caixas e listas de seleção, com controles personalizados que funcionam melhor com uma interface sensível ao toque, e que pode ser denominado de 'forma mais flexível'.<br />
<br />
Por exemplo, caixas de seleção são feitas bem maiores poise elas são mais fáceis de tocar, enquanto batenm em um menu de seleção aparece uma lista de botões grandes para as opções na lista.<br />
<br />
O jQuery Mobile também registra  rótulos e campos de formulário com base na largura de exibição do dispositivo. Se o display está em torno de 480 pixels de largura, em seguida, os rótulos são colocados acima dos campos para economizar espaço horizontal. Para exposições mais amplas, jQuery exibe  etiquetas ao lado de campos.<br />
<br />
A estrutura suporta novos elementos de HTML5, como forma de pesquisa (para caixas de pesquisa) e gama (para sliders). Além disso, você pode criar agradáveis ​​"on / off" switches usando um flip- selecione lista com um atributo de dados da função = "slider" , e colocando duas opções na lista.<br />
<br />
Outro recurso interessante é o agrupamento de botões de rádio e caixas de seleção. Se você agrupar um conjunto de botões de rádio ou checkboxes em um fieldset com um elemento de dados role-= "grupo controle" como atributo, jQuery Mobile automaticamente implementa  estilos aos campos de modo que observem como eles estão agrupados, sem intervalos entre cada campo e arredondando os cantos nos campos superior e inferior.<br />
<br />
Aqui está uma demonstração rápida de alguns desses campos do formulário em Mobile jQuery:<br />
<pre><code><!DOCTYPE html> 
<html> 
  <head> 
  <title>jQuery Mobile Form Demo</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Ice Cream Order Form</h1>
  </div>
 
  <div data-role="content">
    <form action="#" method="get">
     
     <div data-role="fieldcontain">
       <label for="name">Your Name:</label>
       <input type="text" name="name" id="name" value=""  />
     </div>
      
     <div data-role="controlgroup">
       <legend>Which flavour(s) would you like?</legend>
        
       <input type="checkbox" name="vanilla" id="vanilla" class="custom" />
       <label for="vanilla">Vanilla</label>
        
       <input type="checkbox" name="chocolate" id="chocolate" class="custom" />
       <label for="chocolate">Chocolate</label>
        
       <input type="checkbox" name="strawberry" id="strawberry" class="custom" />
       <label for="strawberry">Strawberry</label>
        
     </div>    
      
     <div data-role="fieldcontain">
       <label for="quantity">Number of Cones:</label>
       <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"  />
     </div>
 
     <div data-role="fieldcontain">
       <label for="sprinkles">Sprinkles:</label>
        <select name="sprinkles" id="sprinkles" data-role="slider">
          <option value="off">No</option>
          <option value="on">Yes</option>
        </select> 
     </div>
 
     <div data-role="fieldcontain">
       <label for="store">Collect from Store:</label>
        <select name="store" id="store">
          <option value="mainStreet">Main Street</option>
          <option value="libertyAvenue">Liberty Avenue</option>
          <option value="circleSquare">Circle Square</option>
          <option value="angelRoad">Angel Road</option>
        </select>
     </div>
      
    <div class="ui-body ui-body-b">
      <fieldset class="ui-grid-a">
        <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
        <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>     
      </fieldset>
    </div>
      
  </div>
 
</div>
 
</body>
</html></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/form.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fform.html" rel="nofollow" >Ver demonstração</a><br />
<br />
<h2>As exibições de listas: Listas sobre esteróides</h2><br />
Exibições de lista são um recurso muito poderoso do Mobile jQuery. Elas permitem que você trabelhe um padrão de estilo não-ordenado ou  de listas ordenadas em uma variedade de formas úteis. Para ativar uma lista regular em uma exibição de lista, adicionar dados role-= "listview" para o ul ou ol tag. Aqui estão algumas das coisas que você pode criar usando exibições de lista:<br />
<ul>
<li>Uma lista simples de itens de texto , com uma bela caixa em torno de cada item.</li><li>Uma lista de links, Coloque um uma tag em um item da lista, e o jQuery  adiciona automaticamente um '>' ícone da seta para o lado direito de cada item da lista.</li><li>Listas aninhadas, Se você criar o ninho de outro ul da lista dentro de uma li , o jQuery automaticamente cria uma segunda "página  para a lista incorporada, ligando a partir do original. Isto é muito útil para a criação de árvores de opções de menu, configurações e assim por diante.</li><li>Dividir listas de botões. Ao colocar doi links dentro de uma li , você pode criar um item da lista com uma barra de divisão vertical no lado direito do item. O usuário pode então tocar em qualquer lado esquerdo ou direito do item da lista para conseguir coisas diferentes (como a visualização ou compra).</li><li>Contagem de bolhas. Se você incluir um elemento com uma classe de contraria  em um item da lista, em seguida, o jQuery cria uma pequena "bolha" no ícone do lado direito do item de lista contendo o conteúdo do elemento. Isso é ótimo para coisas como contagens de mensagens em listas de correio.</li><li>Pesquisa de filtragem. Se você adicionar o atributo data-filtro = "true" para um ul ou ol  então a lista fica disponível para pesquisa.  "Filtrar resultados ..." caixa de texto aparecem acima da lista, permitindo ao usuário diminuir as opções. Perfeito para grandes listas.</li><li>Divisores de lista para as listas de divisão em seções. Basta adicionar dados role-= "lista divisor" para qualquer item da lista.</li><li>Miniaturas e ícones. Coloque uma img elemento no início de um item da lista, o jQuery e vai usar a imagem como uma miniatura na lista de escala, para 80 x 80 pixels. Adicionar uma classe de ui-li-icon para a img, o elemento poderá escalá-lo para um ícone de 16 x 16 pixels.</li></ul><br />
<br />
Aqui está uma página como exemplo que mostra algumas das exibições de lista disponíveis para Mobile jQuery:<br />
<pre><code><!DOCTYPE html> 
<html> 
  <head> 
  <title>jQuery Mobile Lists Demo</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Lists Demo</h1>
  </div>
   
  <div data-role="content">
 
    <h2 style="padding: 1em 0;">A list view</h2>
 
    <ul data-role="listview" data-inset="true">
      <li>Cat</li>
      <li>Dog</li>
      <li>Mouse</li>
      <li>Squirrel</li>
    </ul>
     
    <h2 style="padding: 1em 0;">A list of links</h2>
 
    <ul data-role="listview" data-inset="true">
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >About this app</a></li>
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Buy ice cream</a></li>
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Find a store</a></li>
    </ul>
 
    <h2 style="padding: 1em 0;">Nested lists</h2>
 
    <ul data-role="listview" data-inset="true">
      <li>Play
        <ul>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Easy</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Medium</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Hard</a></li>
        </ul>
      </li>
      <li>Settings
        <ul>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Graphics</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Sound</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Device</a></li>
        </ul>
      </li>
      <li>Highscores
        <ul>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >View</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Submit</a></li>
          <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Reset</a></li>
        </ul>
      </li>
    </ul>
 
    <h2 style="padding: 1em 0;">A split button list with filter</h2>
 
    <ul data-role="listview" data-inset="true" data-filter="true">
      <li>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >The Grapes of Wrath</a>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Buy This Book</a>
      </li>
      <li>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >The Trial</a>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Buy This Book</a>
      </li>
      <li>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >A Tale of Two Cities</a>
        <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >Buy This Book</a>
      </li>      
    </ul>
 
    <h2 style="padding: 1em 0;">A list with count bubbles</h2>
 
    <ul data-role="listview" data-inset="true">
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >SuperWidgets</a> <span class="ui-li-count">14</span></li>
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >MegaWidgets</a> <span class="ui-li-count">0</span></li>
      <li><a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow" >WonderWidgets</a> <span class="ui-li-count">327</span></li>      
    </ul>   
  </div>
</div>
</body>
</html></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/lists.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Flists.html" rel="nofollow" >Ver Demonstração</a><br />
<br />
<h2>Theming</h2><br />
O cinza, preto e azul Widgets arredondado produzidso pelo jQuery geram uma impressão  muito agradável, mas a vida seria monótona se todos nós tivemos que usar o mesmo estilo para os nossos aplicativos móveis! Para este fim, jQuery Mobile permite-lhe criar temas personalizados que governam coisas como:<br />
<ul>
<li>Família de fontes</li><li>Sombras</li><li>Canto valores de raio de botões e caixas de</li><li>Conjuntos de ícones</li></ul><br />
<br />
Além disso, cada tema pode conter até 26 amostras de cores diferentes (rotulado de 'a' a 'z'), que controlam a cor de primeiro plano, cor de fundo, gradiente . (O tema jQuery padrão  vem com 5 amostras.) Normalmente, para fazer um elemento de página usar uma amostra particular, você usa o tema de dados- atributos. Por exemplo:<br />
<pre><code><!DOCTYPE html> 
<html> 
  <head> 
  <title>Page Title</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>Home</h1>
  </div>
 
  <div data-role="content"> 
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  data-role="button" data-theme="a">About this app</a>
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  data-role="button" data-theme="b">About this app</a>
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  data-role="button" data-theme="c">About this app</a>
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  data-role="button" data-theme="d">About this app</a>
    <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_#']);"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=%23" rel="nofollow"  data-role="button" data-theme="e">About this app</a>
  </div>
 
</div>
 
</body>
</html></code></pre><br />
<a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/res/File/articles/development/javascript/jquery/jquery-mobile-what-can-it-do-for-you/swatches.html']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Fres%2FFile%2Farticles%2Fdevelopment%2Fjavascript%2Fjquery%2Fjquery-mobile-what-can-it-do-for-you%2Fswatches.html" rel="nofollow" >Ver Demonstração</a><br />
<br />
<h2>Eventos</h2><br />
Tornar mais fácil a construção de interfaces de usuário, jQuery móvel adiciona alguns eventos celulares específicos que você pode usar para detectar ações executadas em dispositivos móveis.<br />
<br />
Por exemplo, você pode usar taphold para detectar se o usuário bateu e segurou o dedo em um elemento, e passe para detectar se o usuário swiped horizontalmente da esquerda para a direita (ou direita para a esquerda) através do elemento:<br />
<pre><code><!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile Events</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">
 
$( function() {
 
  $('body').bind( 'taphold', function( e ) {
    alert( 'You tapped and held!' );
    e.stopImmediatePropagation();
    return false;
  } );  
 
  $('body').bind( 'swipe', function( e ) {
    alert( 'You swiped!' );
    e.stopImmediatePropagation();
    return false;
  } );  
 
} );
 
</script> 
   
</head>
 
<body> 
 
<div data-role="page" id="home">
 
  <div data-role="header">
    <h1>jQuery Mobile Events</h1>
  </div>
 
  <div data-role="content"> 
    <p>Try:</p>
    <ul>
      <li>Tapping and holding</li>
      <li>Swiping</li>
    </ul>
  </div>
 
</div>
 
</body>
</html></code></pre><br />
<br />
<h2>Conclusão</h2><br />
Neste artigo nós exploramos a nova biblioteca jQuery  Mobile, e vimos como ela pode lhe poupar muito tempo e esforço na construção de aplicações web. Embora seja atualmente apenas em alfa, e rodada de forma um pouco áspera nas bordas, é perfeitamente possível  começar a jogar com ele e criação de aplicativos.<br />
<br />
<em>Com informações: <a onclick="_gaq.push(['_trackEvent', 'link_externo', 'de_post-POSTURI', 'para_url_http://www.elated.com/articles/jquery-mobile-what-can-it-do-for-you/']);"   target="_blank"   href="https://www.oficinadanet.com.br/redirect.php?tipo=postout&urlout=http%3A%2F%2Fwww.elated.com%2Farticles%2Fjquery-mobile-what-can-it-do-for-you%2F" rel="nofollow" >http://www.elated.com </a></em></p></p><script src="https://painel.m3midia.com.br/lib/prism/prism.js"></script><link rel="stylesheet" type="text/css" href="https://painel.m3midia.com.br/lib/prism/prism.css"></p>
                    </div>
                    <div class="wifl assuntosfim">
                        Mais sobre: <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2842', 'para_mobile']);"  href="https://www.oficinadanet.com.br/mobile" >mobile</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2842', 'para_jquery']);"  href="https://www.oficinadanet.com.br/jquery" >jquery</a> <a onclick="_gaq.push(['_trackEvent', 'assuntosfim', 'pfr2842', 'para_Ajax']);"  href="https://www.oficinadanet.com.br/ajax" >Ajax</a>
                        <div style="float:right">
                            <span class="bt1-facebook bg9"  onclick="  window.open('https://www.facebook.com/sharer/sharer.php?app_id=209309632417494&u=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fmobile%2Fjquery-mobile-o-que-ele-pode-fazer-por-voce','','width=600,height=400');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2842','flgcomment');  "  >Share</span>
                            <span class="bt1-twitter bg8"  onclick="  window.open('https://twitter.com/intent/tweet?text=jQuery+Mobile%3A+O+que+ele+pode+fazer+por+voc%C3%AA%3F&url=https%3A%2F%2Fwww.oficinadanet.com.br%2Fartigo%2Fmobile%2Fjquery-mobile-o-que-ele-pode-fazer-por-voce&via=oficinadanet','','width=600,height=400');  ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&twitter=1&id=2842','flgcomment');  "  >Tweet</span>
                        </div>
                    </div>
                </div><script type="text/javascript">try { _402_Show(); } catch(e) {}</script>
                
            </div>  
        <div class="bar2 p-rel" id="out_post_barra" data-distance="30" >
            <div class="bar2" id="post_barra" ><span class="titulo1" ><span>Recomendado</span></span><ul class="lst12 m-b-40 wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/18775-10-otimos-smartphones-custobeneficio-em-2017"  onclick="_gaq.push(['_trackEvent', 'barra_conteudo_relacionado', 'pfr2842', 'pto18775']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/18775/capa_14080.jpg" title="10 ótimos smartphones custo/benefício em 2017" alt="10 ótimos smartphones custo/benefício em 2017" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >smartphones</span>
                                    <h3 class="tit tit2" >10 ótimos smartphones custo/benefício em 2017</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/18705-review-moto-g5-plus-um-intermediario-plus"  onclick="_gaq.push(['_trackEvent', 'barra_conteudo_relacionado', 'pfr2842', 'pto18705']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/18705/capinha_14080.jpg" title="Review Motorola Moto G5 Plus - Um intermediário Plus" alt="Review Motorola Moto G5 Plus - Um intermediário Plus" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Motorola</span>
                                    <h3 class="tit tit2" >Review Motorola Moto G5 Plus - Um intermediário Plus</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/18822-vale-a-pena-trocar-meu-moto-g4-plus-pelo-g5-plus"  onclick="_gaq.push(['_trackEvent', 'barra_conteudo_relacionado', 'pfr2842', 'pto18822']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/18822/capa2_14080.jpg" title="Vale a pena trocar meu Moto G4 Plus pelo G5 Plus?" alt="Vale a pena trocar meu Moto G4 Plus pelo G5 Plus?" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Motorola</span>
                                    <h3 class="tit tit2" >Vale a pena trocar meu Moto G4 Plus pelo G5 Plus?</h3>
                                </div>
                            </a>
                        </li></ul><a href="https://www.youtube.com/user/OficinaDaNetTV?sub_confirmation=1" target="_blank" rel="nofollow" class="barra_youtube"><script src="https://apis.google.com/js/platform.js"></script><div class="g-ytsubscribe" data-channel="oficinadanettv" data-layout="default" data-count="default"></div></a><div class="wifl m-b-40"><span class="titulo1" ><span>Últimas publicações</span></span><ul class="lst12  wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/billgates/20306-bill-gates-revela-um-de-seus-arrependimentos-ctrl-alt-del"  onclick="_gaq.push(['_trackEvent', 'ultimos_barra_lst', 'pfr2842', 'pto20306']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20306/ctrlaltdel_500312.jpg" title="Bill Gates revela um de seus arrependimentos: Ctrl + Alt + Del" alt="Bill Gates revela um de seus arrependimentos: Ctrl + Alt + Del" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Bill Gates</span>
                                    <h3 class="tit tit2" >Bill Gates revela um de seus arrependimentos: Ctrl + Alt + Del</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/xiaomi/20307-xiaomi-passa-a-fazer-parte-do-consorcio-de-recarga-sem-fio-no-padrao-qi"  onclick="_gaq.push(['_trackEvent', 'ultimos_barra_lst', 'pfr2842', 'pto20307']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20307/xa_500312.jpg" title="Xiaomi passa a fazer parte do consórcio de recarga sem fio no padrão Qi" alt="Xiaomi passa a fazer parte do consórcio de recarga sem fio no padrão Qi" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Xiaomi</span>
                                    <h3 class="tit tit2" >Xiaomi passa a fazer parte do consórcio de recarga sem fio no padrão Q...</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/smartphones/20299-unboxing-moto-z2-force"  onclick="_gaq.push(['_trackEvent', 'ultimos_barra_lst', 'pfr2842', 'pto20299']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20299/z2force-on_500312.jpg" title="Unboxing Moto Z2 Force" alt="Unboxing Moto Z2 Force" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Smartphones</span>
                                    <h3 class="tit tit2" >Unboxing Moto Z2 Force</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/iphone/20305-iphone-x-iphone-8-e-8-plus-recebem-homologacao-no-brasil-ja-podem-ser-vendidos"  onclick="_gaq.push(['_trackEvent', 'ultimos_barra_lst', 'pfr2842', 'pto20305']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20305/precosdos-iphones_03_500312.jpg" title="iPhone X, iPhone 8 e 8 Plus recebem homologação no Brasil, já podem ser vendidos" alt="iPhone X, iPhone 8 e 8 Plus recebem homologação no Brasil, já podem ser vendidos" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >iPhone</span>
                                    <h3 class="tit tit2" >iPhone X, iPhone 8 e 8 Plus recebem homologação no Brasil, já podem se...</h3>
                                </div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/uber/20302-uber-nao-tem-licenca-renovada-para-operar-em-londres"  onclick="_gaq.push(['_trackEvent', 'ultimos_barra_lst', 'pfr2842', 'pto20302']);"    >
                                <span class="img box-img" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20302/capa-uber_500312.jpg" title="Uber não tem licença renovada para operar em Londres" alt="Uber não tem licença renovada para operar em Londres" >
                                </span>
                                <div class="info" >
                                    <span class="tit" >Uber</span>
                                    <h3 class="tit tit2" >Uber não tem licença renovada para operar em Londres</h3>
                                </div>
                            </a>
                        </li></ul></div>      
        </div>
    </div>
<div class="wifl bottom_pause_post_barra"><div style="float:left;">
<div style="width: 300px; height: 250px; float: left;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ON_CONTEUDO_BOTTOM_1 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-5305121862343092"
     data-ad-slot="1981035403"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
    <div style="float:left; max-width:750px; margin-left:20px" class="wifl"><span class="titulo1" ><span>O QUE LER EM SEGUIDA</span></span><ul class="lst4 post wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/post/12811-formulario-de-contato-em-php"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2842', 'pto12811']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/imagens/post/12811/guiaphp_200113.jpg" title="Formulário de contato em php" alt="Formulário de contato em php" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Formulário de contato em php</h2>
                                <div class="wifl">
                                    <span class="comment cinza">71 | </span><span class="ass-autor cor2">por Nicolas Muller</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/css/galeria-com-miniatura-deslizante-usando-css3"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2842', 'pto2635']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Galeria com miniatura deslizante usando CSS3" alt="Galeria com miniatura deslizante usando CSS3" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Galeria com miniatura deslizante usando CSS3</h2>
                                <div class="wifl">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Suelen Braga</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/javascript/localizacao-de-endereco-atraves-do-cep-usando-jquery"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2842', 'pto2979']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Localização de endereço através do CEP usando jQuery" alt="Localização de endereço através do CEP usando jQuery" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Localização de endereço através do CEP usando jQuery</h2>
                                <div class="wifl">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Jonathan Lamim</span></div>
                            </a>
                        </li><li  >
                            <a class="" href="https://www.oficinadanet.com.br/artigo/javascript/portfolio-imagem-slider"  onclick="_gaq.push(['_trackEvent', 'oq_ler_conteudo_relacionado', 'pfr2842', 'pto2874']);"  >
                                <div class="img box-img2">
                                    <span class="label_tpl1 fix-bl bg1">Programação</span>
                                    <img src="https://www.oficinadanet.com.br/_template/imagem/padrao.jpg" title="Portfolio image slider com CSS e JQuery" alt="Portfolio image slider com CSS e JQuery" >
                                    <span class="gradient"></span>
                                </div>
                                <h2 class="wifl tit4">Portfolio image slider com CSS e JQuery</h2>
                                <div class="wifl">
                                    <span class="comment cinza">0 | </span><span class="ass-autor cor2">por Thauan Almeida</span></div>
                            </a>
                        </li></ul>
    </div>
</div>  
        <div class="wifl post-bottom1" style="margin:0">
            
    <div class="wifl post-bottom1" >
        <span class="titulo1 tit_tag" ><span>Comentários</span></span>
            <div id="btcarregarcomments" class="bt-all tpl2 wifl">Carregar comentários</div>
            <div id="comment" class="comentarios_box">
                <div id="disqus_thread"></div>
            </div>
    </div>
        </div>
        
        
        <div class="wifl post-bottom1 ult-publi" ><a class="titulo1 m-t-40" href="https://www.oficinadanet.com.br"  ><span>Destaques</span><span class="ver" >ver tudo</span></a>
                        <div class="content3" ><ul class="lst7 home wifl  lsn "  id=""  ><li  >
                            <a href="https://www.oficinadanet.com.br/android/20087-android-80-oreo-confira-a-lista-dos-smartphones-que-poderao-baixar-a-versao-do-sistema" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/20087/androidoreo_500312.jpg" title="Android Oreo: lista de smartphones que vão receber a atualização" alt="Android Oreo: lista de smartphones que vão receber a atualização" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Android</span>
                                </div>
                                <h2 class="wifl tit7" >Android Oreo: lista de smartphones que vão receber a atualização</h2>
                                <div class="wifl" ><span class="comment cinza" >33</span> <span class="ass-autor cor2" >por Fernanda Beling</span>
                                </div>
                            </a>
                        </li><li  >
                            <a href="https://www.oficinadanet.com.br/smartphones/20282-review-moto-g5s-analise" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/20282/1traseira_200113.jpg" title="Review Moto G5S - Um Moto G digno | Análise em vídeo" alt="Review Moto G5S - Um Moto G digno | Análise em vídeo" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Smartphones</span>
                                </div>
                                <h2 class="wifl tit7" >Review Moto G5S - Um Moto G digno | Análise em vídeo</h2>
                                <div class="wifl" ><span class="comment cinza" >0</span> <span class="ass-autor cor2" >por Nicolas Muller</span>
                                </div>
                            </a>
                        </li><li  >
                            <a href="https://www.oficinadanet.com.br/post/13635-o-cemiterio-e-fracassos-do-google" class="wifl" >
                                <div class="outimg wifl p-rel" >
                                    <div class="img box-img2">
                                        <img src="https://www.oficinadanet.com.br/imagens/post/13635/capa_200113.jpg" title="O cemitério de fracassos do Google" alt="O cemitério de fracassos do Google" >
                                        <span class="gradient"></span>
                                    </div>
                                    <span class="label_tpl1 bg2 cor1" >Tecnologia</span>
                                </div>
                                <h2 class="wifl tit7" >O cemitério de fracassos do Google</h2>
                                <div class="wifl" ><span class="comment cinza" >11</span> <span class="ass-autor cor2" >por Maximiliano Meyer</span>
                                </div>
                            </a>
                        </li></ul></div>
                        <div class="content4" ><ul class="lst2 lst2 home2 wifl  lsn "  id=""  ><li  >
                            <a class="" href="https://www.oficinadanet.com.br/windows/20268-rede-domestica-windows10" >
                                <div class="box-img2" >
                                    <img src="https://www.oficinadanet.com.br/imagens/post/20268/capa_feiasrrtd_200113.png" title="Como criar um grupo doméstico para compartilhar arquivos e impressoras nos dispositivos com Windows" alt="Como criar um grupo doméstico para compartilhar arquivos e impressoras nos dispositivos com Windows" >
                                </div>
                                <div class="info"><span class="label_tpl1 bg1">Windows</span>
                                    <h2 class="tit2 wifl">Como criar um grupo doméstico para compartilhar arquivos e impressoras nos dispositivos com Windows</h2>
                                    <div class="wifl"><span class="comment">0 | </span><span class="ass-autor"> por Vinicius Schulz</span>
                                    </div>
                                </div>
                                <span class="gradient"></span>
                            </a>
                        </li>
                        </ul></div></div>
    </section>    
</div><div class="wifl">
<div class="wifl" >
    <div class="content-fix wifl p-b-40 p-t-40 bg2" >
        <div class="banner970250_ctr">
            <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- ON_FIM_BIG -->
            <ins class="adsbygoogle"
                 style="display:inline-block;width:970px;height:250px"
                 data-ad-client="ca-pub-5305121862343092"
                 data-ad-slot="5294428607"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
</div></div></div>
                </section>
<footer class="footer wifl" id="footer">
    <div class="corpo">
        <a href="https://www.oficinadanet.com.br" class="logo2"></a>
        <div class="out-menu-footer">
            <ul class="menu-footer lst-footer1 wifl">
                <li><a href="https://www.oficinadanet.com.br/sobre">Sobre nós</a></li>
                <li><a href="https://www.oficinadanet.com.br/contato">Fale conosco</a></li>
                <li><a href="https://www.oficinadanet.com.br/colunista" >Seja um colunista</a></li>
                <li><a href="https://www.oficinadanet.com.br/equipe" >Equipe</a></li>
            </ul>
            <ul class="menu-footer wifl">
                <li><a href="https://www.facebook.com/oficinadanet">Facebook</a></li>
                <li><a href="https://twitter.com/OficinadaNet">Twitter</a></li>
                <li><a href="https://www.youtube.com/user/oficinadanettv">Youtube</a></li>
                <li><a href="https://www.instagram.com/oficinadanetoficial/">Instagram</a></li>
                <li><a href="https://www.oficinadanet.com.br/rss">RSS</a></li>
            </ul>
        </div>
        <div class="box-m3"  >
            <p class="wifl txt1">Um site do grupo</p>
            <a class="m3midia" href="http://www.m3midia.com.br"></a>
            <p class="wifl txt2">© 2017 <span>M3 Mídia</span></p>
            <p class="wifl txt2">Todos os direitos reservados</p>
        </div>
    </div>
</footer>
            <span title="Ir para o topo" class="top_page" id="top_page" ><span></span></span>
        <div class="wifl hgt100 blackoverlay" id="blackoverlay"></div>
<div style="display:none" id="flgcomment"></div>
<div id="out_lib" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</div>
<script type="text/javascript">
    
    var vv={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=vv._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=vv._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
    function BV(str){return vv.decode(str);}

    function scrollPageToID(id)
    {
        $('html,body').animate({ scrollTop: $('#'+id).offset().top - ( $(window).height() - $('#'+id).outerHeight(true) ) / 2  }, 700);
    }
    
    function serializeDataAttr(form)
    {
        var dataarr = new Array();
        for(var i in form.data()) {
            var subarr = new Array();
            subarr['name'] = i;
            subarr['value'] = form.data()[i];
            dataarr.push(subarr);
        }
        return $.param(form.serializeArray().concat(dataarr));
    }

    function testaVazio(campo,comparacao,mensagem,erro)
    {
        if (erro == true) {return true;}
        if (document.getElementById(campo).value == comparacao)
        {
            alert (mensagem);
            document.getElementById(campo).value = "";
            document.getElementById(campo).focus();
            return true;
        }
        else {return false;}
    }
    function testaCheckBox(classe,mensagem)
    {
        erro = true;
        checkboxes = document.getElementsByClassName(classe);

        for(var i=0, n=checkboxes.length; i<n; i++)
        {
            if(checkboxes[i].checked)
                erro = false;
        }

        if(erro == true)
        {
            alert(mensagem);
            checkboxes[0].focus();
            return true;
        }
        else
            return false;
  }
    function ajaxDireto(url,param,retorno,tipo) //usa jquery
    {
        if(!tipo) tipo = "POST"
         $.ajax({
           type: tipo,
           url: url,
           data: param,
           success: function(html){
             $("#"+retorno).html(html);
           }
         });

    }

    function newsletterCad(e,step)
    {
//        alert(step);
//        alert(e);

        if(step == 1)
        {
            alert('1');
            $(e+' .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            alert('2');
//            $('#news_bb_right_plan').css('left','-306px');
        }
        else
        {
            /*
            ajaxDireto('',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
            */
        }
    }

    function populaSelectCidade(ele)
    {
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=populaSelectCidade&sigla='+$(ele).val(),'select_cidade');
    }
       
    $(document).ready(function (e) {
       var header_height = $("header").height();
       $(window).scroll(function(){
           var scrolltop = $(window).scrollTop();
           if(scrolltop > 0)
               $('#out-img-curso-aberto').css('top',(($(window).scrollTop()/2) *-1) + header_height);
           else
               $('#out-img-curso-aberto').css('top',header_height+'px');
       });
    });

    var scroll_aux      = 0;
    var header_top      = $("#header").offset().top;
    var header_height   = $("#header").outerHeight();
    var window_height   = $(window).height();
    var height_document = $(document).height();

    function fixedMenu()
    {
        var scroll = $(window).scrollTop();

        if( scroll >= (header_top+header_height) )
        {
            if(scroll < scroll_aux )
            {
                $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
            }
            else
            {
                if( (scroll+window_height+20) > height_document )
                {
                    $('#mov_header').css({'position':'fixed',transition: '0.3s','top':'0px'});
                }
                else
                {
                    var v_tra  = '0.3s';
                    if( scroll <= ( header_top + header_height + 100) )
                        v_tra  = '0s';

                    $('#mov_header').css({'position':'fixed',transition: v_tra,'top':'-'+header_height+'px'});
                }
            }
        }
        else if(scroll <= header_top)
        {
            $('#mov_header').css({'position':'absolute',transition: '0.3s','top':'0px'});

        }
        scroll_aux = scroll;
    }
    
    function boxHoverSite(act,cic,e)
    {
        var top     = $(e).offset().top+$(e).outerHeight();
        var e_hover = '';

        if($(e).data('box-hover'))
        {
            e_hover = '#'+$(e).data('box-hover')+'_hover';

            switch(act)
            {
                case 2:
                    $('.contr_hov_itens').fadeOut(0);
                    $(e_hover).fadeIn(400);
                    $(e_hover).addClass('contr_hov_itens');
                    boxHoverSite(0,0,e);
                break;
                case 0:
                    if(cic < 5)
                    {
                        var timeBoxHoverSite = setTimeout(function()
                        {
                            cic++;
                            boxHoverSite(0,cic,e);
                        }, 500);
                    }
                    else
                    {
                        clearTimeout(timeBoxHoverSite);
                        if(!$(e_hover).is(":hover") && !$(e).is(":hover") && !$(e_hover+' *').is(":focus"))
                        {
                            $(e_hover).fadeOut(400);
                        }
                        else
                            boxHoverSite(0,0,e);
                    }

                break;
            }
        }
        else
        {
            $('.contr_hov_itens').fadeOut(0);
        }
    }

    function blackoverlay(act)
    {
        if(act)
        {
            $('#blackoverlay').fadeIn(400);
            $('html').addClass('no_scroll');
        }
        else
        {
            $('#blackoverlay').fadeOut(400);
            $('html').removeClass('no_scroll');
        }
    }

    function actAovivo()
    {
        window.location = "";
    }

    function actBodyPago()
    {
        window.open("");
    }

    
    function actSininho()
    {
        _gaq.push(['_trackEvent', 'sininho', 'sininho', 'sininho']);
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome=ONSININHO&valor=1&tempo=36000','box_sininho');
        setTimeout("document.location = 'https://www.oficinadanet.com.br/novidades'",1000);
    }

    function actMenuMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_mobile').trigger('classChange');

            if(!$('#menumobile-act').data('post-left'))
            {
                $('#menumobile-act').data('post-left',$('#menumobile-act').css('left'));
            }
            $('#menumobile-act').css('left','0');
            $('#menumobile').css('display','none');
            $('#fechar_menumobile').css('display','block');
        }
        else
        {
            $('#menumobile-act').css('left',$('#menumobile-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_mobile').trigger('classChange');
            $('#menumobile').css('display','block');
            $('#fechar_menumobile').css('display','none');
        }
        blackoverlay(act);
    }

    function actPopup(act,tipo)
    {
        if(act == 'fechar')
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=setCookie&nome='+tipo+'&valor=1','box_popup');
            $('#box_popup').css('display','none');
            $('#box_popup_big').css('display','none');
            $('#box_popup_mobile').css('display','none');
            blackoverlay();
        }
    }

    function actSmartMobile(act)
    {
        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_smart').trigger('classChange');

            if(!$('#smart_filtro_m-act').data('post-left'))
            {
                $('#smart_filtro_m-act').data('post-left',$('#smart_filtro_m-act').css('left'));
            }
            $('#smart_filtro_m-act').css('left','0');
            $('#smart_filtro_m_abre').css('display','none');
            $('#smart_filtro_m_fecha').css('display','block');
            $('#smart_filtro_ud_out').css('display','block');
        }
        else
        {
            $('#smart_filtro_m-act').css('left',$('#smart_filtro_m-act').data('post-left'));
            $('#blackoverlay').removeClass('blackoverlay_smart').trigger('classChange');
            $('#smart_filtro_m_abre').css('display','block');
            $('#smart_filtro_m_fecha').css('display','none');
            $('#smart_filtro_ud_out').css('display','none');
        }
        blackoverlay(act);
    }

    var scroll_aux2     = 0;
    var window_width    = $(window).width();

    function fixedOnScroll(id)
    {
        if ($('#' + id).length > 0)
        {
            if( window_width > 1300 )
            {

                var k_distance      = 10;
                var comp_height     = 0;
                var scroll_top      = $(window).scrollTop();
                var height_maior    = false;
                var bottom_pause    = height_document;

                var anchor_top_dist     = $('#' + id).offset().top;
                var item_movel_height   = $('#' + id + ' > *').height();

                if ($('#' + id).data('distance'))
                {
                    k_distance = $('#' + id).data('distance');
                }


                if( item_movel_height+k_distance > window_height )
                {
                    height_maior    = true;
                    comp_height     = (item_movel_height - window_height );
                }

                if($( ".bottom_pause_post_barra" ).length)
                {
                    bottom_pause =  $( ".bottom_pause_post_barra" ).offset().top - ( item_movel_height + parseInt($( ".bottom_pause_post_barra" ).css('margin-top')) +k_distance);
                }

                if( bottom_pause  < scroll_top && !height_maior  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": '0px',
                        "position": "absolute",
                        "bottom": "initial",
                        "top": ( ( bottom_pause ) - anchor_top_dist )+'px'
                    });
                    //console.log('1 '+( ( bottom_pause ) - anchor_top_dist ));
                }
                else if( ( bottom_pause + k_distance )  < ( scroll_top - comp_height  ) && height_maior  ) //chega ao fim
                {
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": '0px',
                        "position": "absolute",
                        "bottom": "initial",
                        "top": ( ( bottom_pause ) - anchor_top_dist   )+'px'
                    });
                    //console.log('2 '+( ( bottom_pause ) - anchor_top_dist ));
                }
                else if (( (scroll_top - k_distance) - comp_height + header_height ) > anchor_top_dist && height_maior) //scroll down
                {
                    if(scroll_aux2>scroll_aux)
                    {
                        k_distance = k_distance + header_height;
                        console.log('3.1 '+scroll_aux2+' '+scroll_aux);
                    }
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance) + 'px',
                        "bottom": "initial"
                    });
                    //console.log('3 '+( ( bottom_pause ) - anchor_top_dist ));
                }
                else if (( (scroll_top + k_distance) - comp_height ) > anchor_top_dist && !height_maior) 
                {
                    if(scroll_aux2>scroll_aux)
                    {
                        k_distance = k_distance + header_height;
                        console.log('4 '+scroll_aux2+' '+scroll_aux);
                    }
                    $('#' + id + ' > *').css({
                        "z-index": "100",
                        "left": $('#' + id + ' > *').offset().left + 'px',
                        "position": "fixed",
                        "top": (k_distance)+'px',
                        "bottom": "initial"
                    });
                    //console.log('4 '+( ( bottom_pause ) - anchor_top_dist ));
                }
                else
                {
                    $('#' + id + ' > *').css({
                        "z-index": "initial",
                        "left": 'initial',
                        "position": "initial",
                        "bottom": 'initial',
                        "top": 'initial'
                    });
                    //console.log('5 '+( ( bottom_pause ) - anchor_top_dist ));
                }
            }
            scroll_aux2 = scroll_top;
        }
    }

    function actBtVerMais(e)
    {
        var id = $(e).data('target');
        $('#'+id).show();
        $(e).hide();
    }

    function atcFixedOnScroll()
    {
        fixedOnScroll('out_post_barra');
    }
    

    function actContatoEmpresa(act,tipo)
    {
        if(act && tipo != 0)
        {

            if(tipo == 1)
                $('#empresa_contato_titulo').html('Entre em contato');
            else
                $('#empresa_contato_titulo').html('Solicite um orçamento');

            $('#hidden_tipo').val(tipo);

            $('#blackoverlay').addClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato').fadeIn(400);
            $('#empresa_contato').height($('#empresa_contato'+' > *').outerHeight());
        }
        else
        {
            $('#empresa_contato').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_cont_empresa').trigger('classChange');
            $('#empresa_contato_titulo').html('');
        }
        blackoverlay(act);
    }
    
    function actBuscaDesktop(act)
    {
        $('#busca_clique').toggle();
        $('#busca_input').focus();
        $('#blackoverlay').addClass('blackoverlay_busca_desktop').trigger('classChange');
        blackoverlay(act);
    }

    function actCorrigirTexto(act,e)
    {
        if($('#modal_corrigir_txt').length == 0)
        {
            $(e).data('corrigir_titulo');
            $("html").append('<div class="modal modal-s block corrigir" id="modal_corrigir_txt" ><span class="load-ico" ></span></div>');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=corrigirTexto&monta=1&corrigir_titulo='+$(e).data('corrigir_titulo')+'¶_email='+$(e).data('para_email'),'modal_corrigir_txt');
        }


        if(act)
        {
            $('#blackoverlay').addClass('blackoverlay_corrigir').trigger('classChange');
            $('#modal_corrigir_txt').fadeIn(400);
        }
        else
        {
            $('#modal_corrigir_txt').fadeOut(400);
            $('#blackoverlay').removeClass('blackoverlay_corrigir').trigger('classChange');
        }
        blackoverlay(act);
    }

    function newsletterCad(ele,s)
    {
        if(s == '1')
        {
            var cad_idx = $(ele).data('idx');
            $('#'+cad_idx+'_form2 .out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
            $('#'+cad_idx+'_ulcad').css('left',$('#'+cad_idx+'_ulcad').outerWidth()*-1);
//            $('#'+$(ele).data('id_ulout')).css('height',$('#'+cad_idx+'_ulcad .stp2').outerHeight());
        }
        else
        {
            var cad_idx = $(ele).data('idx');
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#'+cad_idx+'_form1').serialize()+'&'+$('#'+cad_idx+'_form2').serialize(),$(ele).data('id_ulout'));
        }
    }
    
    function fixedMenuDiagramado()
    {
        var scrolltop = $(window).scrollTop();

        if(scrolltop >= 350)
            $('.conteudo .out_menu_diagramado').css('top','0');
        else
            $('.conteudo .out_menu_diagramado').css('top','850px');
    };
    
    $(document).ready(function()
    {
        
        $(function () {
            $(window).scroll(atcFixedOnScroll);
        });

        $('.box_hover').mouseenter(function()
        {
            boxHoverSite(2,0,this);
        });

        $(window).scroll(fixedMenu);
        $(window).scroll(fixedMenuDiagramado);
        fixedMenu();
        $(".amenu_diagramado").click(function(){scrollPageToID($(this).attr('href').substring(1));});
        $(".bt_ver_mais").click(function(){ actBtVerMais(this); });
        $(".ver_mais_preco_obj").click(function(){ scrollPageToID('precos'); });
        $('#bt_header_busca').click(function(){ $('#busca_input').focus();});
        $('#smart_filtro_ud_dwn').click(function(){$(".smart_filtro").animate({scrollTop: '+=200px'}, 300);});
        $('#smart_filtro_ud_up').click(function(){$(".smart_filtro").animate({scrollTop: '-=200px'}, 300);});
        $('#mobile_busca').click(function(){ $('#mobile_bf').css('display','block');});
        $('#aovivo').click(function(){ actAovivo(); });
        $('#sininho').click(function(){ actSininho(true); });
        $('#smart_filtro_m_abre').click(function(){ actSmartMobile(true); });
        $('#busca_clique_open').click(function(){ actBuscaDesktop(true); });
        //$('#busca_clique_open').click(function(){ $('#busca_clique').toggle()});
        $('#smart_filtro_m_fecha').click(function(){ actSmartMobile(false); });
        $('#menumobile').click(function(){ actMenuMobile(true); });
        $('#fechar_menumobile').click(function(){ actMenuMobile(false); });
        $('.fechar_newsletter_big').click(function(){ actPopup('fechar','NEWSBIG'); });
        $('.fechar_youtube_big').click(function(){ actPopup('fechar','YOUTUBEBIG'); });
        $('.fechar_youtube_mobile').click(function(){ actPopup('fechar','YOUTUBEMOBILE'); });
        $('.fechar_rss_big').click(function(){ actPopup('fechar','RSSBIG'); });
        $('.fechar_twitter_big').click(function(){ actPopup('fechar','TWITTERBIG'); });
        $('.fechar_instagram_big').click(function(){ actPopup('fechar','INSTAGRAMBIG'); });
        $('#fechar_newsletter').click(function(){ actPopup('fechar','ONNEWS'); });
        $('#fechar_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $('#popup_youtube').click(function(){ actPopup('fechar','ONYOUTUBE'); });
        $('#fechar_sininho').click(function(){ actSininho(false); });
        $("#form_envia").click(function(){ submitFormulario(); });
        $("#mostra_fone").click(function(){ $('#empresa_fone').html(BV($('#empresa_fone').data('info'))); $('#mostra_fone').hide(); });
        $(".empresa_contato").click(function(){ actContatoEmpresa(true,$(this).data('tipo'));});
        $('#empresa_contato_fechar').click(function(){ actContatoEmpresa(false,0) });
        $('.act_corrigir_texto').click(function(){ actCorrigirTexto(true,this) });
        $('.bt1-comment').click(function(){ scrollPageToID('comment') });
        $('#btcarregarcomments').click(function(){ carregaComentarios() });
//        $('.obj_filtro_preco').click(function(){ labelObjFiltroPreco(this);});

        $(".form_newsletter_cad").submit(function(event){  event.preventDefault(); newsletterCad(this,'1'); });
        $(".form_newsletter_cad2").submit(function(event){ event.preventDefault(); newsletterCad(this,'2'); });

        $('#blackoverlay').on('classChange',function(){
            $('.blackoverlay_sininho').click(function(){ actSininho(false) });
            $('.blackoverlay_mobile').click(function(){ actMenuMobile(false) });
            $('.blackoverlay_smart').click(function(){ actSmartMobile(false) });
            $('.blackoverlay_cont_empresa').click(function(){ actContatoEmpresa(false,0) });
            $('.blackoverlay_corrigir').click(function(){ actCorrigirTexto(false,'') });
            $('.blackoverlay_busca_desktop').click(function(){ actBuscaDesktop(false)});
        });


        $('.accordion_act1 .i-tit').click(function(e)
        {
            if($(this).prop("tagName") != 'A')
            {
                $(this).addClass('click');
                $('.li-wrapper:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });
                $('.i-tit:not(\'.click\')').removeClass('ativo');

                if(!$(this).hasClass('ativo'))
                {
                    $(this).addClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:$(this).find('+ .li-wrapper > .accordion_act1').outerHeight()}, { duration: 400, queue: false });
                }
                else
                {
                    $(this).removeClass('ativo');
                    $(this).find('+ .li-wrapper').animate({height:0},400);
                }
                $(this).removeClass('click');
            }
        });


        if($('#tem_enquete').length > 0)
        {
            ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=getEnquete&enquete_id='+$('#tem_enquete').data("id"),'tem_enquete');
        }

        $('.accordion_act2 .tit_1').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp1:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_id         = 'wrapper_'+$(this).data('wrap0');
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_1').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                $('.tit_1').removeClass('ativo');
            }
            $(this).removeClass('click');
        });

        $('.accordion_act2 .tit_2').click(function(e)
        {
            $(this).addClass('click');
            $('.li-wp2:not(\'.click\')').animate({height:0}, { duration: 400, queue: false });

            var wrapper1_id = 'wrapper_'+$(this).data('wrap0');
            var wrapper2_id = 'wrapper_'+$(this).data('wrap0')+'_'+$(this).data('wrap1');

            if(!$(this).hasClass('ativo'))
            {
                var wrapper1_height     = $('#'+wrapper1_id+' > .accordion_act2 > li').length* $('#'+wrapper1_id+' > .accordion_act2 > li').outerHeight();
                var wrapper2_height     = $('#'+wrapper2_id+' > .accordion_act2 > li').length* $('#'+wrapper2_id+' > .accordion_act2 > li').outerHeight();


                $('#'+wrapper1_id).animate({height:wrapper1_height+wrapper2_height}, { duration: 400, queue: false });
                $('#'+wrapper2_id).animate({height:wrapper2_height}, { duration: 400, queue: false });

                $('.tit_2').removeClass('ativo');
                $(this).addClass('ativo');
            }
            else
            {
                var wrapper1_height = $('#'+wrapper1_id+' > .accordion_act2 > li').length*$('#'+wrapper1_id+' > .accordion_act2 > li > .tit_2').outerHeight();

                $('#'+wrapper1_id).animate({height:wrapper1_height}, { duration: 400, queue: false });
                $('.tit_2').removeClass('ativo');
            }
            $(this).removeClass('click');
        });
    });

    var lst_carregamento        = 1;
    var txtstatus               = 'ok';
    var html_ico_load_auto_load = '<span id="icoload_autoload" class="wifl p-rel" ><span class="load-ico" ></span></span>';
    function carregaConteudo()
    {
        if($('#auto_load_wrapper').length > 0)
        {
            var scrollPosition      = window.pageYOffset;
            var windowSize          = window.innerHeight;
            var footerHeightTop     = $('#footer').offset().top;

            var stop_load           = document.getElementById('auto_load_wrapper').getAttribute('data-stop-load');

            if((scrollPosition + windowSize + 800) > footerHeightTop && stop_load == '0')
            {
                if(txtstatus == 'ok')
                {
                    $("#auto_load_wrapper").append(html_ico_load_auto_load);
                    txtstatus = 'timeout';
                    $.ajax({
                        type: 'POST',
                        url: 'https://www.oficinadanet.com.br/ajax_oficina.php',
                        data: 'act=autoLoadConteudo&lst_carregamento='+lst_carregamento+'&'+serializeDataAttr($('#auto_load_wrapper')),
                        success: function(html)
                        {
                            $("#auto_load_wrapper").append(html);
                            $("#icoload_autoload").remove();
                            txtstatus = 'ok';
                        }
                    });
                    lst_carregamento++;
                }
            }
        }
    }

    $(function () {
        $(window).scroll(carregaConteudo);
        carregaConteudo();
    });

    $(window).scroll(function() {
        if ($(this).scrollTop() >= 150) {
            $('#top_page').fadeIn(200);
        } else {
            $('#top_page').fadeOut(200);
        }
    });
    $('#top_page').click(function() {
        $('body,html').animate({
            scrollTop : 0
        }, 500);
    });


    if ($(".carousel_destaque")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/slick/slick.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/slick/slick.js", function(){
            $('.carousel_destaque').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                pauseOnHover: true,
                autoplaySpeed: 10000
            });
            setTimeout(function(){
                $('.carousel_destaque').removeClass('carregando');;
            }, 1500);
        });
    }

    if ($(".conteudo_galeria")[0])
    {
        $('#out_lib').append('<link href="https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.css" rel="stylesheet">');
        $.getScript("https://painel.m3midia.com.br/lib/lightGallerySlider/lightGallerySlider.js", function(){
            $('.conteudo_galeria').lightSlider({
           item: 3,
           loop:false,
           slideMove:3,
           easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
           speed:600,
           responsive : [
               {
                   breakpoint:800,
                   settings: {
                       item:3,
                       slideMove:1,
                       slideMargin:6,
                     }
               },
               {
                   breakpoint:480,
                   settings: {
                       item:2,
                       slideMove:1
                     }
               }
           ]
            }).lightGallery({

            });
            $('.out_conteudo_galeria').css('display','block');
        });
    }

    </script>

            <script type="text/javascript">
                var disqus_shortname = 'oficinadanet'; // required: replace example with your forum shortname
                var disqus_url = 'https://www.oficinadanet.com.br/artigo/mobile/jquery-mobile-o-que-ele-pode-fazer-por-voce';

                var disqus_config = function () {
                    this.callbacks.onNewComment = [function(comment) {ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php','act=flgcomment&id=2842','flgcomment');
                    }];
                };

                function carregaComentarios()
                {
                    $('#btcarregarcomments').hide();

                    (function() {
                        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
                       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
                        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
                    })();
                }
            </script>
            <div style="display:none;" id="flgcomment"></div>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = OneSignal || [];
OneSignal.push( function() {
    OneSignal.setDefaultTitle("Oficina da Net");
    OneSignal.setDefaultNotificationUrl("https://www.oficinadanet.com.br");
    var oneSignal_options = {appId: "c28261c1-6765-4517-bc5f-38bbeb9f2ec3"};
    //oneSignal_options['persistNotification'] = false;
    oneSignal_options['autoRegister'] = true;
    oneSignal_options['welcomeNotification'] = { };
    oneSignal_options['welcomeNotification']['title'] = "Oi. Obrigado pela inscrição =)";
    oneSignal_options['welcomeNotification']['message'] = "As melhores novidades avisaremos por aqui ;) - Siga @oficinadanet";
    oneSignal_options['safari_web_id'] = "web.onesignal.auto.2068edc0-2ec7-4d8d-bc37-83913e3acbff";
    OneSignal.init(oneSignal_options);
});


            var tempo = '1800';
            window.setTimeout('location.reload();', tempo*1000);</script>
        <div id="box_popup_big" class="box_news_big newsletter">
            <div class="act fechar_box_popup box_hover p-rel fechar_newsletter_big" ></div>
            <div class="bb_left">
                <div class="logo5"></div>
            </div>
            <div class="bb_right"  id="news_bb_right" >
                <div class="wifl p-rel" id="out_new_cad" >
                    <script type="text/javascript" >
    var brandcaptchaOptions = {
        lang: 'pt'
    };
</script>
<ul class="wifl lsn"  id="news_bb_right_plan" >
    <li>
        <form id="newscad_form1" method="POST" >
            <span class="wifl ntit" >ASSINE NOSSA NEWSLETTER</span>
            <p class="wifl">As melhores publicações no<br>seu e-mail</p>
            <input type="hidden" value="NEWSBIG" name="refer"/>
            <input type="hidden" value="cadNewsletter" name="act"/>
            <input type="hidden" value="1" name="newsletter"/>
            <input class="form_campo2 round3p" required="true" type="text" name="nome" id="nome" placeholder="Seu nome" value="" >
            <input class="form_campo2 round3p" required="true" type="email" name="email" id="newsemail" placeholder="Seu e-mail" value="" >
            <input class="wifl bt1 bg4" id="newscad_form1_submit" type="submit" value="CONTINUAR">
            <!--<span class="full bt1 bg4" id="newscad_form1_submit" >QUERO ME CADASTRAR</span>-->
        </form>
    </li>
    <li>
        <p>Preencha para confirmar</p>
        <form id="newscad_form2" method="POST" >
            <div class="wifl" id="out_captcha" ></div>
            <input class="wifl bt1 bg4" id="newscad_form2_submit" type="submit" value="CONFIRMAR">
        </form>
    </li>
</ul>
<script type="text/javascript">
    $("#newscad_form1").submit(function( event ) {
        event.preventDefault();
        $('#out_captcha').html('<div class="wifl p-rel newsbrandcap" id="brand_cap_widget_wrapper" ><span class="load-ico" ></span></div><script type="text/javascript" src="https://api.pontamedia.net/challenge.php?k=8f8436b8ae2f804f336e902439085b08a914db96"></script'+'>');
        $('#news_bb_right_plan').css('left','-306px');
    });

    $("#newscad_form2").submit(function( event ) {
        event.preventDefault();
        ajaxDireto('https://www.oficinadanet.com.br/ajax_oficina.php',$('#newscad_form1').serialize()+'&'+$('#newscad_form2').serialize(),'out_new_cad');
    });
</script>                </div>
            </div>
        </div>
        <script type="text/javascript">
            function abreBoxBigOficina()
            {
                $('#box_popup_big').css('display','block');
                blackoverlay(1);
            }
        </script>
        <script type="text/javascript">setTimeout('abreBoxBigOficina();','30000');</script>
            <script type="text/javascript">
        setTimeout("$('#box_sininho').fadeIn(1000)",1000);
        setTimeout("$('#box_sininho').fadeOut(1000)",5000);
    </script>
    <link rel="stylesheet" type="text/css" href="https://www.oficinadanet.com.br/_template/css/geral.css?v=400">    
<script async="async" src="https://api.cazamba.com/03303c1e265cde1d3eac045f1de60862.js" type="text/javascript"></script>
    </body>
</html>