Configuraciones por defecto de jQuery Mobile

Una de las grandes ventajas que tiene jQuery Mobile framework, es que se auto-inicia. Es el mismo framework quien se encarga de crear cada uno de los widgets que nosotros le indiquemos a través del atributo "data-role". Esto es una gran ventaja ante cualquier framework que tenga como labor principal la de crear interfaces de usuario, pues todo se hace casi de manera transparente para el desarrollador.

Como te habrás percatado, aún a estas instancias del Manual de jQuery Mobile no se ha visto ni una sola línea de Javascript, pero lo mejor es que hemos logrado la constitución de importantes y relevantes herramientas para cualquier aplicación web móvil. Sin embargo, con lo anterior no pretendemos decir que jQuery Mobile es solo para crear widgets, sino que tiene muchos más soportes. Es más, podemos hacer algunos trabajos de AJAX con el framework, así como cualquier otro tipo de interacción usuario/sitio, de manera muy simple.

Hablando un poco mas de AJAX, creo que hemos comentado anteriormente que el propio framework también lo maneja de forma automática, haciendo incluso por nosotros tratamientos especiales frente a errores, por ejemplo. En este sentido, si llega a producirse algún problema con una transacción HTTP, o cualquier otro protocolo, jQuery Mobile lo detectará, enviando al usuario un "Toask" como aviso, con un mensaje del problema. También procesa los eventos relacionados con la carga de los datos que se pueden realizar a través de cualquier petición que se haga al servidor, mostrándonos de la misma forma un Toask de de carga.

 

Mención de las opciones por defecto de jQuery Mobile

En la documentación oficial de jQuery Mobile encontramos un texto que, en síntesis, dicta lo siguiente:

"Para comenzar, basta decir que cualquier modificación que se quiera hacer sobre las configuraciones de jQuery Mobile se deben hacer envueltas dentro del evento "mobilinit", puesto que no se trabaja con el tradicional evento "ready" que se aplica al elemento document en otros proyectos relacionados con jQuery. Esto se debe a que la auto-inicialización de jQuery Mobile se lleva a cabo antes de ejecutarse el ultimo evento mencionado".

Pero en muchos de los casos es más productivo no incluir las configuraciones dentro del evento "mobileinit", aunque así lo diga la documentación de jQuery Mobile. Esto es debido a que, en ocasiones, hemos probado a modificar las opciones, pero en realidad no se obtienen resultados visibles de ello, algo que sí se logra haciendo las diferentes configuraciones fuera del evento "mobilinit" y dentro del “ready”.

Cuando hablamos de estas configuraciones por defecto de jQuery Mobile, estamos hablando de una gran lista, pero también debo decir que en este artículo no las vamos a mencionar todas, pues algunas son solo para casos demasiado especiales y donde quizás pocas aplicaciones realmente lo exijan.
 

Cambiar las transiciones por defecto de páginas y diálogos

Cuando nos movemos entre una página y otra en una aplicación jQuery Mobile, nos damos cuenta de que por defecto hace el efecto de transición tipo "pop", pero como la cosa va sobre gustos, en mi caso me gusta más la transición "flip", entonces sería demasiado pedir hacer un data-transition a cada uno de los enlaces. Para eso disponemos de una opción para cambiar las transiciones de todas las paginas al mismo tiempo, cosa que se consigue con el siguiente código:

$.mobile.defaultPageTransition='flip';

Con esto todas nuestras páginas harán la transición flip.

También existe una forma muy parecida para cambiar las transiciones de los cuadros de diálogo, así tendremos una mejor animación unificada no sólo para las páginas, sino también para los cuadros de diálogo.

$.mobile.defaultDialogTransition='slideup';
 

Modificar y Mostrar los Toask relacionados con AJAX

Anteriormente, en este artículo mencionábamos algo sobre los Toask y los trabajos que realizaban en jQuery Mobile, pues ahora vamos a ver como modificamos el mensaje que traen por defecto.

Para el caso del mensaje de carga necesitaríamos un código como el siguiente.

$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading";

Ahora si lo que queremos es cambiar el mensaje que viene dentro del Toask, que aparece cuando hay un error, necesitamos el siguiente código:

$.mobile.pageLoadErrorMessage = 'Nuevo mensaje';

También se puede controlar la aparición y desaparición de los Toask. Digamos que quiero que, al presionar un botón, aparezca el mensaje de carga. Entonces escribimos un código como este:

$.mobile.loadingMessage = "Hemos modificado el mensaje del Loading";
$.mobile.showPageLoadingMsg('');

Luego para ocultar el Toask lo hacemos con una sencilla línea de código como esta.

$.mobile.hidePageLoadingMsg();

Recuerda que si quieres tener una referencia más amplia de las configuraciones por defecto en jQuery Mobile Framework, puedes visitar su documentación, en la sección de configuraciones por defecto jquerymobile.com/demos/1.0/docs/api/globalconfig.html
 

Poniendo todo en un solo ejemplo

Ahora vamos a compartir un código de ejemplo en donde se ilustra todo lo explicado en este artículo:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Configuarciones por defecto</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<script>



$(document).ready(function(){
$.mobile.pageLoadErrorMessage = 'Esta pagina no esxiste, el mensaje de error ha sido cambiado';
$.mobile.fixedToolbars.show(true);
$.mobile.defaultDialogTransition='slideup';
$.mobile.defaultPageTransition='flip';
$("#mostrar").click(function(e){
    $.mobile.loadingMessage = "Hemos modificado el mensaje del Loading";
$.mobile.showPageLoadingMsg('');
});

$("#ocultar").click(function(e){
$.mobile.hidePageLoadingMsg();
});
});


</script>
</head>

<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Configuraciones</h1>
</div>
<div data-role="content">


<a href="#" id="mostrar" data-role="button">Mostrar Loading</a>
<a href="#" id="ocultar" data-role="button">Ocultar Loading</a>
<a href="#pag2" data-role="button" >Probar nueva transicion de paginas</a>
<a href="#dialogo" data-role="button" data-rel="dialog">Probar nueva transicion de Dialogos</a>
<a href="demo.html" data-role="button" >Aqui hay un error, la pagina del vinculo no existe</a>

</div>
<div data-role="footer">
<h3>Configuraciones</h3>
</div>

</div>

<div data-role="page" id="pag2">
<div data-role="header" data-position="fixed">
<h1>Configuraciones pagina 2</h1>
</div>
<div data-role="content">

<p>Este es una pagina y puedes ver que hace la transicion flip, sin poner el data-transition en el anlace, todas las paginas tendran la misma transicion</p>

<a href="#home" data-role="button" data-icon="back">Regrsar</a>

</div>
<div data-role="footer">
<h3>Configuraciones pagina 2</h3>
</div>

</div>

<div data-role="page" id="dialogo">
<div data-role="header" data-position="fixed">
<h1>Configuraciones</h1>
</div>
<div data-role="content">
<p>Este es un dialog y puedes ver que hace la transicion slideup, sin poner el data-transition en el anlace, todos los dialogos tendran la misma transicion</p>
<a href="#home" data-role="button" data-icon="back">Regrsar</a>

</div>
</div>
</body>
</html>

Sin son observadores, se darán cuenta de que usamos una configuración no explicada.

$.mobile.fixedToolbars.show(true);

Con ésta se logra que todas las barras (header/ footer) que tengan el atributo data-position=”fixed”, se fijen de la misma forma que lo hace la barra de Google, donde podemos hacer scroll en la pagina y la barra también bajará, posicionándose siempre en la parte superior de la ventana del documento.