Obtenga una introducción al marco de trabajo jQuery Mobile. Conozca las generalidades del marco de trabajo y cómo escribir una interfaz de usuario de una aplicación web móvil funcional. En este artículo, un ejemplo lo guía por las páginas básicas, la navegación, las barras de herramientas, la lista de elementos, los controles de forma y los efectos de transición.

C. Enrique Ortiz, Developer and author, Freelance

C. Enrique Ortiz es un tecnólogo y autor con gran experiencia. Un ex ingeniero en software de transbordadores espaciales que decidió focalizarse en tecnologías móviles más que en trabajar en cohetes peligrosos, asesora a desarrolladores, empresas que recién se inician e inversores sobre cosas móviles: tecnología, estrategia, productos y lanzamientos al mercado.



24-09-2012

Introducción

jQuery Mobile es un marco de trabajo magnífico para escribir las aplicaciones web móviles. Construido encima del popular jQuery y de la interfaz del usuario jQuery, jQuery Mobile es un marco de trabajo efectivo y unificado para escribir su aplicación web móvil. Con jQuery Mobile puede garantizar una apariencia y un comportamiento consistente a través de las diferentes plataformas móviles. Las características básicas de jQuery Mobile incluyen:

  • Simplicidad y flexibilidad general
    El marco de trabajo es simple de usar. Puede:
    • Desarrollar páginas utilizando principalmente marcas con un mínimo o sin JavaScript.
    • Utilizar JavaScript avanzado y eventos.
    • Utilizar un solo documento HTML con varias páginas incluidas.
    • Separar su aplicación en varias páginas.
  • Mejoras progresivas y degradación natural
    Mientras que jQuery Mobile nivela los últimos HTML5, CSS 3 y JavaScript, no todos los dispositivos móviles cuentan con esa compatibilidad. La filosofía de jQuery Mobile consiste en ser compatible tanto con dispositivos de alta gama como con dispositivos menos poderosos, como los que no tienen compatibilidad con JavaScript, y aún así proporcionar la mejor experiencia posible.
  • Compatibilidad para táctiles y otros métodos de ingreso de datos
    jQuery Mobile proporciona compatibilidad para los diferentes métodos de ingreso de datos y eventos: métodos de ingreso de datos del usuario basados en el cursor, mouse y pantallas táctiles.
  • Accesibilidad
    jQuery Mobile está diseñado teniendo en cuenta la accesibilidad. Tiene compatibilidad con Aplicaciones de Internet enriquecidas y accesibles (WAI-ARIA) para que los visitantes accedan a las páginas web a través de tecnologías asistenciales.
  • Simple y modular
    El marco de trabajo es simple con un tamaño total (minimizado y comprimido con Zip Versión 1.0.1) de 24 KB para la biblioteca JavaScript, 7 KB para el CSS, más algunos iconos.
  • Elementos relativos a un tema
    El marco de trabajo también proporciona un sistema de temas que le permite definir su propio estilo de la aplicación. Con la nueva aplicación ThemeRoller puede crear fácilmente sus propios temas.

El marco de trabajo de jQuery Mobile incluye todos los componentes de la interfaz del usuario necesarios para desarrollar aplicaciones móviles y sitios web móviles completos: páginas, diálogos, barras de herramientas, diferentes tipos de listas de elementos, una variedad de elementos de formato y botones y demás. jQuery Mobile se desarrolla por encima del centro de jQuery, entonces usted tiene acceso a las instalaciones claves, incluidas: acción y manipulación del modelo del objeto del documento HTML y XML (DOM); manipulación de eventos; comunicación con el servidor a través de Ajax; y animación y efectos de imagen para las páginas web.

Con jQuery Mobile, puede escribir aplicaciones móviles básicas sin mucho esfuerzo. Dado que jQuery Mobile es un marco de trabajo muy integrador con eventos avanzados y API, usted también puede escribir aplicaciones web móviles avanzadas y sitios web.

Este artículo introduce las generalidades en la última versión de jQuery Mobile (Versión 1.0.1). Obtenga más información sobre la compatibilidad con el navegador, los componentes de la interfaz del usuario y la API. Para continuar con este artículo, necesitará:

  • Exposición previa a HTML
  • Un entendimiento de los fundamentos de JavaScript
  • Conocimiento básico de jQuery

Puede descargar el ejemplo de código fuente de jQuery Mobile utilizado con este artículo. La sección Recursos tiene información sobre jQuery Mobile, jQuery, JavaScript, DOM, HTML5 y más.


Compatibilidad con el navegador

Los navegadores web han progresado bastante, pero no todos los dispositivos móviles son compatibles con HTML5, CSS 3 y JavaScript. Este panorama es en el que las mejoras progresivas y la compatibilidad con la degradación natural de jQuery Mobile entran en juego.

jQuery Mobile es compatible tanto con dispositivos de alta gama como con dispositivos con menor capacidad, como aquellos que no son compatibles con JavaScript. Las mejoras progresivas, que es una filosofía de diseño, consisten en los siguientes principios centrales (Wikipedia):

  • Todos los contenidos básicos deben ser accesibles para todos los navegadores.
  • Toda funcionalidad básica debe ser accesible para todos los navegadores.
  • El esquema mejorado es proporcionado por CSS vinculados externamente.
  • El esquema mejorado es proporcionado por JavaScript vinculado externamente.
  • Se respetan las preferencias del navegador del usuario final.

Todo el contenido básico debería implementarse en dispositivos básicos (como se lo diseñó), mientras que más plataformas y navegadores avanzados se mejorarán progresivamente con JavaScript y CSS externamente vinculados.

jQuery Mobile proporciona soporte a una gran cantidad de dispositivos móviles. jQuery Mobile clasifica o agrupa la compatibilidad de los dispositivos en tres categorías basadas en su nivel de compatibilidad:

  • Grado A: Dispositivos con compatibilidad para una experiencia totalmente mejorada con transiciones de páginas animadas basadas en Ajax. jQuery Mobile es compatible con más de 20 dispositivos diferentes, incluidos: iOS 3.2-5.0; Android 2.1-2.3 y 3.0; BlackBerry 6-7 y Playbook; Skyfire 4.1; Opera Mobile; y los navegadores de escritorio Chrome, Firefox, Internet Explorer y Opera.
  • Grado B: Dispositivos compatibles para una experiencia mejorada, pero sin características de navegación de Ajax. Los dispositivos compatibles incluyen: BlackBerry 5.0, Opera Mini 5.0-6.5, y Nokia Symbian ^3.
  • Grado C: Dispositivos compatibles con una experiencia HTML no mejorada. Los dispositivos compatibles incluyen: smartphones, incluido BlackBerry 4.x, Windows Mobile y otros.

Ver Recursos para obtener una lista completa de las plataformas compatibles con jQuery Mobile.

El resto de este artículo discute la estructura de la página jQuery Mobile, los atributos de datos HTML5 y los componentes de la interfaz del usuario.


Estructura de una página jQuery Mobile

Como se lo muestra en Listado 1, una página típica de jQuery Mobile tiene tres secciones: un encabezado, contenido y una sección al pie de página.

Listado 1. Página típica de jQuery Mobile
lt;div data-role="page" id="page1">
    <div data-role="header">
       <h1>HEADER</h1>
    </div
    <div data-role="content">
       <p>
       CONTENT AREA
       </p>
    </div>
    <div data-role="footer">
       <h1>FOOTER</h1>
    </div>

Figura 1 muestra la estructura de Listado 1.

Figura 1. Estructura de una página HTML5 de jQuery Mobile
Estructura de una página HTML5 de jQuery Mobile

La sección del encabezado es donde ubicaría típicamente los encabezados de página y cosas como los logotipos. La sección de contenido es donde se incluye el contenido web específico de la aplicación y los varios componentes. La sección del pie de página es de gran utilidad para propósitos de navegación.

