Los cuadros de dilogo son diferentes en jQuery Mobile

Cmo crear cuadros de dilogo con jQuery Mobile. Diversos usos y configuraciones
que convierten a los cuadros de dilogo una poderosa herramienta.
Uno de los componentes de interfaz grafica de usuario ms utilizado por los desarrolladores son, sin lugar a
dudas, los cuadros de dilogo. Incluso sin importar el entorno en que se ejecute la aplicacin, ya sea web, de
escritorio o para dispositivos mviles, e independientemente del objetivo para el que est destinada.
Su importancia se debe a su capacidad de informar al usuario y de servir a la vez para tomar sencillas decisiones que afectan al
flujo de la aplicacin. Otro detalle importante es que la informacin de los cuadros de dilogo se trata de manera diferente a
cualquier otro tipo de componente de interfaz grafica de usuario, pues siempre obligan a los usuarios a dar, al menos, una ojeada
rpida a la informacin. Tpicos cuadros de dilogo sirven para arrojar pistas de cmo trabajar con las aplicaciones, otros son
advertencias y el ms comn es el de alerta.
Nota: Las alertas son muy usadas en los entornos web. Tanto es as que por lo general, cundo uno lee un manual de Javascript, lo primero
que se ensea es a poner el tradicional "hola mundo" en un mensaje de alerta de nuestro navegador. Para comprobarlo basta hacer memoria y
recordar los primeros artculos que se vieron en DesarrolloWeb.com en los manuales de Javascript o en el manual de jQuery.
Las alertas, o cualquier cuadro de dialogo que creemos en jQuery Mobile, se construye con una sencillez
sorprendente. Adems son altamente verstiles, ya que nos permiten hacer muchas cosas, y cuando digo que
muchas es porque los dilogos parecen no tener lmites, viajando mas all de una simple alert, confirmDialog, o
inputDialog.
La razn por la que un cuadro de dialogo en jQuery Mobile parece no tener lmites es porque realmente son como una pgina
web completa, ya sea de las mltiples en nuestro documento HTML o separada en un archivo aparte. Gracias al hecho de ser
una pgina independiente, podremos hacer multitud de cosas como agregarle imgenes, crear formularios, anexarle botones,
agregar videos, o todo lo que soporte una pgina web corriente. Con esto se puede entender el sin fin de aplicaciones y
posibilidades que los cuadros de dilogo pueden tener en jQuery Mobile. Pero claro, tampoco podemos abusar de ellos,
recordemos que aun siguen siendo cuadros de dilogo.
Convertir una pgina web en cuadro de dialogo
Para que una pgina se comporte como un cuadro de dialogo no debemos hacer nada sobre ella, sino que
debemos construirla tal cual como se ha venido haciendo en todo el tutorial. Lo que hace que se convierta en un
dilogo, es un atributo que se agrega en el enlace que nos lleva a la pgina. De modo que, la labor de presentar
esa pgina como un dilogo, la realiza el propio framework y con una implementacin muy simple. El vnculo
tambin puede ser un botn, si lo preferimos antes que un enlace corriente. En cualquier caso nos llevar hacia
la pgina que se comporta como caja de dilogo, ya est dentro del mismo documento HTML o fuera de l.
El atributo en concreto que debemos colocar en los enlaces dirigidos a pginas que queremos que se comporten como cuadros
de dilogo es data-rel="dialog". Luego veremos ejemplos completos, pero antes quiero aclarar un asunto que fue motivo de
duda entre un grupo de personas a las que explicaba el funcionamiento de los dilogos en jQuery Mobile: Qu hace diferente a
un cuadro de dilogo de otro tipo de pgina, si solo es una pgina normal con un enlace al que hemos colocado un atributo
especial?
S tiene diferencias y notables, comenzando por que las pginas que son cuadros de dilogos no se guardan en el historial del
navegador, es decir, que no podremos regresar a ellas con el botn atrs y por tanto solo tendremos acceso si presionamos el
enlace que nos lleva hasta la pagina. Otra diferencia es que el framework se encarga de poner en el header de la pagina un icono
de cierre al dialogo. Otro detalle visual atractivo que se produce es que la interfaz grfica del cuadro de dilogo aparece
flotando, permaneciendo el documento anterior con el fondo oscuro.
Pero bien, ahora veamos un completo ejemplo de la creacin de un primer cuadro de dilogo, a travs de un cdigo cuya
sencillez se apreciar. Tendremos una pgina normal y en ella un botn, el cual abrir el cuadro de dialogo, que ser como una
especia de alerta. Dicho botn se consigue con un HTML como el siguiente.
<a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-
theme="b">Abrir dialogo</a>
Nota: Vuelvo a insistir en que debemos fijarnos en el atributo data-rel, al cual se le asigna el valor de "dialog". Todo lo dems que necesitas
saber para entender ese cdigo ya ha sido explicado en artculos anteriores, como Crear botones con jQuery Mobile. Asimismo, tambin
debes haber aprendido el manejo del sistema multi-paginas, que ofrece el framework.
Con un botn como el que creamos en el cdigo anterior, ya estaramos haciendo de la pagina con id "dialogo" un cuadro de
dilogo. Sin embargo, tambin debemos crear un mecanismo de regreso ya que, a diferencia de las cajas de alerta
convencionales que se crean con Javascript, stos no permanecen en la pgina que los invoca. Debes tener en cuenta que cuando
se va a un cuadro de dilogo se viaja a travs del enlace a una nueva pgina, a pesar que jQuery Mobile produzca una
visualizacin diferente.
Para regresar nuevamente a la pagina, podrimos agregar el siguiente cdigo en la pagina con id de "dialogo".
<a href="#aja" data-role="button" data-rel="back">Aceptar</a>
Como se verse, en este caso tambin es un botn, con la diferencia que esta vez su atributo data-rel tiene el valor de "back". Con
esto no tenemos la necesidad de asignar la direccin al enlace hacia la pgina inicial. Incluso si le damos una direccin diferente
a la pgina de inicio, jQuery Mobile nos devolver a la pagina que invoc el dialogo.
Asignar temas grficos a las cajas de dilogo
Otra de las cosas que podemos hacer con los cuadros de dilogo es combinar sus temas, con lo que obtendremos
variedad de tipos de alerta. Por ejemplo, podramos poner el botn de un color, el encabezado de otro y el
contenido de otro. Solo tendramos que asignarle temas diferentes a cada uno de los objetos o elementos
mencionados.
Para ver todo esto vamos a crear un segundo cuadro de dialogo, que ser llamado a travs de otro botn que construiremos con
un HTML como este.
<a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-
theme="c">Abrir dialogo configurado</a>
Ya solo bastara crear otra pgina web e identificarla como id="dialogo2", en esta podramos por ejemplo hacer lo siguiente.
<div data-role="page" id="dialogo2">
<div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div>
<div data-role="content" data-theme="a">
Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace
<a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>
< /div>
Como puedes observar solo tenemos que asignarle el atributo data-theme, con diferentes valores, sobre la etiqueta HTML que
crea el objeto. De esa forma podemos obtener paginas y en este caso de cuadros de dilogo ms variados en color.
Ejemplo completo de creacin de cuadros de dilogo en jQuery
Mobile
Pues bien solo nos resta atar cabos sueltos en el tema de los dilogos y para eso les dejo el cdigo del ejemplo
que hemos visto en este articulo.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Cuadros de dialogos con jQuery Mobile</title>
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
</head>
< body>
<div data-role="page" id="inicio">
<div data-role="header"><h1>Trabajando con dialogos</h1></div>
<div data-role="content">
Presiona el boton para abrir un cuadro de dialogo
<a href="#dialogo" data-role="button" data-inline="true" data-rel="dialog" data-
theme="b">Abrir dialogo</a></br>
Presiona el boton para abrir un cuadro de dialogo con colores configurados
<a href="#dialogo2" data-role="button" data-inline="true" data-rel="dialog" data-
theme="c">Abrir dialogo configurado</a>
</div>
<div data-role="footer"><h3>Cuadros de dialogos</h3></div>
</div>

