Botões Responsivos

O código fonte deste exemplo pode ser encontrado aqui: https://github.com/gomobile/sample-responsivebutton ou faça o download do Intel(R) XDK para ver todos os exemplos de HTML5.

Propósito

O propósito do exemplo de botão responsivo é fornecer aos novos desenvolvedores um modelo de como criar um controle de UI que trate os eventos touchStart e touchEnd do JavaScript para fornecer aos usuários a impressão visual de que um botão está sendo pressionado.

Este exemplo utiliza a biblioteca híbrida de JavaScript intelxdk.js, mas sua utilização da biblioteca é pequena. Os listeners dos eventos estão localizados no arquivo js/main.js.

Código Fonte

Existe muito código em CSS nesta aplicação, que fazem com que ela se apresente de forma apropriada em tablets e smartphones. A linha abaixo está localizada no arquivo css/main.css e dispara o estilo apropriado para tablets, caso a largura da tela tenha ao menos 768 pixels.

O código que cria os listeners de eventos dos dois botões está no arquivo js/main.js. Ele é chamado tão logo a página tenha sido carregada.

Finalmente, os handlers de eventos podem atualizar o CSS do botão selecionado dinamicamente, baseado no objeto passado com o evento.

Testando

Este aplicativo de exemplo foi testado em uma variedade de dispositivos iOS e Android. Como ele utiliza alguns itens de CSS específicos do HTML5, ele pode não funcionar de forma apropriada em navegadores de desktop mais antigos.