DICAS WEB MAIS

Postagens

Mostrando postagens de 2016

Menu com jquery

julho 16, 2016

O tutorial de hoje não é grande coisa, mas é mais só uma pequena dica, sabe quando você está criando um site e tem aquele menu que aparece em todas as páginas, bom se voê não quer utilizar o php ou uma linguagem servidor, pode muito bem utilizar o jquery mesmo, um arquivo com a extensção js é cahamdo dentro das páginas e quando você fizer uma alteração qualquer, todas as páginas recebem, por exemplo acrescentar um novo link. primeiro vamo criar um código onde teremos um elemento ul que inicializa nossa lista de links <div id="menu"><ul></ul></div> Agora chamaremos o nosso código <script type="text/javascript" src="js/menu.js"></script> Aqui o conteúdo do código externo $(document).ready(function () { $("#menu ul").html( "<li> <a href='#'> Inicio </a> </li>" + "<li> <a href='#'> Sobre </a> </li>...

Leia mais

Primeiro e ultimo elemento com css

junho 27, 2016

Hoje vou ensinar uma maneira de acessar o primeiro e o último elemento de uma lista em html, isso é muito importante, quando precisamos aplicar uma configuração específica a estes elementos, por exemplo, sempre iniciar o primeiro link de um menu com uma cor de destaque, ou retirar a margem do último elemento, você pode precisar em diversas situações. Bom o primeiro elemento é acessado por first-child e o ultimo por last-child vamos criar uma lista em html onde vamos alterar a cor do primeiro e último elemento <ul> <li> parte 1 </li> <li> parte 2 </li> <li> parte 3 </li> <li> parte 4 </li> <li> parte 5 </li> <li> parte 6 </li> </ul> No css eu acesso os primeiro e ultimo elemento <style> ul {border:1px #ccc solid; padding:20px; list-style-type:none;} ul li:first-child {background-color:#c30;} ul li:last-child {background-color:#f00;} ul li {background-color:#ddd; padding:5px; fo...

Leia mais

Posicionar objetos com jquery - drag and drop

junho 25, 2016

Olá, hoje postarei um código com jquery e php para posiciobar objetos com drag and drop do jquery ui, neste exemplo podemos ver os elementos subindo ou descendo e atualizando em tempo real no nosso banco de dados, assim se o usuario tiver algum problema na hora com a internet ou o pc desligar, rss tudo é possível, mas ao menos terá as posições dos objetos salvas. Podemos imaginar inúmeras possibilidades de utilizarmos esta aplicação, um menu personalizado, uma galeria de imagens, um jogo de quebra cabeça, um programa online de criação de sites. Para nosso exemplo vou criar uma ul, com as letras a,b e c, nesta ordem, mas podemos mudar esta posição apenas clicando e arrastando as letras, Para começar vamos chamar o jquery e o jquery ui <script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" ></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <li...

Leia mais

Baixar MP3 de vídeos do youtube com Jquery

junho 22, 2016

Hoje venho apresentar a vocês um ótima API para baixar vídeos do yotube, utilizaremos jquery para adaptar nosso código e dar uma boa expereiência aos usuários, se trata de baixar o vídeo do youtube em MP3, apenas o aúdio, nosso código apenas vai trabalhar a montagem do link para que a API faça exatamente o download que o usuario indicou. Teremos um campo de texto para o usuario inserir a url do vídeo, também receberemos um json da API para mostrar informações do vídeo. Este será um exemplo simples, mas funcional, espero qaue acompanhem os posts deste blog, pois melhorarei este código para exibir a imagem do vídeo e algumas implementações para baixar vídeos vindos de outros aplicativos, como o app do youtube entre outros. Vamos criar um campo de texto: <input type="text" name="url" id="url"> <input type="button" name="download" id="download" value="Baixar"> Agora vamos a parte interessante: ...

Leia mais

Função para enviar qualquer formulário html

junho 16, 2016

Bom dia pessoal, hoje eu estava pensando, como sou webdesigner e sempre preciso criar vários sites, tem projetos que sempre tem um formulário diferente, como é chato você criar aquele esquema para todos os formulários do site, claro se seu site só tem aquele formulário de envio de email simples, mas se tem vários tipos de formulário com campos diferentes, você pode utilizar a função serialize do jquery, a qual já pega todos os dados do seu formulário e monta uma string, esta string é recebida pelo php ou outra linguagem do servidor que esteja a utilizar. Daí você pergunta: e a validação do lado cliente não vai ficar mais complicada? Bom faz muito tempo que não precisamos fazer a validação do lado cliente, você pode perceber como é rápida a resposta do servidor, a não ser que seu site seja muito acessado, porém, não fica dificil não, você pode fazer a validação tranquilamente do lado cliente, se for o caso eu posso até fazer um outro tutorial ensinando como fazer esta validação, ma...

Leia mais

Mostrar e Ocultar Senha com Jquery

junho 11, 2016

Você já viu aqueles formulários de login em sites, onde você pode visualizar a senha que digitou? isso evita que ocorra erros de digitação e o usuario venha a ter que redigitar a senha e também evita bloqueio da senha se seu sistema tiver esta funcionalidade. Utilizaremos a versão 2.0.2 do jquery, nosso formulário vai mostrar a senha e ocultar quando o usuário desejar, bastando clicar em uma imagem de um olho ao lado do campo de digitação da senha. Obiviamente existe a maneira de exibir a senha também quando o usuário segura o botão do mouse, porém particularmente eu prefiro desta forma. Vamos começar? Primerio precisamos de um formulário html <form> <p> Login </p> <p> <label> Login </label> <input type="text" name="login" id="login"> </p> <p> <label> Senha </label> <input type="password" name="senha" id="senha"> <img id="olho...

Leia mais

Cálculo de frete dos correios

abril 06, 2016

Hoje eu trago um tutorial sobre como calcular o frete de um produto dos correios com jquery, com base no valor e peso do mesmo, utilizaremos uma API que retorna um arquivo Json, o que vai deixar nossa aplicação mais rápida, a api retorna o frete para envio sedex ou pac, você pode adaptar para seu tipo de website e fazer as devidas adaptações. vamos começar mostrando como sera a url que utilizaremos, a API http://developers.agenciaideias.com.br/correios/frete/json/cep origem/cep destino/peso/valor o cep sempre formatado assim: 05311900 o peso : O valor mínimo para o cálculo do frete nos Correios é 300g, se o somatório dos pesos dos itens for diferente de zero e menor que 300g, o frete será calculado utilizando o valor mínimo (300g). O valor máximo que pode ser utilizado no cálculo do frete é 30Kg (30.000g), se o somatório do peso dos itens ultrapassar este valor, o frete não será calculado e será assumido o valor zero. valor : O valor máximo do somatório dos itens que p...

Leia mais

exibir tags ao digitar em campo de texto input jquery

abril 04, 2016

Olá amigos hoje trago para vocês um tutorial bem interessante, sobre o jquery, vamos fazer um exemplo bem simples se talvez você já qeubrou cabeça pra fazer aquelas tag´s que surgem quando o usuario digita um termpo por exemplo "javascript". Bom, se quiser algo mais avançado, sugiro que continue acompanhando o blog porque irei postar um código bem diferente deste futuramente, algo que seja mais interessante e integrado ao php, mas neste exemplo vou trazer um digamos: "quebra galho" para você que quer algo bem simples e que nem utilize o php, basta você colocar as palavras em um array, ou melhor as tag´s. vamos começar !!! primeiro criamos um array com as tags que seram sugeridas para o usuario: var sugst = ["html", "jquery", "php", "css", "javascript"]; Capturamos o que foi digitado pelo usuario e jogamos em uma variável: $("#tags").keyup(function () { var valor = $(this).val(); Detectamos se...

Leia mais

Mascara de Telefone com jquery

abril 02, 2016

Muitas pessoas podem ter problemas ao tentar criar uma máscara com Jquery, bom felizmente existe um plugin muito bom e prático para fazer este tipo de tarefa. o jQuery Mask bastando para isso fazer isso aqui: $("#telefone").mask("(99)9999-9999"); Fazendo isso já temos uma mascara do tipo telefone, que só recebe números de 1 a 9 e deve obedecer a esta regra que criamos, quando o usuário clicar no campo ficará assim: ( )____-____ Nosso tutorial não se resume a isso, eu quero fazer um algo a mais aqui, bom, alguns estados agora tem o 9º digito, então para este tipo de telefone teremos que ter esta outra máscara: $("#telefone").mask("(99)99999-9999"); Agora veio um pequeno problema, pois se o usuário digitar o telefone sem o nono digito, automaticamente o jquery vai apagar o campo, portanto vamos ver uma pequena solução para este problema, quero lhe apresentar o evento .focusout() do jquery, ele é acionado assim que um campo perde o f...

Leia mais

Navegador php

abril 02, 2016

Vou partilhar com vocês um pequeno script que faz uma navegação simples na sua página, basta ter as páginas em uma pasta modulos e ele vai exibir o conteúdo das mesmas na área onde você inseriu este código, para fazer a chamada basta colocar no href do link a variavel pag e o nome da página chamada ex: <a href="?pag=home"> Inicio </a> Daí será exibida a página home.php o código está logo abaixo: <?php $filename = "modulos/".$pag.".php"; if ($pag == "") { $filename = "modulos/home.php"; } if (file_exists($filename)) { include_once $filename; } else { echo "<p class='no'> Página não encontrada </p>"; } ?> Você pode jogar suas páginas na pasta módulos apenas com o conteúdo html, você não precisa incluir nelas o <!DOCTYPE> apenas o conteudo que será exibido na area de conteúdo do seu website. você pode baixar o exemplo completo no link Clique aqui

Leia mais