Silici0 :: Blog

Tutorialzinho para criarmos um selectbox e um listbox apartir do formulário em html e então através do JQuery adicionarmos os itens no Listbox e então pegarmos o valor por método POST no PHP.

A idéia do tutorial seria uma lista de itens adicionado a um listbox, formando um carrinho de compras dos itens, para depois então enviarmos tudo de uma vez so através do POST do form, gerando uma array para o PHP, é um dos clássicos em programação. Como muita gente não sabe da possibilidade em html/php deixo um tutorial para se ter uma idéia de como utilizar esse recurso.
Sem mais delongas vamos ao código, primeiramente o form, claramente veremos que o nosso listbox na verdade é um selectbox com a tag de multiple (virando assim um listbox):

HTML:

<form method="post" enctype="multipart/form-data" name="F1" id="F1">
<select name="func" id="func">
<option value="1">Numero 1</option>
<option value="2">Numero 2</option>
<option value="3">Numero 3</option>
</select>
<input type="button" name="add" value="Adicionar" />
<select multiple="multiple" id="eq" name="eq[]" size="7">
</select>
<input name="Submit2" type="submit" id="EnvioDados" value="ENVIAR DADOS">
</form>

JAVASCRIPT:

$().ready(function() {
//Click do botão ADD
$("input[@name=add]").click(function(){
var id_selecionado = document.F1.func.selectedIndex;
var valor_selecionado = document.F1.func.options[id_selecionado].text;
var id_indice_selecionado = document.F1.func.options[id_selecionado].value;
$('select[@id=eq]').append('<option value="'+ id_indice_selecionado +'">'+ valor_selecionado +'</option>');
//desabilita o valor adicionado;
document.F1.func.options[id_selecionado].disabled=true;
});
// Click do botao do submit
$('input[@name=Submit2]').click(function(){
var x=document.getElementById("eq");
for (i=0;i<x.length;i++){
x.options[i].selected=true;
}
return true;
});
})

Muito legal né? Mas e para remover ? Bom, para remover eu recomendo dar uma procurada na net sobre um plugin para ListBox usando o JQuery, vocês não querem tudo na mão né? Dúvidas e sugestões é so comentar.

JSON Populando formulário

JSON, o que é ? É um acrônimo para JavaScript Object Notation, serve para que ? Serve para fazer intercâmbio de dados, mais utilizado no Ajax, atualmente utilizado para retorno de dados para o AJAX, com a necessidade de popular (retornar) dados para um formulário.

JSON que se lê djeissón, pode ser utilizado em diversas linguagens, como php, c/c++, javascript, Java, Delphi, Perl, Python, Ruby, ColdFusion e muitas outras.

Imaginamos que ao clicar no botão alterar dados de uma lista, queremos trazer os dados da requisição do HTTP (Ajax) para colocalos no formulario. Para isso devemos retornar um dado do Ajax (arquivo da requisição) em JSON.

PHP:

$array = array ('a'=>1,'b' => 2, 'c' => 3);
$res=json_encode($array);
// retornando no res o seguinte:
// {"a":1, "b":2, "c":3 }

Otimo, agora como devemos ler os dados do retorno no JavaScript? Essa é parte mais fácil, para converter dados do texto JSON para objetos (variavel do JS) basta usar a função eval();

JAVASCRIPT:

// resposta é o $res do PHP, retorno dos dados
eval("var arr = "+resposta);
// Agora temos uma array de dados em javascript
// exemplo arr.a = 1
// exemplo arr.b = 2
// exemplo arr.c = 3

Agora basta popular o formulário (inputs, text area e afins) com DOM HTML. Pronto você aprendeu como JSON trabalha, o que é e como utilizar, agora basta utilizar suas ideias em conjunto ao Ajax e construir maravilhas.

Expressão Regular no JavaScrit

Como muita gente não conhece e nem nunca ouviu falar de Expressão Regular ou ER ou até mesmo Regex, vou escrever o que é e como utilizar no JavaScript.

É um conjunto de caracteres que forma uma expressão para testar uma entrada ou saída de dados, ah? É quando você tem um conjunto de caracteres que criam uma regra, que testa se o dados casa com essa expressão. Otimo, mas você ja faz isso quando faz uma busca, porém a ER lhe da mais flexibilidade além de ser padrão ou quase para um monte de linguagens. Por exemplo para validar um CPF, podemos em vez de desmembrar e testar para ver se faz parte de uma máscara, podemos utilizar o Regex.

Para utilizar no JavaScript vamos a um caso clássico de validação o do CPF, no caso a expressão eu retirei do blog fechaTag, caso queira criar a sua própria ER veja o Guia.
Para validar o CPF faremos:

JAVASCRIPT:

var er_cpf; // Declaramos a variavel
//Colocamos a ER na variavel, preste atenção que na ER no JavaScript usamos / ER /
// Não esqueça das /
er_cpf = /([0-9]{3}\.?){3}-[0-9]{2}/;
// A função abaixo testa a ER e o DADO.
var r = er_cpf.exec(form1.documentoA.value);

Basta agora testarmos a variável r, para testar se o dado casa com nossa expressão regular. Lembre-se se o dado 'casar' quer dizer que ele (o valor) é aquilo que esperamos dentro da expressão, digo o CPF é válido.

JAVASCRIPT:

if(r == null){
alert('CPF não é valido, ele deve conter . como separador!');
form1.documentoA.focus();
return false;
}

Pronto agora você aprendeu um pouco sobre como validar usando Expressão Regular em JavaScript. Dúvidas é só comentar.

Show e Hide (Idéia para Div Seguindo o mouse)

Resolvi escrever sobre uma idéia que rola bastante por ae, de um div seguir o mouse, porém somente apareçer (mostrar a div) quando o mouse esta por cima de um link, como comentado no topico Div Seguindo o Mouse, somente irei agora adicionar algumas poucas linhas de códigos, recomendo que antes leia o outro topico para não ficar perdido.

A idéia basica de ter varias imagens seguindo o mouse porém so ativa-las (mostra-las) quando o mouse passar por cima de algum link, div, tabela, celula; enfim um objeto qualquer. No nosso caso a escolha foi uma DIV.

Primeiro vamos criar a div igual anteriormente, porém vamos agora, esconder essa div, para que não apareça na tela:

HTML:

<div id="MinhaDiv1" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/01.jpg" alt="Carro"></div>
<div id="MinhaDiv2" style="position:absolute; overflow:hidden; visibility: hidden;display: none; z-index:999; background-color:#ffffcc;"><img xsrc="img/02.jpg" alt="Carro"></div>

Segundo passo é criar os links, no nosso caso como dito anteriormente vamos criar os links apartir de uma div, apartir dessa div iremos chamar a Função javascript que irá mostrar a div referente, iremos usar 2 ações: onmouseover (Ação executada quando o mouse esta em cima do objeto) e onmouseout (Ação executada quando o mouse esta fora do objeto, melhor quando ele sai do objeto). Ao executar a ação iremos chamar a função enviando 2 parametros, ID (dizendo qual DIV) e AÇÃO (qual ação tomar Mostrar/Esconder).

HTML:

<div id="caixa" onMouseOver="SegueMouse('MinhaDiv1',1)" onMouseOut="SegueMouse('MinhaDiv1',0)"><a xhref="http://rafaelcunha.com/#">Carro importado
</a></div>
<div id="caixa" onMouseOver="SegueMouse('MinhaDiv2',1)" onMouseOut="SegueMouse('MinhaDiv2',0)"><a xhref="http://rafaelcunha.com/#">Se meu fusca falasse
</a></div>

Agora basta usarmos a função do POST anterior e complementar nela a idéia de mostra e esconder a div, ficando o script completo da maneira abaixo:

JAVASCRIPT:

