ISCT. Luis Antonio Mancilla AguilarBOTONES

Botones en JQuery Mobile?

Crear botones con jQuery Mobile es muy sencillo y no requieremucho esfuerzo, sin embargo los resultados son excitantes.

Como venimos adelantando a lo largo de los anteriores clases,este framework ofrece una amplia gama de widgets ocomponentes de interfaz gráfica de usuario (GUI). Dichoscomponentes van más allá de los convencionales ofrecidos enHTML 5 y aunque es verdad que han tenido grandes mejoras conrespecto a las versiones anteriores del lenguaje de la web, sontodavía sobrepasados en calidad y variedad por los quepodemos crear a través de jQuery Mobile.

Botones simple de JQuery Mobile 1

jQuery Mobile ofrece una manera simple de crear nuestrosbotones, a partir de una serie de propiedades o atributosque vienen predeterminados en el framework. Lo másdestacable es que, para lograr nuestro objetivo, solonecesitamos pocas líneas de código y además, todo enHTML.

Botones simple de JQuery Mobile 2

Si recordamos un poco sobre lo que hemos aprendido sobreHTML para crear un botón lo, cual no era muy difícil, primeronecesitábamos un código HTML como el siguiente:

<a href="#" id ="boton" > Este es mi botton simple</a>

Botones simple de JQuery Mobile 3

El cual es un simple enlace, el cual se referencia a través delid botón, pero que jQuery UI con ayuda de algo de javasScriptlo convertía en un bonito botón, dicho script sería algo como elsiguiente:

$("#boton").button();

Botones simple de JQuery Mobile 4

Ahora bien, en el caso de jQuery Mobile no se requiere crear scripts paraimplementar nuestros botones. Eso lo hacemos de forma directa ennuestro documento o código HTML. Se logra con código como elsiguiente:

<a href="#" id ="boton" data-role="button" >Este es mi boton simple con jQM</a>

Botones simple de JQuery Mobile 5

Como podemos ver fue muy fácil crear nuestro botón. Solo tuvimos queasignarle el valor de button al atributo data-role de nuestro enlace, algoque podemos hacer sobre un botón creado a través de la etiqueta inputlo cual sería algo como esto:

<input type="button" data-role="button" value="Boton input"/>

Botones simple de JQuery Mobile 6

Es decir que fácilmente podemos hacerlo de forma directa sobre nuestrossubmit para enviar formularios a un servidor, lo que nos ayudaría a salirdel clásico y convencional botón HTML, eso lo logramos con la siguientelínea de código:

<input type="submit" data-role="button" value="Boton input con type submit"/>

Modificar las propiedades por defecto delos botones de jQuery Mobile

Una de las cosas que pasan con los botones es que, por defecto, ocupan todo elancho de la pantalla, sin importar la resolución de la misma, pero en ciertosmomentos no queremos hacer eso. Existe una manera muy simple de crearbotones que se ajusten a la tamaño del texto que llevan dentro y al igual que enla creación del botón por defecto, solo necesitamos modificar algunos atributosen el mismo código HTML. Podemos conseguirlo con el siguiente código:

<a href="#" data-role="button" data-inline="true" >Tiene el mismo ancho del texto</a>

Como se puede observar solo tuvimos que modificar el atributo data-inline y asignarle elvalor a true con el fin que el botón se limite al tamaño del texto.

Colores en los botones

Otras de las cosas que se pueden hacer con los botones es cambiar sus colores,con el fin de no quedarnos con los que vienen de manera predeterminada.

Es decir, que si lo que queremos es tener un boton con diferentes colores,tendríamos que escribir un atributo más a nuestros botones, dicho código puedeser el siguiente:

<a href="#" data-role="button" data-inline="true" data-theme="e" >Botón de otro color</a>

Lo que hicimos fue agregar el atributo data-theme al cual le damos el valor de eatribuyéndole un tema nuevo a nuestro botón. Dichos temas van de la a hasta la e.

Colores en los botones

Para mayor claridad le dejo un código de una página web la cual contienetodo lo explicado en la clase, con el cual espero que aclaren algunas dudasque hayan quedado en el aire:

..\samples\botones.html

GRACIASwinyllama@gmail.com