Para tomar ventaja de las funciones avanzadas de jQuery Mobile y la sintaxis de HTML, un documento HTML de jQuery Mobile debe definir el tipo de documento HTML5. El resto del documento HTML consiste de:

  • <head> y <body> secciones donde <head> contiene las referencias para jQuery Mobile y la sección de temas móviles de CSS
  • <body> que contiene el contenido real de jQuery Mobile

Listado 2 muestra un ejemplo de un documento HTML5 de jQuery Mobile.

Listado 2. Estructura de la página HTML5 de jQuery Mobile.
//Defina el tipo de documento HTML5:

<!DOCTYPE html> 

// Defina el HTML5 <head> con referencias para jQuery, jQuery Mobile y temas móviles CSS:

<html> 

<head> 
    <title>Page Title</title> 
	
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/
jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.
min.js"></script>
</head> 

// Defina el documento HTML  <body> que incluye los elementos de jQuery Mobile:

<body> 

<div data-role="page" id="page1">

    <div data-role="header">
       <h1>ENCABEZADO</h1>
    </div>

    <div data-role="content">
       <p>
       ÁREA DE CONTENIDO
       </p>

    </div>

    <div data-role="footer">
       <h1>PIE DE PÁGINA</h1>
    </div>
</div>

<div data-role="page" id="page2">
:
:
</div>

</body>
</html>

// El pie de página puede convertirse muy fácilmente 
en una barra de navegación, como a continuación:

<center>
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">One</a>
<a href="index.html" data-role="button">Two</a>
<a href="index.html" data-role="button">Three</a>
<a href="index.html" data-role="button">None</a>
</div>            
</div>
</center>

Figura 2 muestra el pie de página creado en Listado 2.

Figura 2. Pie de página
Pie de página

Aunque el la página, el encabezado, el contenido y los atributos del pie de página sean opcionales, se recomienda que los use; hacen que las páginas sean más fácil de seguir con respecto a jQuery Mobile.

Páginas únicas, múltiples y vínculo de paginas.

Un solo documento HTML puede tener una o varias páginas jQuery Mobile, como lo indica el data-role="page" atributo. Si tiene varias páginas, debe especificar el atributo de identificación con un número de identificación único de la página que se utiliza para vincular páginas internas. Cuando se carga un documentos HTML de varias páginas, solo se muestra la primera página.

jQuery Mobile utiliza Ajax para cargar las páginas, mientras que nuestra el indicador de carga. Si la carga es exitosa, se mejoran los componentes de la interfaz del usuario, se agrega la página al DOM y se aplica animación o transición a la página.

Vinculación o carga sin Ajax fuerza la carga para utilizar HTTP. No obtendrá transiciones animadas al utilizar este enfoque. Utilice rel="external", data-ajax="false"o destino en el vínculo para cargar sin Ajax.


Eventos y métodos compatibles

En JavaScript, cuando utiliza jQuery, puede referirse al objeto jQuery como $ y obtener acceso a las instalaciones de jQuery. El marco de trabajo de jQuery Mobile, que extiende el centro jQuery, se encuentra disponible al utilizar $.mobile, que también proporciona acceso a eventos y métodos específicos de jQuery Mobile. Algunos de los eventos y métodos expuestos con $.mobile se describen a continuación.

Eventos

Como con otros eventos de jQuery, se une a los eventos de jQuery Mobile al utilizar funciones en vivo() y vinculantes() . Por ejemplo, los eventos táctiles incluyen tomas, taphold y varios eventos de mouses magnéticos y virtuales. Puede asociarse a cambios en la orientación y en los eventos de desplazamiento como el inicio y el fin del desplazamiento. Los eventos de las páginas le permiten recibir notificaciones:

  • Antes de la creación de una página
  • Cuando se crea una página
  • Antes de que se muestre o se oculte la página
  • Cuando se muestra o se oculta la página

Iniciación de jQuery Mobile

Si está familiarizado con jQuery, podría recuperar eso para ejecutar su código, tan pronto como se cargue el DOM necesita iniciarse dentro de la función $(document).ready(). Con jQuery Mobile, para la iniciación debe vincularse al pageinit evento, como se muestra en Listado 3.

