Palheta de cores utilizando Json e Javascript não obstrutivo

Publicado por Hebert em 13/01/2007

[ Hits: 12.979 ]

Blog: http://www.hebertphp.net

 


Palheta de cores utilizando Json e Javascript não obstrutivo



Esta dica mostra como montar uma palheta de cores utilizando novas práticas de programação em Javascript:
    Json: um formato leve para intercâmbio de dados computacionais que equivale a um XML de forma simplificada. Outras informações pode ser lidas no Json na wikipedia. Também estou preparando um artigo sobre Json.
  • Javascript não obstrutivo: prática de programação onde os eventos javascript são criados e executados fora do HTML.

A escolha das palhetas de cores foi baseado no artigo sobre um estudo de caso para a HP, o qual pode ser lido no link abaixo:
Abaixo segue o código:

<html>
<head>
<title>Json cor</title>
</head>
<style>
.divs{
  border:1px solid black;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 5px;
}
</style>
<script>
var json={
  'grey01':['e6e6e6', 'cccccc', '666666'],
  'blue01':['66ccff', '3399cc', '006699'],
  'blue02':['99ccff', '6699cc', '336699'],
  'green01':['99cccc','669999', '336666'],
  'green02':['cccc99','999966', '666633'],
  'brown01':['ffcc99','cc9966', '996633'],
  'brown02':['ffcc66', 'cc9933', '996600'],
  'orange01':['ffcc66','ff9900', 'ff6600'],
  'orange02':['ff9966','cc6633', '993300'],
  'red01':[   'ff9999','cc6633', 'cc3333'],
  'red02':[   'ffcccc','cc9999', '996666']
};//criação da variável tipo json
window.onload=function(){
//aqui um exemplo de javascript não obstrutivo, evento onload fora do HTML
if(document.getElementById){
   document.getElementById('s1').onchange=function(){
   //o evento onchange também é executado fora do HTML
      es_cor(this[this.selectedIndex].value);
   }
preenche();
}
}//onload
function preenche(){
ss1=document.getElementById('s1');
for(i in json){
   opt = document.createElement("OPTION");
   opt.innerHTML = i;
   opt.value = i;
   ss1.appendChild(opt);
}
}//preenche()
function es_cor(c){
if(c==""){
   for(i=1;i<4;i++){
     document.getElementById('d'+i).style.backgroundColor='white';
     document.getElementById('d'+i).innerHTML=' white';
   }
   return false;
}
var cor=json[c];
var j=0;
for(ii in cor){
   document.getElementById('d'+(j+1)).style.backgroundColor=cor[ii];
   document.getElementById('d'+(j+1)).innerHTML=' #'+cor[ii];
   j++;
}
}//es_cor
</script>
<body>
Selecione um padrão de cor<select id="s1" >
<option value="">selecione</option>
</select><br>
<div class="divs" id="d1">
white
</div>
<div class="divs" id="d2">
white
</div>
<div class="divs" id="d3">
white
</div>
</body>
</html>

Espero que gostem e aguardo os comentários ou eventuais dúvidas sobre o código.

Abraços, Hebert

Abaixo o resultado do código:

Selecione um padrão de cor
white
white
white
Outras dicas deste autor
Nenhuma dica encontrada.
Leitura recomendada

Copiando imagens bloqueadas

Efetuando debug de JavaScript no Mozilla

Slide de imagens em jQuery

Squirrelmail em português

Evitando que sua página fique entre frames

  

Comentários
[1] Comentário enviado por Teixeira em 02/09/2007 - 15:08h

Parabéns pela dica!
Tenho notado que a formação de cores não é exatamente linear, ou seja, se aumentarmos (entre 00 a ff) o valor do vermelho por exemplo, não obteremos necessariamente um vermelho mais forte, pois às vezes a cor resultante fica totalmente diferente.
Notei que na dica ficaram faltando, por exemplo, os tons de amarelo.
Existe alguma forma prática de conseguir todos os tons a partir de uma cor?
[]'s



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts