Configuración de jQuery Mobile con JavaScript

La configuración por defecto de jQuery Mobile también puede ser modificada a través de JavaScript, en este artículo explicamos cómo lograrlo.

En este artículo, vamos a ver cómo JavaScript se puede utilizar para configurar y mejorar aún más los sitios web desarrollados con jQuery Mobile. Hasta ahora hemos hecho uso de HTML y CSS para generar todo, pero ahora utilizaremos secuencias de script adicionales para añadir funcionalidad adicional a los sitios. Es decir, vamos a explicar cómo los sitios de jQuery Mobile se pueden configurar a través de JavaScript.

Configurando el framework

jQuery Mobile hace muchas cosas por nosotros, desde la mejora de la página de navegación hasta cambiar el funcionamiento de los controles de un formulario. Todo esto se realiza con el objetivo de hacer que nuestro contenido funcione mejor en un entorno móvil. Sin embargo, habrá ocasiones en las que no se desee utilizar jQuery Mobile para hacer ciertas operaciones, o tal vez simplemente se desea retocar ligeramente el funcionamiento del framework. Para poder llevar a cabo esto, necesitamos configurar el framework.

Para configurar un sitio jQuery Mobile, se empieza por escribir código que detecte el evento mobileinit. Este puede ser detectado mediante un controlador de eventos de jQuery, similar al siguiente fragmento de código:

jQuery(document).bind("mobileinit", function() {
    //código personalizado
});

Para que este evento pueda ser capturado, se debe configurar antes de jQuery Mobile se cargue. La forma más sencilla de hacer esto, y la forma recomendada por la documentación de jQuery Mobile, es simplemente colocar este código en un script que se cargue antes que la librería jQuery Mobile JavaScript. El siguiente fragmento de código muestra como debería lucir la cabecera de nuestros archivos:

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="configuracion.js"></script><!-- Este es nuestro archivo de configuración -->
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

Configurar jQuery Mobile es tan simple como actualizar el objeto jQuery.mobile. El siguiente fragmento de código es un ejemplo sencillo de cómo hacerlo:

jQuery(document).bind("mobileinit", function() {
    jQuery.mobile.algunaConfiguracion ="un valor";
});

Este objeto contiene un conjunto de claves con su valor respectivo, las cuales representan los distintos ajustes que se pueden configurar. Otra opción es hacer uso de la funcionalidad jQuery extend(), como se muestra en el siguiente fragmento de código:

jQuery(document).bind("mobileinit", function () {
    jQuery.extend(jQuery.móvil, {
        algunaConfiguracion: "un valor"
    });
});

Cualquiera de las formas que utilicemos estará bien ya que funcionan absolutamente igual, simplemente escoge la que te resulte más cómoda. Ahora es tiempo de enlistar las diferentes opciones de configuración, a continuación te mostraremos todas las configuraciones del objeto mobile que pueden ser modificadas. Hay que tener en mente que por lo general sólo un par de éstas se suelen modificar como un comportamiento común.