Listado 3. Vinculación con el pageint evento
$( '#welcomePage' ).live( 'pageinit',function(event){
...
});

El pageinit evento se activa para la página de referencia después de que tiene lugar la iniciación. Funcionará más allá de cómo se cargue la página (directamente o con Ajax).

Anulación de las fallas de jQuery Mobile

Si se vincula con el mobileinit evento, que se activa cuando jQuery Mobile comienza a ejecutarse, puede anular algunos de los valores de fallas de jQuery Mobile. Listado 4 muestra un ejemplo. Puede anular la transición de la página predeterminada, el texto de carga de la página predeterminada, el tema de carga de la página por defecto y muchos más.

Listado 4. Iniciación de jQuery Mobile
$(document).bind("mobileinit", function(){
  //aplicar anulaciones aquí
});

Obtenga más información sobre los valores predeterminados de jQuery al visitar la página de configuración global de jQuery Mobile (ver Recursos).

Métodos

jQuery Mobile también proporciona una cantidad de métodos con el $.mobile objeto. Tabla 1 muestra algunos de los métodos disponibles.

Tabla 1. Métodos de jQuery Mobile
MétodoUso
$.mobile.changePagePara cambiar programáticamente de una página a otra. Por ejemplo, para dirigirse a la página weblog.php mediante una transición de diapositivas, utilice $.mobile.changePage("weblog.php", "slide").
$.mobile.loadPagePara cargar una página externa, mejórela con jQuery Mobile e insértela en el DOM.
$.mobile.showPageLoadingMsgPara mostrar el mensaje de carga de la página.
$.mobile.hidePageLoadingMsgPara ocultar el mensaje de carga de la página.
$.mobile.path.isSameDomainUn método útil para comparar el dominio de dos URL.
$.mobile.activePageUna referencia a la página que se está visualizando.

La página de los métodos de jQuery Mobile tiene más métodos y utilidades (ver Recursos).


Datos de atributos* de componentes y HTML5

jQuery Mobile depende de y para ser compatible con varios elementos de la interfaz del usuario y la estructura de la página. Estos atributos HTML5 son clave para la simplicidad de jQuery Mobile. Los navegadores que no son compatibles con HTML5 descargarán sutilmente los atributos HTML5.

