Es un marco de interfaz de usuario que se basa en el núcleo de jQuery y se utiliza para desarrollar sitios web o aplicaciones sensibles a los que se puede acceder en dispositivos móviles, tabletas y computadoras de escritorio.

• Crea aplicaciones web de tal manera que funcionará de la misma manera en los dispositivos móviles, tabletas y computadoras de escritorio.

• Es compatible con otros marcos como PhoneGap, Whitelight, etc.

• Proporciona un conjunto de entradas de formulario y widgets de interfaz de usuario fáciles de tocar.

• Le brinda funcionalidad a todas las plataformas móviles, tabletas y computadoras de escritorio y agrega cargas de página eficientes y un soporte de dispositivos más amplio.

• Está construido sobre jQuery Core y el marco de interfaz de usuario "escribe menos, haz más".

• Es un código abierto, multiplataforma y compatible con varios navegadores.

• Está escrito en JavaScript y utiliza funciones de jQuery y jQueryUI para crear sitios amigables para dispositivos móviles.

• Integra HTML5, CCS3, jQuery y jQueryUI en un marco para crear páginas con un mínimo de secuencias de comandos.

• Incluye un sistema de navegación Ajax que utiliza transiciones de página animadas.

• Es fácil de aprender y desarrollar aplicaciones si tiene conocimientos de HTML5, características de CSS3.

• Es compatible con varios navegadores y plataformas, por lo que no tiene que preocuparse por escribir un código diferente para cada resolución de dispositivo.

• Utiliza HTML5 junto con JavaScript para facilitar el desarrollo de aplicaciones web.

• Está construido de tal manera que permite que el mismo código se escale automáticamente de la pantalla del móvil a la pantalla del escritorio.

• Hay opciones limitadas para los temas CSS, por lo que los sitios pueden verse similares a los creados por estos temas.

• Las aplicaciones que se desarrollan con jQuery Mobile son más lentas en los móviles.

• Lleva más tiempo cuando combina jQuery mobile con otros marcos móviles.

• Difícil de proporcionar un diseño visual personalizado completo.

• Custom Download : Para descargar una versión personalizada de la biblioteca.

• Latest Stable: Para obtener la versión estable y más reciente de la biblioteca jQuery Mobile.

Puede utilizar los siguientes archivos CDN:

• <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

• <script src = "https://code.jquery.com/jquery-1.11.3.min.js"> </script>

• <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>

<div data-role = "page" id = "pageone">
    <div data-role = "header">
      <h1>Header</h1>
    </div>

    <div data-role = "main" class = "ui-content">
      //content goes here
    </div>

    <div data-role = "footer">
      <h1>Footer</h1>
    </div>
</div>

Crea el encabezado en la parte superior de la página.

Se utiliza para definir el contenido de la página.

Crea un pie de página en la parte inferior de la página.

Incluye relleno y margen dentro del contenido de la página.

Se pueden incluir varias páginas en un único documento móvil jQuery que se cargan juntas agregando múltiples divs con el atributo data-role = "page".

Utilice el atributo data-dialog = "true" en cualquier página para mostrar un diálogo.

El atributo de transición de datos se utiliza para aplicar las diferentes transiciones en el cuadro de diálogo, como deslizamiento, volteo, etc.

El botón se puede cerrar utilizando el atributo data-close-btn.

El atributo data-rel = "back" se utiliza para navegar y volver al diálogo anterior.

El tema se puede incluir en el cuadro de diálogo agregando atributo data-theme a cualquier contenedor como encabezado, pie de página o contenido.

ui-corner-all

Puede configurar el icono en el botón utilizando la clase ui-icon y la clase ui-btn-icon-pos_name para especificar la posición del icono.

Puede agregar una sombra de icono en su botón utilizando la clase ui-shadow-icon.

Puede eliminar el círculo gris alrededor del icono utilizando la clase ui-nodisc-icon.

Utilice la clase ui-grid-solo en la etiqueta div para crear una cuadrícula de una sola columna.

Agregue la clase ui-grid-a a la etiqueta div e incluya dos contenedores secundarios con la clase ui-block-a y ui-block-b para crear un diseño de dos columnas.

Utilice la clase ui-grid-b en la etiqueta div para crear una cuadrícula de tres columnas.

Utilice la clase ui-grid-c en la etiqueta div para crear una cuadrícula de cuatro columnas.

Utilice la clase ui-grid-d en la etiqueta div para crear una cuadrícula de cinco columnas.

Cree un botón básico simple en la página utilizando la clase ui-btn.

Cree un grupo de botones vertical y horizontalmente en la página utilizando el atributo data-role = "controlgroup".

Puede crear un botón más pequeño en la página utilizando la clase ui-mini y mostrar la posición de los iconos en el botón utilizando la clase ui-btn-icon-ico_pos.

Utilice el atributo data-role = "date" en el campo de entrada para mostrar en formato dd / mm / aa.

Se puede crear plegable mediante el uso del atributo data-role = "collapsible" en un contenedor.

Puede mostrar el grupo de control utilizando el atributo data-role = "controlgroup".

Al usar el atributo data-filter = "true", puede filtrar los elementos secundarios de cualquier elemento.

Flip Switch le permite apagar / encender o verdadero / falso el interruptor haciendo clic en él para la entrada de estilo booleano.

La vista de lista se utiliza para mostrar una lista de elementos. El atributo data-role = "listview" se incluye en el contenedor para mostrar la lista en la lista de desplazamiento vertical.

El widget Rangeslider le proporciona un par de controles que le permiten seleccionar un rango de valores numéricos.

Un evento responderá a la interacción del usuario cuando el usuario haga clic en cierta página o coloque el mouse sobre un elemento, etc.

Se dispara cuando el usuario toca un elemento usando la identificación de la página para especificar el evento y el método on () adjunta los controladores de eventos.

Se dispara cuando el usuario arrastra horizontalmente más de 30px sobre un elemento usando la identificación de la página para especificar el evento y el método on () adjunta los controladores de eventos.

El evento de inicio de desplazamiento se activa cuando el usuario comienza a desplazarse por la página y el evento de parada de desplazamiento se activa cuando el usuario deja de desplazarse por la página mediante el uso de id de la página para especificar el evento y el método on () adjunta los controladores de eventos.

Puede activar el evento de orientación cuando el usuario gira el dispositivo vertical u horizontalmente mediante el evento de cambio de orientación . Utiliza la propiedad window.orientation para especificar si la ventana o el dispositivo tienen una orientación vertical u horizontal.

Puede mostrar el valor del control deslizante como información sobre herramientas mediante el atributo data-popup-enabled = "true".

La alternancia de columnas coloca las columnas en un lugar oculto y permite al usuario seleccionar columnas según su elección utilizando el atributo data-mode = "columnntoggle".

Representa los datos en formato horizontal contrayendo la tabla en una representación apilada utilizando el atributo data-mode = "reflow".

Puede mostrar los conjuntos de datos en formato de rayas y trazos mediante las clases table-stripe y table-stroke.

Puede aumentar la calidad y la funcionalidad de las entradas de texto estableciendo el atributo data-advanced = "true" en el campo de entrada.

Puede cambiar el color del icono a negro utilizando la clase ui-alt-icon. De forma predeterminada, todos los iconos son blancos.

Fue desarrollado por el equipo del proyecto jQuery en el año 2010 y escrito en JavaScript.

Indica si las páginas deben cargarse a través de ajax o no.