Utilizando a biblioteca JQuery para criar requisições HTTP com PHP
Ia-e galerinha das noites mal-dormidas!!!
Se houve muito falar de Ajax, é ali e acolá…poem ajax no formulário, na foto, no microondas … é bonito mesmo mas é bom saber onde usar, lembro que quando comecei a experimentar a técnica meus programas em PHP tinham no máximo 5 linhas cada arquivo e já os arquivos JScript…. meo deos, milhares de linhas em JScript, dai o cara diz que não funcionou no navegador VelejePlus (rs) dele… que chato!
Bem, eu utilizo a tecnica e acredito eu que com moderação, isso é importante!
Vamos ver um caso típico de uso de Ajax, no meu caso, lembrando que a idéia do Ajax também é a utilização de XML para transportar os dados, por isso não denomino o que eu faço como sendo Ajax pois não utilizaremos XML, ao menos neste caso, mas chega de lorotas!
Escolhi um caso simples, porém interessante para mostrar à vocês. Vamos criar um formulário HTML para envio de dados via POST para o PHP utilizando requisição Http ( ou ajax se preferir) onde o envio dos dados será verificada e deverá retornar um Array e caso não tenham sido enviados retornará uma mensagem/alerta. No geral parecerá com um tipo de validação do formulário em Ajax, mas a idéia é que vocês implementem a partir disso.
O velho e bom HTML vem aí !!!
<html>
<head>
<title>PHP e JQuery</title>
<!– Inclui o Jquery –>
<script src=”jquery-1.2.6.js“ type=”text/javascript“></script>
<!– Inclui o Actions que contém os comando escritos por nós –>
<script src=”actions.js“ type=”text/javascript“></script>
<!– Inclui o CSS para dar uma corzinha –>
<link href=”style.css“ type=”text/css“ rel=”stylesheet” />
</head>
<body>
<form name=”f“ id=”f“ onSubmit=”return false“>
<label>Nome:</label>
<input type=”text“ name=”nome“ id=”nome“>
<label>Mail:</label>
<input type=”text“ name=”mail“ id=”mail“>
<br><br>
<button id=”btn1“>Consulta</button>
</form>
<p> </p>
<!–Div utilizada para exibir as mensagens Ajax –>
<div id=”d“></div>
</body>
</html>
Como podem ver é um arquivo HTML puro e simples, notem que não há no formulário o Method e Action responsáveis por informar como e para onde os dados serão enviados, isso nós definiremos no JScript a seguir, note também que não há nenhum evento no botão Consulta, também será definido no JS.
No inicio do HTML existe a chamada ao arquivo JQuery que é a bibilioteca que utilizaremos para instanciar o Ajax e também laguns eventos e efeitos, ao final do post informarei o link dos docs. Temos ainda a chamada ao arquivo Actions.js que possui as chamadas à eventos e efeitos do Jquery assim como a instancia do Ajax, o arquivo JQuery nos não mexeremos, apenas fazemos o download e incluimos no programa, já o Actions nós escrevemos para utilizar os recursos do JQuery, como poderão ver logo.
Ok, temos apenas um formulário com alguns arquivos inclusos, precisamos agora de um arquivo PHP que receberá os dados do fomulário e devolverá uma mensagem que deverá ser tratada pelo JS e exibida na tela. Para tratar os dados utilizaremos o arquivo Actions(que escrevemos), o arquivo PHP que receberá os dados se chamará data.php e vamos ve-lo agora.
O arquivo Data.php
<?
# Evita o armazenamento em Cache
@header(“Content-Type: text/html; charset=iso-8859-1″);
@header(“Cache-Control: no-cache, must-revalidate“);
@header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT“);
# Verifica se os dados foram enviados do form e retira o espaco em branco (trim)
if(trim($_POST['mail']) != “” && trim($_POST['nome']) != “”)
{
# Adiciona os valores vindos do form em um Array
$arr['usuario']['nome'] = $_POST['nome'];
$arr['usuario']['mail'] = $_POST['mail'];
# Imprime o Array
echo “<pre>”;
print_r($arr);
echo “</pre>”;
# Neste caso poderia ser um insert ou Validação no DB
}
else{
# se os dados nao foram enviados
echo 1; }
?>
Certo, vamos entender isso!
As linhas que contém o header servem para evitar que os dados fiquem em cache, como ao submiter os dados não haverá mudança de página e esse é o propósito do programa, evitar que o envio dependa dos dados serem enviados a outra página (POST), assim podemos mudar os valores do form tranquilamente e eles não serão armazenados no cache.
A linha que contem o IF está verificando se dados foram submetidos via post dos campos nome e email, caso sim ele remove os espaços contidos nas variáveis com o TRIM, em seguida monta um Array e armazena os dados vindos no form, na linha abaixo o Print_r printa o Array na tela. Claro que ao, digamos, validar as informações (neste caso foi o minimo possível) poderiamos enviar os dados (no caso nome e email vindo do form) para um BD ou qualquer outra coisa, mas fizemos isso apenas para demonstrar com o minimo de programação o resultado que esperamos.
No caso o ELSE, quer dizer que nenhum dado foi submetido do formulário e por isso nós retornamos uma mensagem o valor 1 que no JS será substituido pela mensagem “Preencha os campos”. Agora, veremos o arquivo que faz tudo acontecer dinâmicamente e que com certeza é o único chato de explicar caso você ainda não tenha tido nenhum contato com JQuery!
Só para resumir a grosso modo o que é o JQuery (para quem não sabe), é o seguinte… ele realiza com comandos pequenos e funções o que teriamos que fazer em dezenas de linhas utilizando o JS puro.
Por ex:
Para adicionar uma classe CSS de um elemento HTML usando JS puro teriamos mais ou menos o que segue abaixo…
obj = document.getElementById(“form1″);
obj.className = ‘ClasseCSS’;
O arquivo PHP está bem pequeno e não faz tanta coisa em nosso exemplo, mas servirá bem para lhes dar uma direção.
Para fazermos a mesma coisa com o JQuery é necessário apenas:
$(“#form1″).addClass(“ClasseCSS”)
Um outro exemplo que até usaremos no post é o bloco utilizado para recuperar dados do formulário
Em JS puro ficaria assim:
nome = document.form1.nome.value;
Com JQuery fica assim:
nome = $(‘#nome’).val()
Entendeu mais ou menos? Agora imagine algo como uma animação, pois é … o JQuery faz com uma única linha!
Não deixe de ver os docs senão você não fará muita coisa ou nada!
O arquivo Actions.js (prepare-se para ler os comentários do código)
// Mesmo que window.onload
$(document).ready(function ()
{
// cria um evento no click no botao btn1
$(“#btn1″).click(function(){sendform()})
})
// Funcao que recupera e envia os dados para o data.php via post
function sendform()
{
// recupera os dados do form
fnome = $(‘#nome‘).val()
fmail = $(‘#mail‘).val()
// instancia o ajax via post informando o destino no caso data.php
$.post(“data.php“,
// envia os dados do form nas variaveis nome e mail
{nome: fnome, mail: fmail},
// recupera as informacoes vindas do data.php
function(data)
{
// se retornou 1 entao os dados nao foram enviados
if(data == 1)
{
// remove a classe css sucess da div
$(“#d“).removeClass(“sucess“)
// adiciona a classe error da div
$(“#d“).addClass(“error“)
// insere na div o conteudo/mensagem de erro
$(“#d“).html(“Preencha todos os campos!“)
}
else{
// se nao retornou 1 entao os dados foram enviados
// remove a classe error da div
$(“#d“).removeClass(“error“)
// adiciona a classe sucess na div
$(“#d“).addClass(“sucess“)
// insere o conteudo vindo do data.php na div
$(“#d“).html(data);
}
// torna a div invisivel
$(“#d“).css(“display“,”none“);
// torna a div visivel usando o efeito show com a slow de parametro
$(“#d“).show(“slow“);
}
)
// efeito show na div
$(“#d“).show(“slow“);
}
É amiguinhos, viram ai ? tem bastante JS mas o resultado é bacana, bem acho que deu para entender por que se deve utilizar isso com moderação… Talvez para não ficar 50% do projeto programando em JS e olhem que utilizamos o Jquery senão essas linhas de JS seriam no minimo o dobro do que foram apresentadas.
Bom, agora você que tem o raciocinio aguçado me pergunta:
- Por que não validar os campos vazios no JS sem a necessidade de enviar ao data.php ?
E te respondo, a idéia não é validar e sim implentar algo dentro do IF, neste caso usamos apenas a atribuição dos valores do form em um Array mas como já disse poderia ser um UPDATE, INSERT, DELETE no seu banco de dados, basta implementar algo a partir daí!
Links:
Abraços,
Utilizando um menu Fisheye (olho de peixe)
Olá,
Cansado daquele velho menu que muda a cor do texto ao passar o mouse?
Que tal um menu olho de peixe, simples e bonito ?
FishEye
O menu é “animado” por Jscript que a “grosso modo” consiste de 2 imagens para cada item do menu, por ex. para cada item existem 2 imagens, neste caso, 1 imagem com 90 x 90 e outra 128 x 128… O Jscript, como já disse, cria a transição da menor para a maior criando o efeito que conhecemos como “olho de peixe” …
Existe apenas 3 pontos na configuração que acho interessante mexer no Jscript se for necessário, são:
startSize : 90,
endSize : 128,
imgType : “.gif”,
Bem, no arquivo fisheye.js logo à partir da 2º linha existem essas informações acima.
startSize : Tamanho inicial da imagem, bom que seja o tamanho da imagem menor.
endSize : Tamanho final da imagem, bom que seja o tamanho da imagem maior.
imgType : Extensão do arquivo de imagem
Ah, se você não gostou dos ícones que estão no exemplo segue um link que utilizo muito para “caçar” meus ícones.
Esse cara aí acima possui ícones/imagens de ótima qualidade que podem ser utilizadas em menus para web. No geral você procura pelo nome da imagem, por ex: se você está procurando uma lixeira, digite trash, recycled, etc..
Links:
- Visualizar Exemplo Funcionando
- Download do pacote rar
- Procurar Icons
Obs: as imagens não precisam ser do mesmo tamanho que usamos no exemplo, basta que você altere no Jscript como explicado acima, para não ficar distorcida deixe o startSize e endSize de acordo com as dimensões das imagens que você escolher…
Outra coisa, no iconfinder para cada imagem que você visualizar e for baixar, perceba que a mesma imagem pode possuir lá tamanhos diferentes, ou seja, você não precisa redimencionar as imagens para ter uma pequena e uma maior, basta escolher a imagem no iconfinder baixar os 2 tamanhos dela.
Abraços,
Rafael Clares,
Aplicando automáticamente Eventos Js e CSS em seus formulários
Veremos como deixar um formulário HTML um pouco mais agradável de se ver, a idéia é fazermos isso de forma simples sem perder produtividade.
Penso eu que é simples criar um formulário HTML e definir no CSS como ele será apresentado na página, por outro lado vejo que levaria muito tempo caso tenhamos ‘N’ formulários para defini-los em CSS e mesmo assim queremos colocar algum tipo de efeito do tipo:
- mudar cor da borda ao selecionar o campo
- mudar cor/tom da fonte ao selecionar ou tirar o foco de campos
- padronizar os campos com imagens de fundo e bordas
- padronizar botoes do tipo submit e reset entre outros possíveis
Bem, esses são alguns exemplos que podemos aplicar…
Lembrando que a idéia é tornar produtivo, fácil e um pouco agradável de se ver, mas isso vai depender do gosto de cada um. não é ?
Certo, a proposta é a seguinte:
- Criar um formulário HTML e deixar o código puro, sem chamadas de eventos JS ou definição de classes CSS no HTML, ou seja, você escreve o formulário HTML e pronto, esqueça os efeitos CSS e JS para eles.
E como é isso?
Bem, pensei no seguinte, uma função JavaScript que lê o código HTML localiza e aplica os eventos e definições CSS em todo o código, independente da quantidade de elementos no formulário.
Isso pode ser feito apenas aplicando uma configuração padrão para formulários no CSS?
Algumas coisas sim, outras não!
O que pode ser feitos apenas aplicando CSS para todos os formulários?
- Penso eu que podemos aplicar fundo, bordas e tudo relacionado ao CSS, mas não eventos.
Então para ter uma idéia do que estamos falando veja esse exemplo e imagine você escrevendo ’N’ formulários e essas propriedades, definições e eventos sendo aplicados automáticamente à todos os novos formulários que criar.
O Formulário HTML
<html>
<head>
<title>Niceforms</title>
<script src=”js/niceform.js“ type=”text/javascript“></script>
<link href=”css/niceform.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<form name=”f” id=”f“>
<fieldset>
<legend>Dados do usuário</legend>
<label for=”nome“>Nome:</label>
<input type=”text” name=”nome” id=”nome” />
<label for=”email“>E-mail:</label>
<input type=”text” name=”email” id=”email” />
<p> </p>
<input type=”submit” name=”cad” id=”cad” value=”Cadastrar” />
<input type=”reset” name=”res” id=”res” value=”Limpar” />
</fieldset>
</form>
</body>
</html>
A definição CSS – Arquivo niceforms.css
p
{
margin:0px;
}
label
{
display:block;
font:12px verdana;
color:#666;
margin:2px;
margin-top:10px;
cursor:pointer;
}
fieldset
{
width:250px;
padding:15px;
}
legend
{
width:70%;
background-color:#dde;
border:0px solid #dcdcdc;
padding:5px;
margin:0px;
font:14px ‘Trebuchet MS’;
color:#666;
text-align:center;
}
.out
{
border:1px solid #dcdcdc;
padding:2px;
font:16px verdana;
color:#666;
background:url(../images/l-r.png) no-repeat 0 0;
}
.in
{
border:1px solid #93C7DA;
padding:2px;
font:16px verdana;
color:#000;
background:url(../images/i-r.png) no-repeat 100% 0;
}
.btnsub
{
border:1px solid #dcdcdc;
padding:2px;
font:12px verdana;
color:#333;
background:url(../images/i-r.png) no-repeat 99% 0;
}
Funções Javascript – o arquivo niceforms.js
function niceForms()
{
// Obtendo os elementos input do documento
inputs = document.getElementsByTagName(‘input‘)
// Recuperando o total de tags input
total= inputs.length;
for(i=0; i<=total-1; i++)
{
// Verificando o tipo para cada input encontrado
tipo = inputs[i].type
// Recuperando o id de cada input
this.id = inputs[i].id
// Verificando se o input é do tipo text ou password
if(tipo == ‘text‘ || tipo == ‘password‘)
{
// Armazenando em obj as propriedades de cada input do tipo text
obj = document.getElementById(this.id)
// Aplicando a classe CSS em cada input text
obj.className = ‘out‘
// Adicionando evendo onclick em cada input text
obj.onclick = function()
{
// Comandos que serao executados no onclick
obj = document.getElementById(this.id)
// Aplicando a classe CSS no envento
obj.className = ‘in‘
}
// Adicionando evendo onblur (perder foco) em cada input text
obj.onblur = function()
{
// Comandos que serao executados no onblur
obj = document.getElementById(this.id)
// Aplicando a classe CSS no envento
obj.className = ‘out‘
}
} // Fim da verificacao do tipo text
// Inicio da verificacao dos tipos submit ou reset
if(tipo == ‘submit‘ || tipo == ‘reset‘)
{
obj = document.getElementById(this.id)
obj.className = ‘btnsub‘
}
} // Fim da verificacao do tipo submit ou reset
} // Fim do laco FOR
// Apos o carregamento total da pagina a funcao sera chamada
window.onload = function()
{
niceForms()
}
Um ponto importante a ser reparado no JavaScript é o this.id, com a referência ‘this’ estamos dizendo que é para aplicar à cada id encontrado, se não houvesse a referência ‘this’ o laço terminaria e aplicaria apenas ao último id encontrado.
Ok, temos os 3 arquivos necessários para exibir formulários como no exemplo acima, vamos falar um pouco sobre isso.
Resumidamente a idéia é que possamos criar formulários como no código HTML do exemplo sem nos preocupar em como ele irá aparecer, o que temos que fazer é apenas incluir/fazer a chamada aos arquivos CSS e JS em cada página que contiver um formulário.
Por exemplo eu dedico mais meu tempo na programação PHP (modelo, visao e controle) ao mesmo tempo que quero testar meus códigos em um ambiente com o mínimo agradável possível, por isso utilizo esse método para não ficar perdendo tempo na hora errada com CSS, não que possamos abandonar essa etapa mas podemos pensar menos nela no momento do desenvolvimento do código principal.
Outra intenção nesse exemplo é deixar o HTML o mais limpo possível sem chamadas à métodos js ou classes css. Pense nesse exemplo associado ao um outro post (veja aqui) onde mostramos exemplos simples de como adicionar eventos em elementos HTML sem fazer a chamada à eles no próprio HTML, ou seja, deixando-o limpo e puro.
Use sua imaginação e criatividade para explorar ao máximo os recursos do JS e CSS sem precisar poluir o HTML.
Não esqueça, a idéia é criar formulários e deixar que o JS e CSS aplique suas definições de aparência de forma automática tentanto aumentar sua produtividade, melhorando seu ambiente de testes e projeto final.
Exemplo do formulário | Download dos fontes
É isso pessoal, um post enorme para uma coisa tão simples mas estão aí minhas visões de melhorias. ha-ha
Espero que gostem do resultado!
Abraços,
Arquivado em: Javascript | Tags: activex, ativar controle, flash, Javascript
Olá Pessoal, mais um script rápido e útil!
Imagine que você precise colocar em uma página, uma ou mais animações (banner, header, logo…) em flash e não quer que o usuário precise ativa-la tendo que clicar na área da animação que passa a conter o texto “Clique aqui para ativar e usar este controle”… isso mesmo o cara tem que clicar no local onde está a animação para que ele possa ativa-la, mais diretamente… o usuário tem que permitir que a animação inicie no browser dele!
Bem, parece até uma medida de segurança, legal a iniciativa, mas de toda forma isso é muito desagradável e para resolver ao menos esse problema fiz um script em JavaScript que inicia automáticamente a animação sem precisar que o pobre usuário (que muitas vezes nem sabe o que é aquilo) precise sair clicando o site todo para saber o que tem nele.
Segue o arquivo index.html que conterá a animação:
<html>
<head>
<title>autoFlash</title>
<script src=”autoflash.js” type=”text/javascript”></script>
</head>
<body>
<div id=”DivFlash”></div>
</body>
</html>
A linha <div id=”DivFlash”></div> irá receber a animação assim que a página for carregada, para isso usaremo no JavaScript o método window.onload que permite informar quais eventos ou funções serão iniciadas após o carregamento total da página.
Vamos ao JavaScript – salve-o como autoflash.js
function flashAct(idElem,nomeSWF,largSWF,altSWF) {
movie = ‘<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′
movie += ‘ codebase=http://download.macromedia.com/pub/shockwave/cabs/’
movie += ‘flash/swflash.cab#version=5,0,2,0 width=”‘+largSWF+’”‘
movie += ‘ height=”‘+altSWF+’”>’
movie += ‘ <param name=”movie” value=”‘+nomeSWF+’.swf”>’
movie += ‘ <param name=quality value=”high”>’
movie += ‘ <param name=BGCOLOR value=#333333>’
movie += ‘ <param name=SCALE value=exactfit>’
movie += ‘ <embed src=”‘+nomeSWF+’.swf”‘
movie += ‘ quality=high’
movie += ‘ pluginspage=http://www.macromedia.com/shockwave/download/’
movie += ‘index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash’
movie += ‘ width=”‘+largSWF+’”‘
movie += ‘ height=”‘+altSWF+’”‘
movie += ‘ bgcolor=#333333′
movie += ‘ scale= exactfit>’
movie += ‘ </embed>’
movie += ‘ </object>’
movie += ‘ </object>’
document.getElementById(idElem).innerHTML = movie;
}
window.onload = function(){
flashAct(‘DivFlash’,'future’,'590′,’140‘)
}
Como pode perceber a função flashAct recebe 4 paramentros sendo eles id da div, nome do arquivo flash sem a extensão, largura e altura, até muito simples de entender.
Agora preste atenção no seguinte, percebe que a variavel movie está concatenada e recebe toda a tag embed necessária para inserir uma animação flash no HTML, observe bem o código… existe um espaço no inicio das concatenações, isso ocorre pq deve haver espaço entre as tags inferiores de embed para que a animação seja inserida corretamente e funcione, agora você me diz: Pq que não colocou no final da concatenção e eu lhe digo: Pq senão poucos iriam perceber o espaço. Há no entanto 2 linhas que não possuem o espaço no inicio da concatenação e isso é proposital, ou seja, nesse local realmente não pode ter espaço, trata-se de uma única linha que dividi em 2 por estética (boa visualização do código).
As linhas sem espaço são:
movie += ‘ codebase=http://download.macromedia.com/pub/shockwave/cabs/’
movie += ‘flash/swflash.cab#version=5,0,2,0 width=”‘+largSWF+’”‘
A segunda linha acima deve realmente conter o espaço.
movie += ‘ pluginspage=http://www.macromedia.com/shockwave/download/’
movie += ‘index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash’
A segunda linha acima deve realmente conter o espaço.
Bem, acho que isso ficou claro não é! Mas ainda falta explicar a linha abaixo:
document.getElementById(idElem).innerHTML = movie;
Essa linha contém a instrução que irá inserir dentro da tag div passada no parametro da função o embed ou a variável movie que contém as informações da animação.
No window.onload é feita chamada à função flashAct(‘DivFlash’,'future’,'590′,’140‘) onde DivFlash é o ID da minha div que receberá o flash, future é o nome do arquivo swf (sem extensão), 590 é a largura que deverá conter a animação e 140 é a altura da animação.
Veja o exemplo funcionando e sem a frase “ativar o controle…” =/
Download dos arquivos flash.
abraços,
Rafael Clares
…
Olá, em um post anterior eu comentei sobre o LightBox e prometi falar um pouquinho sobre ele, então vamos lá.
O LightBox, resumidamente e a grosso modo, é um conjunto de bibliotecas JavaScript que são utilizadas para exibição de fotos e imagens onde o efeito é realmente muito surpreendente, muito bonito, ao menos eu acho.
Bem, não vamos programar nada, como eu disse o LightBox é uma biblioteca e portanto já está prontinha para usarmos, usaremos um exemplo bem simples exibindo apenas 2 fotos / imagem.
Então, como de costume, vamos ao HTML com o index.html ou index.php como preferir.
<html>
<head>
<title>.: LightBox :.</title>
<link rel=”stylesheet” href=”css/galeria.css” type=”text/css” media=”screen” />
<!– incluindo os arquivos da biblioteca LightBox–>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
</head>
<body>
<div id=”galeria”>
<ul>
<a href=”fotos/image1.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image1.jpg” class=”thumb”></a>
<a href=”fotos/image2.jpg” rel=”lightbox[roadtrip]“>
<img src=”fotos/image2.jpg” class=”thumb”></a>
</ul>
</div>
</body>
</html>
O arquivo galeria.css
body{
background-color:#000000;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
.thumb{
border:1px solid #fff;
border-bottom:10px solid #fff;
padding:2px;
width:120px;
height:100px;
}
Acima um exemplo bem simples da utilização do LightBox, é interessante criar a galeria utilizando miniaturas(thumbs) geradas automaticamente pelo PHP e você pode ver como criar miniaturas de fotos em outro post ‘ Criar Thumb (miniatura) com PHP‘.
Vamos continuar no LightBox, as linhas que adicionam o javascript, e elas são 3, são necessárias para que o lightbox funcione, então ao baixar o lightbox, descompacte-o e mantenha os arquivos nos seus diretórios originais, o arquivo lightbox.css também é necessário, então se você precisar de formatação CSS ou funções javascript, crie outros (js e css) arquivos preservando os do lightbox ok.
Agora você me pergunta, onde está a galeria a que se refere no título e eu lhe respondo junte 2 Posts desse blog e você terá uma galeria! ;)
De toda forma minha intenção não foi de explicar como funciona o LightBox e sim de dizer que ele existe, é muito fácil de usar e o principal de tudo o visual é perfeito… então procurem um pouco no google e encontrarão muita coisa a respeito do LightBox!
Para baixar o lightbox em sua última versão visite LightBox aproveite e dê uma navegada no site deles, tem muitos exemplos legais lá.
O link para ver o Exemplo funcionando
E agora como eu sou muito bonzinho ;) o download de tudo pronto download
Até o próximo Post.
……
Vamos ver como fazer um Preload como o do Google.
Olá, agora vamos ver como criar o preload mais conhecido da internet, o preload do google, isso mesmo aquela coisa minúscula e vermelha no canto direito da tela.
Vamos ao bom e velho HTML (index.html)
<html>
<head>
<title> Loader :: </title>
<script src=”load.js” type=”text/javascript”></script>
<link href=”load.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<div id=”conteudo”>
<!– -aqui vai todo o conteudo do site –>
<a href=”index.html”>Testar novamente</a>
<iframe src=”http://news.google.com.br”></iframe>
</div>
<!– funcao que ira criar o elemento div loader –>
<!– esta chamada pode ser a ultima linha dentro do body –>
<script>loading()</script>
</body>
</html>
Acima utilizei dentro do conteúdo da página (div conteudo) um iframe, nada de especial, foi apenas uma forma que encontrei de fazer com que a página demorasse mais que 1 segundo para carregar dando tempo aparecer o texto “Carregando…”. Não vá me colocar um iframe na sua página hein! Coloque o conteúdo normalmente, basta que estejam dentro da DIV conteudo. :)
Vamos ao arquivo JavaScript – salve-o como load.js
function loading()
{
//criando um novo elemento div
x = document.createElement(“div”)
//atribuindo o id ao novo elemento
x.id = “loader”
//adicionando conteudo formatado pelo CSS na div loader
x.innerHTML = ’<div id=”info” class=”info”>’
x.innerHTML += ’<p>Carregando…</p></div>’
// nova div ira aparecer depois da div conteudo
conteudoDiv = document.getElementById(“conteudo”)
//inserindo a div loader dentro do body e apos a div conteudo
document.body.insertBefore(x, conteudoDiv)
}
//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
//obtendo as propriedades do elemento div conteudo
obj2 = document.getElementById(“conteudo”)
//exibindo a div conteudo (display none no CSS)
obj2.style.display = ‘block’
//obtendo as propriedades do elemento div loader
obj = document.getElementById(“loader”)
//removendo o conteudo da div loader
obj.innerHTML = “”
//ocultando a div loader apos o carregamento da pagina
obj.style.display = ‘none’
}
Muito simples, mas foi a forma que encontrei de faze-lo, lembrando que eu também estou aprendendo e procurando explorar ao máximo os recursos do JS.
Vamos ver o arquivo CSS – salve-o como load.css
body{
margin:0px;
padding:0px;
}
#loader{
position:absolute;
width:100%;
height:600px;
}
#conteudo{
display:none;
}
.info{
width:100px;
float:right;
margin-right:2px;
margin-top: 2px;
}
.info P{
margin:0;
padding:3px;
background-color:red;
font:11px verdana;
color:#fff;
text-align:center;
}
Como perceberam o que acontece é que a o atributo DISPLAY do elemento DIV Conteudo dentro do BODY em primeira instância está definida no CSS como NONE, fazendo com que seu conteúdo não apareca no html, em seguida a chamada a função loading() é feita criando um novo elemento DIV dentro do BODY com o texto carregando e sua formatação no CSS, após o carregamento da página, nesse caso apenas um IFRAME, a DIV conteudo tem sua propriedade DISPLAY alterada para BLOCK, ou seja, passa a aparecer no HTML, após isso no window.onload a propriedade da DIV Loader que foi criada tem sua propriedade DISPLAY alterada para NONE, ou seja, deixa de aparecer e como essa div foi criada pelo javascript, mais precisamante pela função loading(), ela não aparece no código HTML.
É isso, não há muito segredo nesse exemplo, nada mais justo agora do que ver funfando!
Mas só uma coisa antes, se esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google
Rafael Clares
…..
Utilizando eventos sem declarar no HTML
Olá, nesse minúsculo tutorial irei mostrar como utilizar eventos javascript sem ter que declara-los no html, ou seja, vamos usar os eventos deixando o html 100% limpo, sem aqueles onclick, onmouseover…e por ai vai.
Vamos começar pelo html
<html>
<head>
<title>Eventos</title>
<script src=”eventos.js” type=”text/javascript”></script>
</head>
<body>
<ul>
<form name=”contato” id=”contato”>
<input type=”button” name=”btn_1″ id=”btn_1″ value=”btn1″ />
<input type=”button” name=”btn_2″ id=”btn_2″ value=”btn2″ />
</form>
</ul>
</body>
</html>
bem isso foi o mais puro que consegui para uma página html, notem que não há eventos nos botões.
Vamos ao Javascript, salve-o como eventos.js
function CarregaEventos()
{
//vamos atribuir as propriedades dos botoes as variaveis obj1 e obj2
obj1 = document.getElementById(“btn_1″)
obj2 = document.getElementById(“btn_2″)
//aqui declaramos o evento onclick para o botao 1
obj1.onclick = function(){
alert(‘diga oi’)
}
//aqui declaramos o evento onclick para o botao 2
obj2.onclick = function(){
alert(‘diga tchau para os btns’)
// mudamos as propriedades dos botoes p/ nao aparecam
obj1.style.display = ‘none’
obj2.style.display = ‘none’
}
}
//funcao que carrega/prepara os eventos para os botoes
window.onload = function()
{
// apos o carregamento de toda a pagina a funcao é chamada
// e ira aguardar pelas acoes do usuario
CarregaEventos()
}
A função window.onload é equivalente a <body onload=”funcao()”> , mas nesse caso acabaria fugindo de nosso propósito. Repare que após atribuir as propriedades dos botões para as variáveis nós passamos a ter acesso aos seus métodos, ou seja, onde obj1.onclick realiza a chamada ao metodo onclick do botão, poderiamos usar qualquer outro evento javascript cabíveis aos botões, por ex: obj1.onMouseOver, obj1.onMouseDown ….and more….
É isso, algo simples, agora fica a cargo de vocês usarem a criatividade para utilizar da melhor maneira essa pequena solução, que para mim é muito útil, principalmente na hora de fazer a manutenção, dessa forma nós alteramos somente o javascript e o html continua intacto e limpo.
1.1 – Escrevendo um formulário HTML
1.2 – Obtendo informações do formulário com javascript
1.3 – Tipos de Variavéis e Operadores
1.4 – Validando o formulário com funções javascript
1.1- Escrevendo um Formulário HTML
Vamos começar escrevendo uma página simples de cadastro de usuários.
1 <html>
2 <head>
3 <title>PegaDados</title>
4 </head>
5 <body>
6 <form name=”cadastro”>
7 <input type=”text” name=”usuario”>
8 <input type=”password” name=”senha”>
9 <input type=”button” value=”login”>
10 </form>
11 </body>
12 </html>
Claro, no código acima o que nos interessa realmente é o trecho do código que está em vermelho
entre as linhas 6 e 10, ou seja, o formulário.
Então vamos descrever tais linhas a começar pela linha 6.
6 <form name=”login” id=”formLogin”>
Esta linha inicia o formulário e atribui o Name “login” e o ID “formLogin” note que nas linhas 7 e 8
também possuem o atributo Name (veremos as linha 7 e 8 logo).
O Atributo Name serve para referênciarmos um elemento HTML dentro do documento, isso quer dizer
que os nomes de elementos devem ser únicos para haver uma referência correta dos campos.
7 <input type=”text” name=”usuario”>
Agora na linha 7 nos temos um elemento input do tipo text, ou seja, para entrada de texto comum.
Os elementos input são definidos pelo tipo (TYPE), vejamos alguns deles:
8 <input type=”password” name=”senha”>
Este elemento acima é um input de tipo “password”, ou seja, o que digitamos nele aparecem no formato
de “*” (asterisco), como é um campo de senha é natural que não queiramos mostrar o valor do campo ao
digitarmos.
9 <input type=”button” value=”login”>
E o último elemento do nosso formulário que é do tipo “button”, os elementos de tipo button são usados
para executar algum evento que determinarmos, em nosso caso ele executará a função
mostraDados()
que ainda iremos construrir no javascript e será executado com o evento onClick (neste tutorial nós não
abordaremos os eventos a fundo).
10 </form>
E a última linha do nosso formulário que fecha a tag form e indica o fim do nosso formulário.
nota: não utilize acentos nos nomes e atributos do elementos
1.2 – Obtendo informações do formulário com javascript
Agora vamos a função javascript que é a parte mais divertida =)
Vejamos o código a seguir, onde juntamos o nosso HTML contendo o formulário e o javascript.
1 <html>
2 <head>
3 <title>PegaDados</title>
4 <script type=”text/javascript”>
5 function mostraDados(){
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
8 msg = “Usuário: ” +usuario+ ” Senha: ” +senha ;
9 alert(msg);
10 }
11 </script>
12 </head>
13 <body>
14 <form name=”cadastro”>
15 <input type=”text” name=”usuario”>
16 <input type=”password” name=”senha”>
17 <input type=”button” value=”login” onclick=”mostraDados()” >
18 </form>
19 </body>
20 </html>
Em nosso novo código temos a função javascript entre as linhas 4 e 11 e na linha 17 temos o evento onclick chamando a função mostraDados().
Vamos começar pela linha 4.
4 <script type=”text/javascript”>
Nesta linha temos a tag <script> e o atributo type, lembra dos atributos ?
A tag script informa que um script será iniciado e o atributo type define o tipo de script que será usado, em nosso caso é do tipo text/javascript que define um script na linguagem de scripts javascript.
5 function mostraDados(){
Na linha 5 temos a chamada à função mostraDados(), as funções javascript possuem a seguinte sintaxe:
função nomeDafunção(){
// bloco de comandos
}
Então temos function que informa o inicio de uma função, mostraDados que é o nome da função e também () os parenteses que podem possuir valores em seu interior (veremos isso mais adiante).
Por fim temos as {} chaves que indicam o inicio e o fim do bloco de comandos que serão executados pela função.
nota: existem diversas funções pré-definidas no javascript e nós não abordaremos isso neste tutorial, portanto leia sobre nomes reservados do javascript e seja criativo e direto na hora de dar nome as suas funções =)
Vamos partir agora apara linha 6 e 7. isso tá ficando legal =)
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
Nas linhas acima temos a palavra usuario e senha que nada mais são que váriaveies que irão armazenar os valores contidos em nossos campos usuario e senha do formulário.
Para se atribuir um valor a uma váriavel temos a seguinte sintaxe:
nomeDaVariavel = “valorDesejado”;
neste exemplo definimos o nome da váriavel e definimos também seu valor que é contido entre aspas duplas, através do operador ‘=’ (igual), no exemplo acima queremos definir um valor cujo o mesmo é uma string (tipo de váriavel texto), ou seja, seu valor é um texto, palvara, frase..
existem diversos tipos de variáveis e operadores, veja em: 1.3 Tipos de variavéis e operadores
E agora vamos ver como isso acontece.
Lembra que demos o nome “cadastro” ao formulário ?
lembrando:
<form name=”cadastro”>
dissemos também que é através dos nomes que temos acesso (referência) ao elementos.
um exemplo bem simples sobre acesso as propriedades de um elemento ou objeto:
Vamos usar como ex. a váriavel gato, e vamos supor que queiramos acessar a propriedade pata do gato.
então seria algo assim:
gato.pata;
e se quissemos acessar a propriedade dedo do gato seria assim:
gato.pata.dedo;
agora a unha do gato (eu disse que isso era divertido). =)
gato.pata.dedo.unha;
Claro que a coisa pode não ser tão simples assim em outros casos, pense no seguinte:
e se você quisesse acessar a unha do dedão da pata do gato?
isso varia de acordo com a complexibilidade do programa, e o nosso não é nada complexo =)
Mas vamos deixar o coitado do gato em paz e vamos voltar ao nosso formulário.
Então se temos um formulário chamado “cadastro” e um campo chamado “usuario” para “recuperarmos”
o valor deste campos devemos proceder da seguinte maneira:
cadastro.usuario;
Só que o que queremos na verdade são os valores que foram digitados neste campo e para isso temos a propriedade “value” (valor) para cada elemento filho.
Em nosso caso o elemento Pai é o formulário e o elemento filho é o campo usuario e também os demais campos.
cadastro.usuario.value;
Mas o formulário ainda não é o elemento Pai de todo o documento e por isso usamos o “document” seguido do nome do elemento ou objeto que queremos acessar, então finalmente temos:
document.cadastro.usuario.value;
A linha acima faz então a referência ao valor do campo usuario contido no formulário cadastro, porém temos que criar uma váriavel para armazenar este valor e é claro diminuir o caminho de acesso à este valor.
Então vamos criar a variável usuário e atribuir à ela o valor contido em document.cadastro.usuario.value;
vejamos abaixo como ficaria:
6 usuario = document.cadastro.usuario.value;
Pronto, temos agora o valor do campo usuario na variavel usuario, claro que você pode dar outro nome à esta váriavel.
Agora é só fazer a mesma ação para os demais campos, vamos ver então o campo senha como seria;
Vamos criar a váriavel senha e atribuir a ela o valor contido…onde?
isso mesmo, em document.cadastro.senha.value;
Vamos lá !
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
É isso, agora temos nas váriaveis usuario e senha os respectivos valores contidos nos campos do formulário, claro que estamos supondo que o usário digitou estes valores, vamos ver como descubrir se o usuário digitou ou não nos campos com a função validaDados() mais adiante em 1.4 – Validando o formulário com funções javascript.
Agora que você já compreendeu as linhas 6 e 7, vamos ver novamente nosso código completo para podermos então prosseguir com a linha 8.
Abaixo nosso código completo:
1 <html>
2 <head>
3 <title>PegaDados</title>
4 <script type=”text/javascript”>
5 function mostraDados(){
6 usuario = document.cadastro.usuario.value;
7 senha = document.cadastro.senha.value;
8 msg = “Usuário: ” +usuario+ ” Senha: ” +senha ;
9 alert(msg);
10 }
11 </script>
12 </head>
13 <body>
14 <form name=”cadastro”>
15 <input type=”text” name=”usuario”>
16 <input type=”password” name=”senha”>
17 <input type=”button” value=”login” onclick=”mostraDados()” >
18 </form>
19 </body>
20 </html>
1.3 – Tipos de Variavéis e Operadores
… assim que tiver um tempo escreverei
1.4 – Validando o formulário com funções javascript
… na sequência escreverei
