Programar e Aprender: novembro 2016

quarta-feira, 23 de novembro de 2016

JQuery: Carregando pagina html em uma div

Hoje vou mostrar para vocês como é possível carregar uma pagina html dentro de uma div, sem recarregar a pagina inteira. Assim você pode ter uma pagina principal e fazer com que o conteúdo seja alterado somente na div principal.

Carregando pagina dentro da div

Primeiro vamos montar a pagina html principal, com a seguinte estrutura:

 <html>  
 <head>  
 <title>JQuery: Carregando pagina html</title>  
  <link rel="stylesheet" type="text/css" href="css/style.css">  
     <link rel="stylesheet" href="js/jquery/jquery-ui-1.12.1/jquery-ui.css" />  
     <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>  
     <script src="funcao.js"></script>  
 </head>  
 <body>  
 <div id="central"></div>  
 </body>  
 </html>

É muito importante colocar a referencia a biblioteca JQuery e ao link da pagina js com o script.

Agora vamos a pagina js, aqui chamada de funcao.js, nela esta o script responsável por fazer o carregamento da pagina2.html na div da pagina principal.

 funcao.js   
 $(document).ready(function(){  
   /**  
    *   
    */  
   $("#item1").on("click", function(){  
    $("#central").load("pagina2.html #formulario");  
         });  
       });

Como funciona o script, ele chama a pagina2 quando o item1 do menu é clicado. E após faz o carregamento da div id="formulario" da pagina2.html e coloca dentro da div id="central" na pagina1.html

A pagina2 tem a mesma estrutura da primeira, mas só será visualizado a div formulario.

E por hoje é só, até a próxima!

quarta-feira, 16 de novembro de 2016

JQuery: Calendário com DatePicker

Os calendários são muito utilizado, principalmente em formulários, pois facilitam na hora da inserção da data.

Pensando nisso foram desenvolvidos plugins utilizando JavaScript e CSS para criar um calendário, normalmente a partir de um input do tipo Text. O principal pertence a biblioteca JQuery UI (User Interface), da própria JQuery Foundation. Ela fornece uma série de componentes como calendários, abas, botões e caixas de diálogos de fácil utilização.

Aqui veremos o componente DatePicke, que pode ser integrado, facilmente, a uma página com a referencia á JQuery UI e partindo de um input do tipo text, mas pode ser usado também em uma div.

Calendário com JQuery

Como base para o desenvolvimento iremos usar a seguinte estrutura em HTML.

Estrutura básica em HTML:

 <!doctype html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <title>Calendário</title>    
 </head>  
 <body>  
   <p>Data: <input type="text" id="calendario" /></p>  
  </body>  
 </html>

Neste exemplo o calendário é vinculado a um input mas pode ser colocado em uma div, da seguinte forma:

 <!doctype html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <title>Calendário</title>    
 </head>  
 <body>  
   <div id="calendario"></div>  
  </body>  
 </html>

Mudou pouca coisa né?

Agora vamos a segunda parte, e muito importante, a referencia a biblioteca jQuery UI.

Nota: Esta referencia deve sempre ser colocada na pagina html principal.

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />  
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>  
 <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Feito isso, já podemos fazer o script que chamara o método DatePicker, de forma bem básica. Este script pode ser colocado antes da tag </head>, ou se você preferir pode criar uma pagina .js para colocar o script, porem neste segundo caso é necessário chamar a pagina inserindo a seguinte linha, junto com as bibliotecas.

<script src="js/calendario.js"></script>

Onde calendario é o nome da pagina onde esta o script.

E esse é o script:

 <script>  
 $(function() {  
   $( "#calendario" ).datepicker();  
 });  
 </script>

Ele vai retornar um calendário em inglês, para traduzir para português, esse é o código:

 $(document).ready(function (){  
   $("#calendario").datepicker({  
       dateFormat: 'dd/mm/yyyy',  
     dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],  
     dayNamesMin: ['D','S','T','Q','Q','S','S','D'],  
     dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],  
     monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],  
     monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']  
   }       
       );   
 });

Aqui você já terá um calendário prontinho para ser usado no input ou na div, conforme for a sua necessidade.

O DatePicker possui, ainda, varias funcionalidades e você pode conhecer visitando a documentação oficial no site da JQuery UI em DatePicker Documentation.

quinta-feira, 10 de novembro de 2016

HTML + CSS: Menu horizontal com submenus

Hoje vou mostrar para vocês como é simples e rápido fazer um menu horizontal e com submenus, ele pode ser usado em sites e em blogs, igual ao que eu uso aqui no blog.

Para construir esse menu vamos precisar saber um pouco de html, para montar a estrutura e um pouco de CSS para o layout. Sabendo essas duas linguagens você pode deixar a sua imaginação fluir e montar um menu do seu jeito.

Mãos a massa!!!

Você vai precisar de uma plataforma de desenvolvimento, eu usei o básico bloco de notas, para quem não sabe, para criar uma pagina em bloco de notas é só você renomear o arquivo para .html e pronto, mas você também pode usar outra plataforma de sua preferência.