<div data-role="page" id="dialogo">
<div data-role="header" ><h1>dialogo de ejemplo</h1></div>
<div data-role="content">
Este es un cuadro de dialogo sencillo que esta dentro del mismo HTML del enlace
<a href="#" data-role="button" data-rel="back">Aceptar</a>
</div>
</div>

<div data-role="page"id="dialogo2">
<div data-role="header" data-theme="b"><h1>dialogo con colores configurados</h1></div>
<div data-role="content" data-theme="a">
Este es un cuadro de dialogo configurado que esta dentro del mismo HTML del enlace
<a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>
</div>

< /body>
< /html>
Sera hasta una prxima, esperamos veros pronto y recuerda que puedes ver el ejemplo en funcionamiento en una pgina aparte
jQuery Mobile Popups

Popups son similares a los cuadros de dilogo, en el que ambos superposicin de una parte de una pgina. Un cuadro
emergente puede ser til cuando se desea mostrar el texto pequeo, fotos, mapas u otros contenidos.


To create a popup, start with an <a> element and a
<div> element. Add the data-rel="popup" attribute to
<a>, and the data-role="popup" attribute to <div>. Then
specify an id for <div>, and set the href of <a> to match
the specified id. The content inside <div> is the actual
content that will pop up when a user clicks on the link.

