Manual de jQuery

Crear cuadros de diálogo con jQuery Mobile

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Los diálogos nos elementos que nos permiten desplegar información complementaria así como ciertos mensajes de alerta o confirmación, en este artículo explicamos como utilizarlos con jQuery Mobile.

En el ámbito de jQuery Mobile, los diálogos son pequeñas ventanas que se encargan de desplegar el contenido de una página existente, abarcando todos lo elementos dentro de un recuadro cuyo tamaño generalmente es menor al de la ventana que despliega el resto del documento. Estos diálogos suelen proporcionar un breve mensaje o pregunta para el usuario, y usualmente incluyen un botón que permite al usuario cerrar el diálogo y volver al sitio.

La creación de un cuadro de diálogo con jQuery Mobile se realiza simplemente añadiendo un atributo simple a un enlace, este atributo es “data-rel” y el valor que debe recibir es “dialog”. A continuación mostramos su uso dentro de una lista:

  <div data-role="page" id="first">
    <div data-role="header">
      <h1>Prueba de diálogo</h1>
    </div>
    <div data-role="content">
      <p>
        <a href="#pagina2">Página normal</a>		
      </p>
      <p>
        <a href="#pagina3" data-rel="dialog">Página en diálogo</a>	
      </p>
    </div>
  </div>
  <div data-role="page" id="pagina2">
    <div data-role="header">
      <h1>Segunda Página</h1>
    </div>
    <div data-role="content">
      <p>
      Segunda Página Contenido
      </p>
    </div>
  </div>
  <div data-role="page" id="pagina3">
    <div data-role="header">
      <h1>Tercera Página</h1>
    </div>
    <div data-role="content">
      <p>
      Tercera Página Contenido
      </p>
    </div>
  </div>

El ejemplo representa un sitio simple multi página elaborado con jQuery Mobile, básicamente esta la primera página desplegada estpa estructurada por dos enlaces, los cuales llevan a otras dos páginas. El primero de estos enlaces es un link típico, el cual víncula a una página común, mientras que el segundo incluye el atributo que mencionamos anteriormente, “data-rel”, el cual indica que el tercer enlace abrirá su contenido en un diálogo.

Como se puede apreciar no existe alguna otra diferencia entre los enlaces, basta con el atributo para que la página abierta se despliegue de una manera totalmente diferente. Recuerda que no hemos cambiado absolutamente nada en la estructura de la página, todos estos cambios son manejados por el propio enlace.

Básicamente esto es todo lo que se necesita para crear un diálogo, al hacer clic en el pequeño botón X que aparece, el cuadro de diálogo se oculta y regresa al usuario a la página original. Cualquier enlace que agreguemos dentro de la página, también se encargará de cerrar el diálogo cuando se de clic sobre él.

Si deseas añadir un botón o enlace de cancelación, puedes hacerlo a través del uso del atributo data-rel=”back”. El destino del enlace debe ser la página que se puso en marcha el diálogo. A continuación vamos a mostrar un código donde simplemente hemos añadido un par de botones para el diálogo que muestra la tecera página. El primer botón llamará a la segunda página, mientras que el segundo funcionará como una acción de Cancelar.

  <div data-role="page" id="pagina3">
    <div data-role="header">
      <h1>Tercera Página</h1>
    </div>
    <div data-role="content">
      <p>
      Tercera Página Contenido
      <a href="#pagina2" data-role="button">Page 2</a>
      <a href="#primera" data-role="button" data-rel="back">Cancel</a>
      </p>
    </div>
  </div>

El cambio más importante en esta plantilla es la adición de los botones en el cuadro de diálogo, lo cuales están contenidos dentro del div pagina3. Observa que ambos enlaces se convierten en botón utilizando el atributo data-role, el primero es un enlace simple, mientras que el segundo botón incluye la adición del atributo data-rel=”back”. Esta se encargará simplemente de cerrar el diálogo.

Deja una respuesta