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® 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.

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.