Para crear una ventana emergente, comenzar con un
elemento <a> y un elemento <div>. Aadir los datos-
atributo rel = "popup" en <a>, y la data-role = "popup"
atribuir a <div>. A continuacin, especifique un
identificador para <div>, y establecer el href del <a>
para que coincida con el identificador especificado. El
contenido dentro <div> es el contenido real que
aparecer cuando un usuario hace clic en el enlace.


Nota: El <div> emergente debe estar dentro de la misma pgina que el vnculo.

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<div data-role="popup" id="myPopup">
<p>This is a simple popup.</p>
</div>

If you want some extra padding and margin in your popup box, add the "ui-content" class to <div>:
Si quieres algo de relleno y el margen adicional en su cuadro emergente, agregue el "ui-contenido" clase para <div>:

<div data-role="popup" id="myPopup" class="ui-content">

Closing Popups
By default, popups can be closed either by clicking
outside the popup box or by pressing the "Esc" key. If
you do not want the popup to be closable by clicking
outside the box, you can add the data-
dismissible="false" attribute to the popup (not really
recommended). You can also add a close button to the
popup, placed either right or left. To do so, add a button
link with the data-rel="back" attribute into the popup
container, and position the button by CSS classes.
Right close button
Left close button ui-btn-left
Undismissible Popup

Por defecto, las ventanas emergentes se pueden cerrar
bien haciendo clic fuera de la ventana emergente o
pulsando la tecla "Esc". Si usted no desea que el popup
sea que se puede cerrar haciendo clic en el borde del
rea, puede agregar los datos-dismissible = "false" a la
ventana emergente (no muy recomendable). Tambin
puede agregar un botn de cierre de la ventana
emergente, colocado a la derecha oa la izquierda. Para
ello, agregue un botn de enlace con el rel-data =
"back" atribuir en el contenedor de ventanas
emergentes, y coloque el botn de clases CSS.

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-
left">Close</a>

Positioning Popups

Por defecto, las ventanas emergentes aparecern directamente sobre el elemento se hace clic. Para controlar la posicin
de la ventana emergente, utilice atributo data-position-to en el enlace que se utiliza para abrir la ventana emergente.

Hay tres maneras de posicionar el elemento emergente:
Attribute value Description
data-position-to="window"
Popup will appear centered within the window
aparecer centrada dentro de la ventana
data-position-to="#myId"
Popup is positioned over the element with a specified #id
se coloca sobre el elemento con un # id especificado
data-position-to="origin"
Default. Popup is positioned directly over the clicked element
Predeterminado. Popup se coloca directamente sobre el elemento se ha
hecho clic

<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>

Transiciones

By default, popups do not have any transition effects
added to them. You can use any of the effects that we
introduced in the "Transitions" chapter. Just apply the
data-transition="value" attribute to the link that opens
the popup:
Por defecto, las ventanas emergentes no tienen ningn
efecto de transicin aadido a ellos. Puede utilizar
cualquiera de los efectos que hemos introducido en el
captulo "Transiciones". Basta con aplicar los datos a la
transicin = atributo "valor" para el enlace que se abre
la ventana emergente:
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>

Popup Dialogs

You can add standard dialog markup into a popup
(header, content and footer markup):
Usted puede agregar marcas de dilogo estndar en un
popup (encabezado, contenido y pie de pgina de
marcado):
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>

<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>Header Text..</h1></div>
<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>

Popup Photos
You can also display images in a popup:
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>

<div data-role="popup" id="myPopup">
<img src="skaret.jpg" style="width:800px;height:500px;" alt="Skaret View">
</div>

Nota: las ventanas emergentes no son ideales cuando se tiene todo un conjunto de imgenes que desea mostrar (como
un lbum con 500 imgenes). Sin embargo, para un par de imgenes que necesitan ser vistos ms grandes - son
perfectos.

Nota: Usted tambin aprender cmo utilizar las ventanas emergentes en formularios y vistas de lista en los captulos
posteriores.


Por defecto, un pequeo margen se agrega a cualquier texto en la ventana emergente.

Attributes:

data-corners: true | false

Establece el estilo de las esquinas de la ventana
emergente.
<div data-role="popup" id="cornersF" data-corners="false"><p>An example of data-corners=&quot;false&quot;</p>
< /div>
< a href="#cornersF" data-role="button" data-rel="popup">data-corners="false"</a>

data-overlay-theme: swatch letter from a to z Por defecto, la ventana emergente se mostrar con un
fondo transparente
<div data-role="popup" id="overlayT" data-overlay-theme="a"><p>This is a popup with a custom theme.</p>
< /div>
< a href="#overlayT" data-role="button" data-rel="popup">data-overlay-theme="a"</a>

data-shadow: true | false Controla la sombra alrededor de la ventana emergente.
<div data-role="popup" id="shadowF" data-shadow="false"><p>This is a popup with data-shadow="false"</p>
< /div>
< a href="#shadowF" data-role="button" data-rel="popup">data-shadow="false"</a>

data-theme: swatch letter from a to z or none Ajuste de data-theme = "none" har que el popup
transparente. Todo - incluyendo el texto - se mostrar a
la derecha a travs de la ventana emergente. Con el
posicionamiento cuidadoso, esto puede ser utilizado
para resaltar los elementos en la pgina.
<div data-role="popup" id="themeN" data-
theme="none">
< p>*______________________*</p>
< /div>
< a href="#themeN" data-role="button" data-
rel="popup">data-theme="none"</a>
<p>This is theme "b"</p>
< /div>
< a href="#themeB" data-role="button" data-
rel="popup">data-theme="b"</a>

data-tolerance: 30, 15, 30, 15 Establece la distancia mnima desde el borde de la
ventana hasta el borde de la ventana emergente. Los
cuatro nmeros cuentan la distancia de la parte
superior, los bordes izquierdo derecho, inferior e.
Entrando en dos nmeros separados por una coma
establecer los valores de izquierda / derecha arriba /
abajo, y

data-position-to: origin | a selector | window Este atributo se utiliza es el enlace que llama a la
ventana emergente, no el popup
data-position-to="origin" se centrar la ventana emergente a travs del enlace que llam
ajuste data-position-to a cualquier id de un elemento en una pgina se abrir la ventana emergente centrada sobre
ese elemento. Setting data-position-to="window" se centrar la ventana emergente en la ventana actual

<div data-role="popup" id="posWin">
< p>Centered in the window</p>
< /div>
< a href="#posWin" data-role="button" data-rel="popup" data-position-to="window">Centered in the window</a>

data-rel: popup

Este atributo se utiliza es el enlace que llama a la
ventana emergente, no la propia ventana emergente.
data-rel="popup" muestra los div identificados en el
enlace como un popup
<div data-role="popup" id="popupA"><p>An example of a popup</p><p>with two lines.</p>
< /div>
< a href="#popupA" data-role="button" data-rel="popup">A popup</a>

data-transition: fade | flip | flow | pop | slide | slidedown
| slidefade | slideup | turn | none
Este atributo se utiliza es el enlace que llama a la
ventana emergente, no la propia ventana emergente.

Determina la transicin, cuando se muestra u oculta la
ventana emergente. No trabaja en la actualidad en
todos los dispositivos o navegadores.
<a href="pagedemo1.html" data-role="button" data-transition="fade">fade</a>