La lista siguiente muestra el código y la exposición de diferentes componentes de interfaz de usuarios y atributos de datos y cómo utilizarlos para crear componentes de la interfaz de usuarios.

  • Página, encabezado, contenido y pie de página
    Listado 5. Página, encabezado, contenido y pie de página
    <div data-role="page" id="page1">
        <div data-role="header">
           <h1>ENCABEZADO</h1>
        </div
        <div data-role="content">
           <p>
           ÁREA DE CONTENIDO
           </p>
        </div>
        <div data-role="footer">
           <h1>PIE DE PÁGINA</h1>
        </div>
    </div>
    Figura 3. Página, encabezado, contenido y pie de página
    Página, encabezado, contenido y pie de página
  • Botón Basic
    Listado 6. Botón Basic
    <a href="index.html" data-role="button" data-icon="info">Button</a>

    Figura 4. Botón Basic
    Botón Basic
  • Casilla de verificación
    Listado 7. Casilla de verificación
    <input type="checkbox" name="checkbox-1" id="checkbox-0" class="custom" />
    <label for="checkbox-0">Checkbox</label>
    Figura 5. Casilla de verificación
    Casilla de verificación
  • Desplegable
    Listado 8. Desplegable
    <div data-role="collapsible">
       <h3>Header</h3>
       <p>Paragraph...</p>
    
    </div>
    Figura 6. Desplegable
    Desplegable
  • Abrir un diálogo con transición
    Listado 9. Abrir un diálogo
    <a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>

    El código en Listado 9 es un hipervínculo que abrirá un componente de diálogo con una transición de tipo "pop". Figura 7 ilustra un ejemplo de un componente de diálogo.

    Figura 7. Abrir un diálogo
    Abrir un diálogo
  • Interruptor de conmutación flip
    Listado 10. Interruptor de conmutación flip
    <label for="flip-a">Select slider:</label>
    <select name="slider" id="flip-a" data-role="slider">
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
    Figura 8. Interruptor de conmutación flip
    Interruptor de conmutación flip
  • Lista de elementos
    Listado 11. Lista de elementos
    <ul data-role="listview" data-theme="g">
      <li><a href="Friends.html">Friends</a></li>
      <li><a href="SendMessage.html">Send Message</a></li>
      <li><a href="Share.html">Share</a></li>
    </ul>
    Figura 9. Lista de componentes
    Lista de componentes
  • Barra de nav.
    Listado 12. Barra de nav.
    <div data-role="navbar">
       <ul>
           <li><a href="a.html" class="ui-btn-active">One</a></li>
           <li><a href="b.html">Two</a></li>
       </ul>
    </div>
    Figura 10. Barra de nav.
    Barra de nav.
  • Botón de radio
    Listado 13. Botón de radio
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
            <input type="radio" name="radio-choice-1" id="radio-choice-1" 
    value="choice-1" checked="checked" />
            <label for="radio-choice-1">Cat</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-2" 
    value="choice-2"  />
            <label for="radio-choice-2">Dog</label>
            <input type="radio" name="radio-choice-1" id="radio-choice-3"
    value="choice-3"  />
            <label for="radio-choice-3">Hamster</label>
    </fieldset>
    Figura 11. Botón de radio
    Botón de radio
  • Seleccionar (form.)
    Listado 14. Seleccionar (form.)
    <label for="select-choice-0" class="select">Shipping 
    method:</label>
    <select name="select-choice-0" id="select-choice-1">
       <option value="standard">Standard: 7 day</option>
       <option value="rush">Rush: 3 days</option>
       <option value="express">Express: next day</option>
       <option value="overnight">Overnight</option>
    </select>
    Figura 12. Seleccionar (form.)
    Seleccionar (form.)
  • Control deslizante
    Listado 15. Control deslizante
    <label for="slider-0">Input slider:</label>
    <input type="range" name="slider" id="slider-0" value="60" 
    min="0" max="100" />
    Figura 13. Control deslizante
    Control deslizante
  • Entrada de texto
    Listado 16. Entrada de texto
    <label for="basic">Text Input:</label>
    <input type="text" name="name" id="basic" value=""  />
    Figura 14. Entrada de texto
    Entrada de texto
  • Área del texto
    Listado 17. Área del texto
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    Basic textarea.
    </textarea>
    Figura 15. Área del texto
    Área del texto
  • Grilla
    Listado 18. Grilla
    <div class="ui-block-a">Block A</div>
    <div class="ui-block-b">Block B</div>
    <div class="ui-block-c">Block C</div>
    </div>

    Nota:

    • Para dos columnas utilizar la clase ui-grid-a
    • Para tres columnas utilizar la clase ui-grid-b
    • Para cuatro columnas utilizar la clase ui-grid-c
    • Para cinco columnas utilizar la clase ui-grid-d
    Figura 16. Grilla
    Grilla

El atributo de roles de datos se utiliza para definir los diferentes componentes. Sin embargo, no todos los componentes de la interfaz del usuario son ejecutados por el atributo de roles de datos (seleccionar, control deslizante y entrada de texto, por ejemplo). Vea la referencia de los atributos de datos para obtener más información sobre los diferentes atributos de datos (ver Recursos).

Como se lo menciona, el marco de trabajo de la interfaz del usuario de jQuery Mobile incluye todos los componentes de la interfaz del usuario que se necesitan para desarrollar aplicaciones web móviles completas y sitios web, incluidas páginas, diálogos, barras de herramientas, diferentes tipos de listas de elementos, una variedad de elementos de formato, botones y demás). Hemos abarcado los atributos de datos utilizados para definir los diferentes componentes de la interfaz del usuario de jQuery Mobile. El resto de esta sección abarca los componentes de la interfaz del usuario más comunes de jQuery Mobile.

Diálogos

Los diálogos modales son un tipo de página esencial que puede ser muy útil para alertas o mensajes al usuario. Cualquier página puede convertirse en un diálogo modal al agregar el data-rel="dialog" atributo al vínculo de anclaje de la página, como a continuación.

<a href="tc.html" data-rel="dialog" data-transition="pop">Terms of 
Use</a>

Puede aplicar transiciones y temas de diálogos. La página de jQuery Mobile tiene más información de referencia (ver Recursos).

Lista de elementos

La lista de elementos es una de los partes de la interfaz del usuario más importante para las aplicaciones móviles. jQuery Mobile es compatible con una gran cantidad de elementos de la lista, incluidos los botones básicos, anidados y separados, enumerados, burbujas enumeradas y listas de iconos. Demos un vistazo al código y a la exposición de algunas listas de elementos.

  • Lista vinculada de forma básica
    Listado 19. Lista vinculada de forma básica
    <ul data-role="listview">
      <li><a href="index.html">Acura</a></li>
    </ul>
    Figura 17. Lista vinculada de forma básica
    Lista vinculada de forma básica
  • Lista anidada
    Listado 20. Lista anidada
    <ul data-role="listview">
      <li>
        <h3>Animals</h3>
        <p>All your favorites from aarkvarks to zebras.</p>
          <ul>
            <li>Pets
              <ul>
                <li><a href="index.html">Canary</a></li>
                <li><a href="index.html">Cat</a></li>
                <li><a href="index.html">Dog</a></li>
                <li><a href="index.html">Gerbil</a></li>
                <li><a href="index.html">Iguana</a></li>
                <li><a href="index.html">Mouse</a></li>
              </ul>
            </li>
          </ul>
    </ul>
    Figura 18. Lista anidada
    Lista anidada
  • Lista numerada
    Listado 21. Lista numerada
    <ol data-role="listview">
      <li><a href="index.html">The Godfather</a></li>
    </ol>
    Figura 19. Lista numerada
    Lista numerada
  • Lista de botón separado
    Listado 22. Lista de botón separado
    <ul data-role="listview" data-split-icon="gear" data-split-theme="d">
      <li>
        <a href="index.html">
        <img src="images/album-ws.jpg" />
        <h3>Elephant</h3>
        <p>The White Stripes</p>
        </a><a href="lists-split-purchase.html" data-rel="dialog" 
    data-transition="slideup">Purchase album</a>
      </li>			
    </ul>
    Figura 20. Lista de botón separado
    Lista de botón separado

Listas de estilo inserto

jQuery Mobile es compatible con todas las listas de elementos como las listas de estilo inserto (listas con esquinas redondeadas) al especificar el atributo de inserción de datos, como se muestra en Figura 21.

Figura 21. La lista de estilo inserto
La lista de estilo inserto

Listado 23 muestra al código una lista de estilo inserto.

Listado 23. Listas de estilo inserto
<ul data-role="listview" data-inset="true">
    <li>
      <a href="index.html">Get Friends</a>
    </li>
    <li>
      <a href="index.html">Post to Wall</a>
    </li>
    <li>
      <a href="index.html">Send Message</a>
    </li>
</ul>

jQuery Mobile proporciona un conjunto rico de listas de elementos. Para obtener más información, vea la página de la lista de elementos de jQuery Mobile (ver Recursos).

Formatos

Los formatos con un artefacto web común para publicar información a un servidor. jQuery Mobile es compatible con muchos componentes de formatos de interfaz del usuario: entradas de texto, de búsqueda, controles deslizantes, interruptor de conmutación flip, botones de radio, casillas de verificación, selección de menúes y formatos de temas. Todos pueden crearse fácilmente. La sección anterior abarcó la mayoría de esos elementos.

jQuery Mobile proporciona un conjunto rico de elementos de formato. Listado 24 muestra una forma con una selección del menú y un botón de envío.

Listado 24. Botón de envío y de formato simple
<form action="forms-results.php" method="get"> 
    <fieldset> 
        <div data-role="fieldcontain">
            <label for="select-options" class="select">Choose 
an option:</label>
            <select name="select-options" id="select-options">
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
                <option value="option2">Option 3</option>
            </select>
        </div>
        <button type="submit">Submit</button> 
    </fieldset> 
</form>

La selección de menúes se realiza por nativos <select name="select-options" id="select-options">, pero jQuery Mobile mejora su "apariencia". El <div data-role="fieldcontain"> declaración agrupa los diferentes valores para propósitos de visualización. El formato por sí mismo se define por nativos <form action="..." method="get">.

Figura 22 muestra el resultado de Listado 24.

Figura 22. Formato simple con el menú de selección y el botón Submit
Formato simple con el menú de selección y el botón Submit

La página de elementos de formato de jQuery Mobile tiene más información (ver Recursos).


Transiciones de la página

jQuery Mobile es compatible con una gran cantidad de transiciones basadas en CSS, que se encuentran en Tabla 2, que puede aplicarse a diálogos y páginas.

Tabla 2. Transiciones basadas en CSS
TransiciónUso
fundidoEfecto de transición fundido de salida/entrada
popEfecto pop de transición
abatibleEfecto abatible de transición
giroEfecto de giro de transición
flujoEfecto de flujo (similar a deslizamiento) de transición
deslizamientoEfecto de deslizamiento (horizontal) de transición
deslizamiento superiorMuestra la página o el diálogo deslizándose desde la parte inferior a la parte superior de la página.
deslizamiento inferiorMuestra la página o el diálogo deslizándose desde la parte superior a la parte inferior de la página.
ningunoSin efecto de transición

Para forzar una animación específica, agregar el atributo de transición de datos en el vínculo, como se muestra en Listado 25.

Listado 25. Agregar atributo de transición datos.
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog"
 data-transition="fade">Search</a>

Las transiciones son aceleradas por el hardware y requieren compatibilidad con la transformación 3D por parte del navegador. Los dispositivos que no proporcionan una compatibilidad 3D volverán a fundirse.

La página de transiciones de jQuery Mobile muestra las transiciones en acción y otra información relacionada (ver Recursos).


Temas y ThemeRoller

Con jQuery Mobile, puede utilizar el atributo de tema de datos para personalizar la apariencia de su aplicación con los temas. jQuery Mobile proporciona un tema predeterminado y cinco muestras adicionales, denominadas desde la A a la E, como se muestra en Tabla 3.

Tabla 3. Temas y estilos
TemaEstilo
Tema predeterminado
Muestra A
Muestra B
Muestra C
Muestra D
Muestra E

Puede tematizar elementos individuales, como una página, un botón y demás.

Con la aplicación basada en la web de ThemeRoller mostrada en Figura 23, puede crear temas para la aplicación web móvil o el mini sitio web. También puede utilizar ThemeRoller para construir su propio tema, descargue el archivo personalizado CSS y utilícelo en su proyecto.

Figura 23. ThemeRoller
ThemeRoller

Conclusión

En este artículo, conoció algunas de las características generales del marco de trabajo jQuery Mobile. Los ejemplos en este artículo mostraron cómo usar las páginas básicas, la navegación, las barras de herramientas, la lista de elementos, los controles de forma y los efectos de transición. El marco de trabajo ofrece mucho más, incluidos otros métodos y eventos para las aplicaciones avanzadas. Con jQuery Mobile usted también puede utilizar y personalizar los componentes personales. Afortunadamente, ahora está inspirado para escribir interfaces de usuarios de una aplicación web móvil funcional con jQuery Mobile.


Descargar

DescripciónNombretamaño
jQuery plugin source codejquerymobileexamplecode.zip2KB

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Desarrollo móvil
ArticleID=836580
ArticleTitle=Introducción a jQuery Mobile
publish-date=09242012