Primeiro precisamos montar a estrutura do menu, que nada mais é uma lista, veja:

 <body>  
 <div id="menuPai">  
 <ul id="nav">  
   <li id="menu"><a href="#">Inicio</a></li>  
   <li id="menu"><a href="#">Linguagens</a>  
       <ul id="sub-menu">  
        <li><a href="#">Java</a></li>  
        <li><a href="#">JavaScript</a></li>  
      </ul>  
   </li>       
   <li id="menu"><a href="#">Sistemas</a>  
      <ul id="sub-menu">  
        <li><a href="#">Sistema 1</a></li>  
        <li><a href="#">Sistema 2</a></li>  
      </ul>  
   </li>  
   <li id="menu"><a href="#">Contato</a></li>  
 <span></span>  
 </ul>  
 </div>  
 </body>  
 </html>

Para direcionar o link para o pagina que você deseja acessar através do menu basta trocar o # pelo endereço da pagina.

Agora para deixar o esse código com cara de menu vamos ao CSS:

 <style type="text/css">  
 #menuPai ul{  
      list-style:none;       
      padding: 0px;  
      margin: 0px;  
      background: rgba(25, 25, 112, 0.2);  
      width:auto;  
      height:40px;  
      border-bottom:3px solid #191970;  
 border-radius:5px;       
 }  
 #menu {   
      position: relative;  
      float:left;  
      width:100px;  
      height:40px;  
      margin-left: 10px;  
 } /*coloca as opções uma do lado da outra */  
 #menu ul{    
 display:none;  
 }  
 #menu a{  
      float:left;  
      position:relative;  
      width:100px;  
      height:30px;  
      margin-top: 0px;  
      padding-top: 10px;  
 /* visual do link menu*/  
      background: rgba(25, 25, 112, 0);  
      color: #333;  
      text-decoration: none;  
      text-align: center;  
      border-bottom:3px solid #191970;  
 }  
 #sub-menu{  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
 width:100px;  
      height:125px;  
 border-radius:5px;  
 }  
 #sub-menu a{  
 text-align:left;  
 text-indent:5px;  
 background: rgba(16, 78, 139, 0.2);       
 }  
 #menu a:hover {  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
      border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */  
 border-radius:5px;  
 }  
 /* Hack para IE MAC*/  
 * html ul li { float: left; }  
 * html ul li a { height: 1%; }  
 /* FIM */  
 #menu:hover ul{display:block;  
 }

Tudo junto fica, e com alguns comentários:

 Menu_Blog1.html  
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--define o tipo de codificação como UTF-8 para mostrar corretamente acentos -->  
 <style type="text/css">  
 #menuPai ul{  
      list-style:none;      /* aqui tira a formatação da lista, ou seja, tira o ponto e o sublinhado */ 
      padding: 0px;  
      margin: 0px;  
      background: rgba(25, 25, 112, 0.2);  /* cor de fundo do menu*/
      width:auto;  
      height:40px;  
      border-bottom:3px solid #191970;  
 border-radius:5px;       
 }  
 #menu {   
      position: relative;  
      float:left;  
      width:100px;  
      height:40px;  
      margin-left: 10px;  
 } /*coloca as opções uma do lado da outra */  
 #menu ul{    /* Aqui deixa o submenu escondido*/
 display:none;  
 }  
 #menu a{  
      float:left;  
      position:relative;  
      width:100px;  
      height:30px;  
      margin-top: 0px;  
      padding-top: 10px;  
 /* visual do link menu*/  
      background: rgba(25, 25, 112, 0);  
      color: #333;  
      text-decoration: none;  
      text-align: center;  
      border-bottom:3px solid #191970;  
 }  
 #sub-menu{  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
 width:100px;  
      height:125px;  
 border-radius:5px;  
 }  
 #sub-menu a{  
 text-align:left;  
 text-indent:5px;  
 background: rgba(16, 78, 139, 0.2);       
 }  
 #menu a:hover {  
 background: rgba(16, 78, 139, 0.2);       
      color: #EDEDED;  
      border-bottom:3px solid #EA0000; /* Linha abaixo do link quando o mouse esta sobre o link */  
 border-radius:5px;  
 }  
 /* Hack para IE MAC*/  
 * html ul li { float: left; }  
 * html ul li a { height: 1%; }  
 /* FIM */  
 #menu:hover ul{display:block;  /* deixo o submenu visivel */
 }  
 </style>  
 </head>  
 <body>  
 <div id="menuPai">  
 <ul id="nav">  
   <li id="menu"><a href="#">Inicio</a></li>  
   <li id="menu"><a href="#">Linguagens</a>  
       <ul id="sub-menu">  
        <li><a href="#">Java</a></li>  
        <li><a href="#">JavaScript</a></li>  
      </ul>  
   </li>       
   <li id="menu"><a href="#">Sistemas</a>  
      <ul id="sub-menu">  
        <li><a href="#">Sistema 1</a></li>  
        <li><a href="#">Sistema 2</a></li>  
      </ul>  
   </li>  
   <li id="menu"><a href="#">Contato</a></li>  
 <span></span>  
 </ul>  
 </div>  
 </body>  
 </html>

Bom é isso, simples né? Na verdade, não parece ser simples a primeira vista, mas quando você começa a identificar cada item e como modificar ele você vai conseguir fazer muito mais e vai achar tudo fácil.

Até a próxima!