function SegueMouse(id,flagit) {
var divName = id; // div that is to follow the mouse
// (must be position:absolute)
var offX = 35; // X offset from mouse position
var offY = 35; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].display = ""
else if (document.all) document.all[''+id+''].style.display = ""
else if (document.getElementById) document.getElementById(''+id+'').style.display = ""
}else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].display = "none"
else if (document.all) document.all[''+id+''].style.display = "none"
else if (document.getElementById) document.getElementById(''+id+'').style.display = "none"
}
}

Para ver o exemplo em execução basta acessa o link : Idéia para Div seguindo o mouse. Sinta-se livre para comentar, duvidar, justificar e até se justificar. ah?

Editor PHP, JavaScript no Ubuntu

A principio eu começei utilizando o Quanta PLUS, instalei o Eclipse (ficou muito pesado, abri; fiquei 20 minutos mechendo e ja vi que não ia dar), então voltei e continuei utilizando o Quanta, depois de umas 2/3 semanas utilizando eu cheguei algumas conclusões e fiquei com dúvidas... bom, eu estou a procura de um editor com suporte para eu programar nas duas linguagens acima, fora xHTML e CSS que é algo raro, deixando essa parte para o Design.

A proposta inicial de se usar o Quanta PLUS era testar o serviços de cliente CVS, porém o servidor não ta instalado então fiquei no feijão com arroz mesmo o que me trouxe uma experiência pequena mas lucrativa dele, e tomei algumas decisões que gostaria de compartilhar com vocês.

Primeiramente o visualizador dele (WYSIWYG) é cheio de problemas, não dando nada com nada, solução foi enviar e testar no browser mesmo. O que eu sou chato é que para min código deve obrigatoriamente estar identado, tudo de acordo como manda a padronização da 'boa leitura' e das estruturas de controle, coisa que ele não me atendeu, deixando a deseja depois de um 'enter' ter que identar a proxima linha também.

Achei ruim o auto-complete, pois para algumas palavras sem nexo ou no meio de uma string ele abria e trazia todas funções e objetos, sendo as vezes e muita das vezes lerdo para eu codar (me desgastando em relação a tempo).

Logo depois de refletir 2/3 semanas sobre isso acima que é o meu feijão com arroz perante a produção, eu resolvi procurar algo que so tivesse um autocompletar e um colorir de códigos, além de funções basicas de um notepad (gEdit) da vida. Afim disso começei conversar com o Klaus neste post sobre produtividade e ele me recomendou o SciTE, no qual é leve, limpo e tem essas duas caracteristicas que me atraem tanto, e para instalar recomendação do proprio Klaus, segue um tutorial...

Falta somente agora eu achar um programa WYSIWYG FREE para que eu possa utilizar, algo bem infantil que nem o DW.
E você do que precisa? O que você usa para programar ? Para fazer seus codigos xHTML, JavaScript, PHP e outros?

Div Seguindo o Mouse

Muita gente me perguntou como fazer isso, então vou escrever esse tutorial de como fazer isso... na verdade vou traduzir um tutorial, pelo menos parte dele... pois na verdade eu procurei como desenvolver um e foi dificil roda-lo em varios navegadores ai então achei esse tutorial no site do About.com ...

Na verdade é uma div que esta sempre ao lado do mouse... ele automaticamente calcula a posição da div sempre que você mecher o mouse. Então a impressão que temos é a de que a div esta grudada ao mouse, um efeito super legal e interessante, com algumas idéias podemos desenvolver bastante coisas legais com isso...

Mas vamos ao pratico, primeiro temos o script JavaScript que calcula a posição do mouse sempre o mouse se mover:

Existem 3 variaveis que você pode mecher afim de alterar algo no tutorial abaixo:
- divName : É o nome da div que ficara 'grudada' ou melhor seguira o mouse.
- offX e offY : São as variaveis que determinam a que distancia que o 'Objeto' (a nossa div) se distanciará do mouse.

JAVASCRIPT:

var divName = 'MinhaDiv'; // div that is to follow the mouse
// (must be position:absolute)
var offX = 5; // X offset from mouse position
var offY = 5; // Y offset from mouse position
function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}
function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;

Então para adicionarmos o Objeto ou DIV que irá seguir o mouse utilizaremos a seguinte linha de código: