Hoy vamos a ver cómo podemos crear botones si utilizamos Phonegap. En mi caso yo siempre voy a utilizar los estilos de jQueryMobile para que no haya dudas. Veremos que es muy sencillo porque es lenguaje HTML5:

1.- Primero como siempre creamos el proyecto.

2.- A continuación creamos nuestro archivo “index.html” y modificamos el nombre del anterior archivo “index”. Además, he creado un archivo Javascript llamado “misJs.js” donde incluiré mis funciones javascript.

Estructura app

Estructura app

3.- Creamos el código HTML5 con dos tipos de botones:

  • Button: El button se utiliza para lanzar un evento en la página.
  • Submit: El submit en cambio se usa para mandar información de un formulario a una dirección url definida en la etiqueta “form”.

4.- Una vez creados los botones, he añadido un evento a uno de ellos: el evento “onclick”.

  • Onclick: Este evento se ejecuta cuando se hace click en el botón. En este caso ejecutará la función llamada “clicEjemplo” que esta definida en el archivo “misJs.js”.

Así queda el resultado:

<html>
	<head>
	<title>Demo Botones</title>
	<!-- Incluimos los archivos de estilos y liberías jQuery -->
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
	<script src="jquery.mobile/jquery-1.7.2.min"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	<script src="misJs.js"></script> <!-- Incluimos el nuevo archivo de funciones js creado -->
	</head>
	<body>
		<form>
		    <button onclick="clicEjemplo();">Pulsar Button</button>
		    <input type="submit" value="Pulsar Submit">
		</form>
	</body>
</html>

Este evento es el más común  pero existen muchos más dependiendo de las necesidades de nuestra app y la manera de usarlos es la misma. Aquí aparecen todos.

4 Thoughts on “Cómo crear botones con Phonegap

  1. Christian Aguilar on 15 marzo, 2015 at 2:19 said:

    ayuda quiero la carpeta del app configurada para incorporar a mi phonegap y eclipse en el workspace

    • Iker on 15 marzo, 2015 at 15:25 said:

      Hola Christian,

      En breves tengo intención de publicar el código de todos mis ejemplos en un repositorio GitHub para que todo el mundo tenga acceso. Si quieres te puedo avisar cuando lo tenga publicado.

      Gracias por tu interés.

  2. He notado que en algunas versiones de android los enlaces tel no abren en los navegadores, hay alguna forma de hacer que hagan llamadas a telefono sin tener que usar eclipse , android sdk ,etc. simplemente con código html5 y jquery mobile?

    • Iker on 26 abril, 2015 at 11:54 said:

      Hola buenas!

      Necesitarás las librerías de Cordova.js para que funcione y el sdk de android para el emulador (en caso de querer probar el código en pantalla). Si incluyes Cordova.js no veo por qué no vas a poder programar simplemente con html5 y jquery mobile. Al final Eclipse + android sdk son un entorno para que te ayuden en el desarrollo.

      De todas formas si que es cierto que hay veces que los enlaces “tel” pueden no funcionar correctamente.
      Asegurate de que la librería Cordova esta incluida, si no puedes incluirla así:
      http://bit.ly/1GuQkCl
      Y después prueba a hacer el enlace de esta manera a ver si así te funciona:
      http://bit.ly/1IZDmg5
      Espero haberte ayudado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies