jQuery Mobile

¿Cuando usar jQueryMobile?

Cuando el diseño que quieras hacer coincide bastante con el que te ofrece jQueryMobile. En caso contrario, es probable que pasemos más tiempo sobreescribiendo estilos y entendiendo como funciona jQueryMobile para sobreescribirlos que desarrollando.

En cualquier caso, la carga de la aplicación será más rápido sin jQuery Mobile.

Por otra parte, cuantas menos tecnologías confluyan en un mismo proyecto menos conocimientos serán necesarios para desarrollarlo.

jQueryMobile

Descarga
http://jquerymobile.com/

Lecciones

Transiciones

Nota:Para cambiar la dirección de la animación slide usaremos el atributo:data-direction=”reverse”

Dialog

Notas: <a data-rel=”dialog”> debe estar dentro de <div data-role=”page”> Al pulsar sobre el enlace se mostrará un cuadro de diálogo, cuyo código será un section con su correspondiente header, footer, etc. Si utilizo un enlace data-rel=”dialog” para acceder a un section y luego trato de ir a ese section utilizando […]

Navigation Bars en jQuery Mobile

Si quiero que uno de los enlaces permanezca marcado, le añado el atributo:class=”ui-btn-active ui-state-persist”El primer class resalta la opción, y el segundo la mantiene resaltada entre páginas.

Ejercicio – tabs en jQuery Mobile

Dentro de un div con el atributo data-role=”tabs” tendremos otro div con el atributo data-role=”navbar” que a su vez contendrá una lista de enlaces. A continuación y al mismo nivel que el div con data-role=”navbar” tendremos 3 div cuyas id coincidirán con con los indicados en los href de los enlaces.

data-position=”fixed” en jQuery Mobile

Este atributo hará que el header (o el footer), no se vayan por los límites de la pantalla al hacer scroll. Si al hacer scroll down el footer desaparece puedo: añadir data-tap-toggle=”false” al footer o Añadir el siguiente javascript: $(“[data-role=header]”).fixedtoolbar({ tapToggle: false });</li> El siguiente atributo hará que el contenido de […]

Botones en jQuery Mobile

Por defecto un botón ocupa el 100% de la pantalla, salvo que le añadamos el atributo:data-inline=”true” Botones agrupados verticalmente: Botones agrupados horizontalmente: data-icon Listado de iconos disponibles: http://api.jquerymobile.com/icons/ El código que determina las imágenes de los iconos es un código que define una imagen en formato SVG embebido dentro de la […]

formularios en jQuery Mobile

Todos los elementos dentro de un formulario deben ir dentro de la etiqueta <form> Todas las etiquetas dentro de un formulario deben tener una id única. Los formularios son enviados automáticamente vía AJAX. <h2>labels visibles</h2> jQueryMobile gestiona todas las peticiones usando AJAX, y esto en muchos casos, como en los […]

Listas

Este atributo hace que la lista no ocupe el 100% del ancho de la pantalla. Botón para ir hace atrás. Para dar al enlace apariencia de botón Tener en cuenta que al poner una imagen en una lista, si es un icon, se espera que sea de 16x16px o de […]

Paneles en jQuery Mobile

Ejercicio Al pulsar un botón situado a la derecha en el header que aparezca un panel con un listview de opciones Consideraciones:Para que el panel emerja desde la derecha usaremos: data-position=”right”

Grid en jQuery Mobile

ui-grid-a: las celdas ocuparán el 50% de la pantalla, ui-grid-b, un tercio; ui-grid-c, un cuarto, y así hasta e. Grid con varias filas Si quiero empezar una nueva fila sin terminar de poner las celdas de la fila en la que estoy, utilizaré <div class=”ui-block-a”>

Themes en jQuery Mobile

Pueden ser diferentes para diferentes partes de la aplicación. Hay 2.Vista previa::http://jquerymobile.com/demos/1.1.1/docs/pages/pages-themes.html Editor de colores de plantillas: http://jquerymobile.com/themeroller/ https://pablomonteserin.com/curso/jquery-mobile/ex/themes.html Sobreescribir los estilos del theme Si sobreescribimos usando estilos en línea, funcionará siempre. Si no usamos estilos en línea, es posible que no funcione, en cuyo caso, habrá que utilizar toda […]

Elementos persistentes

Pueder ser el header o el footer. Deben ser colocados respectivamente antes o después de todas las <section data-role=”page”> a los que van a afectar. Luego, habrá que usar el siguiente javascript: Excepciones a los elementos persistentes Sólo los data-role=page que estén por debajo del data-role=header independiente cogerán esa cabecera. […]

Eventos en jQuery Mobile

Touch events: tap, taphold (1 segundo), swipe, (tanto vertical como horizontalmente, más de 30px), swipeleft, swiperight. Scroll events: se disparan cuando empiezo y paro de hacer scroll. Page events:Para página internas:pagebeforecreate → pagecreate → pageinit.En pagebeforecreate puedes manipular cualquier etiqueta antes de que jQM lo haga. Usaremos page init en […]

Default settings

Debemos cargar la configuración por defecto antes de cargar la librería de jQuerymobile.

Plugins de jQueryMobile

http://www.filamentgroup.com/lab/jquery-mobile-pagination-plugin.html http://dev.jtsage.com/jQM-SimpleDialog/ http://dev.jtsage.com/ https://github.com/hiroprotagonist/jquery.mobile.actionsheet

Aviso Legal | Política de privacidad