comparte el articulo 

Configuración de jQuery Mobile con JavaScript

Actualizado el 26/01/2014 < > 0 Comentarios

Resumen: 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.

ns Este es el valor de namespace utilizado por los atributos de data. Por defecto no contiene valor, por lo que se puede agregar uno si se quiere anteponer un prefijo a dichos atributos. Por ejemplo, si deseas utilizar el namespace “webera” en tu proyecto, al agregar dicha cadena como valor a esta propiedad, en lugar de utilizar “data-role” usarías “data-webera-role”
activeBtnClass Establece el nombre de la clase utilizada para los botones en el estado activo. El valor predeterminado para este valor es ui-btn-active.
activePageClass Establece el nombre de la clase para las páginas que se están mostrando actualmente. El valor predeterminado para este valor es ui-page-active.
ajaxEnabled Por defecto ajax es utilizado para cargar páginas y enviar formularios, si deseas desactivar esto, debes utilizar esta propiedad.
allowCrossDomainPages Una configuración de segurdad que por defecto tiene el valor de false, al establecerla como true permite que páginas remotan se puedan cargar mediante jQuery.mobile.loadPage
autoInitializePage Normalmente jQuery Mobile corre jQuery.mobile.initializePage al cargar la página. Si se desea desactivar esta funcionalidad, esta configuración debe establecerse como false. De ser así, el método initializePage debe mandarse llamar manualmente.
defaultDialogTransition Especifica qué transición se debe utilizar para mostrar u ocultar los cuadros de diálogo. El valor predeterminado es pop. Los valores posibles son: fade, flip, pop, slide, slidedown y slideup.
defaultPageTransition Al igual que la configuración anterior, esta es utilizada para transiciones que suceden cuando la página de carga. El valor por defecto es slide.
gradea Se utiliza para determinar lo que realmente constituye un “buen” navegador. Esto es manejado por jQuery Mobile, pero si quieres hacer caso omiso al framework, o definir alguna otra condición que se debe cumplir, se debe proporcionar una función la cual devuelve un valor booleano (true o ​​false).
hashListeningEnabled Se refiere a la capacidad de escuchar a los cambios en la propiedad location.hash del navegador.
ignoreContentEnabled Normalmente jQuery Mobile mejora automáticamente todo lo que puede. El valor de esta propiedad se establece como false de forma predeterminada y permite a jQuery Mobile hacer su magia un poco más rápido.
linkBindingEnabled jQuery Mobile normalmente hace caso a todos los clics a enlaces. Si desea desactivar esto a nivel global, puede hacerlo con esta configuración.
loadingMessage Especifica el texto que se utiliza cuando las páginas se cargan.
loadingMessageTextVisible Cuando las páginas se cargan con jQuery Mobile, sólo se utiliza una imagen de carga. Si deseas que un mensaje se muestre, establezca este valor en true. El valor predeterminado es false.
minScrollBack Se establece para recordar la posición del scroll en una página.
pageLoadErrorMssage Este es un mensaje que se muestra a los usuarios si se produce un error al cargar una página.
pageLoadErrorMessageTheme Establece el tema que se utilizará cuando se muestre un cuadro de error.
pushStateEnabled Le dice a jQuery Mobile que utilice pushState de HTML5.

Publicado el 20/01/2014, última actualización 26/01/2014.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras