sexta-feira, 7 de dezembro de 2007

Fechem as lightboxes com ESC

Boa tarde povo!

Pensando um pouco em usabilidade, o tempo vai passando e as novidades surgindo, e logicamente, precisamos de uma experiência otimizada com tudo aquilo que nos envolve. Pois bem, há algum tempo o Bruno Torres postou no "O Básico da Web" um texto falando sobre o envio de formulário ao se pressionar a tecla ENTER.
É "essa tal usabilidade" não é? Estamos acostumados com essa vida desktop, de pressionar ENTER e já submeter o formulário no qual estamos entrando com as informações. Na web a coisa na maioria das vezes não é assim, mas bem que poderia passar a ser, pelo bem da experiência do usuário com o seu site.

Agora venho fazer um apelo que segue a linha de usabilidade do post do Bruno. Toda vez que, em ambiente desktop, nos deparamos com alertas, pressionamos ESC naturalmente para remover da tela aquele aviso incômodo, bem como o utilizamos para escapar de janelas MDI Child (como por exemplo a janela de Formatar Fonte do Microsoft Word até a versão 2003). Entendo que alguns que leiam o post digam "eu não faço isso", mas acreditem, a maioria faz.

Então notei que havia a necessidade de, ao se fazer o uso de lightbox na página, que a mesma deveria ser fechada ao pressionarmos ESC. Segue então uma leve "mão na roda" para quem quiser implementar isto! =)

var ie = document.all;

if(!ie)
   document.captureEvents(Event.KEYPRESS)

if(!ie){
   function menuengine(event){
      if(event.keyCode == 27)
         if(objExiste('NOME_DA_DIV'))
            
//Chame aqui a sua função que remova a lightbox
   }
}
else{
   function menuengine(e){
      if (event.keyCode == 27)
         if(objExiste('NOME_DA_DIV'))
            //Chame aqui a sua função que remova a lightbox
   }
}

document.onkeypress=menuengine;

function objExiste(obj){
   return (document.getElementById(obj) != null)
}

Só para encerrar, troquei a função que uso pelo trecho "
//Chame aqui a sua função que remova a lightbox" pois vendo outros desenvovedores notei que cada um elaborou uma função de acordo com suas necessidades para remover a lightbox da tela, então deixo esse código "genérico" para que possa ser facilmente alterado.

Bem, espero que nós desenvolvedores passemos a pensar um pouco mais em usabilidade na hora de desenvolver os projetos, porque faz falta, e muita!

[]'s do MX...

Nenhum comentário: