Embed Size (px)
Citation preview
Los cuadros de diálogo son diferentes en jQuery MobileCómo crear cuadros de diálogo con jQuery Mobile. Diversos usos y configuraciones que convierten a los cuadros de diálogo una poderosa herramienta. Uno de los componentes de interfaz grafica de usuario más utilizado por los
desarrolladores son, sin lugar a dudas, los cuadros de diálogo. Incluso sin importar el
entorno en que se ejecute la aplicación, ya sea web, de escritorio o para dispositivos
móviles, 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 aplicación. Otro detalle importante es que la información de los
cuadros de diálogo 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 rápida a la
información. Típicos cuadros de diálogo sirven para arrojar pistas de cómo trabajar con las
aplicaciones, otros son advertencias y el más común es el de alerta.
Nota: Las alertas son muy usadas en los entornos web. Tanto es así que por lo general, cuándo uno lee un
manual de Javascript, lo primero que se enseña es a poner el tradicional "hola mundo" en un mensaje de alerta
de nuestro navegador. Para comprobarlo basta hacer memoria y recordar los primeros artículos 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. Además son altamente versátiles, ya que nos permiten
hacer muchas cosas, y cuando digo que muchas es porque los diálogos parecen no tener
límites, viajando mas allá de una simple alert, confirmDialog, o inputDialog.
La razón por la que un cuadro de dialogo en jQuery Mobile parece no tener límites es porque
realmente son como una página web completa, ya sea de las múltiples en nuestro documento HTML
o separada en un archivo aparte. Gracias al hecho de ser una página independiente, podremos hacer
multitud de cosas como agregarle imágenes, crear formularios, anexarle botones, agregar videos, o
todo lo que soporte una página web corriente. Con esto se puede entender el sin fin de aplicaciones y
posibilidades que los cuadros de diálogo pueden tener en jQuery Mobile. Pero claro, tampoco
podemos abusar de ellos, recordemos que aun siguen siendo cuadros de diálogo.
Convertir una página web en cuadro de dialogoPara que una página 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 diálogo, es un atributo que se agrega en el
enlace que nos lleva a la página. De modo que, la labor de presentar esa página como
un diálogo, la realiza el propio framework y con una implementación muy simple. El
vínculo también puede ser un botón, si lo preferimos antes que un enlace corriente. En
cualquier caso nos llevará hacia la página que se comporta como caja de diálogo, ya
esté dentro del mismo documento HTML o fuera de él.
El atributo en concreto que debemos colocar en los enlaces dirigidos a páginas que queremos que se
comporten como cuadros de diálogo 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 diálogos en jQuery Mobile: ¿Qué hace diferente a un cuadro de
diálogo de otro tipo de página, si solo es una página normal con un enlace al que hemos colocado un
atributo especial?
Sí tiene diferencias y notables, comenzando por que las páginas que son cuadros de diálogos no se
guardan en el historial del navegador, es decir, que no podremos regresar a ellas con el botón atrás 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 gráfica del cuadro de diálogo
aparece flotando, permaneciendo el documento anterior con el fondo oscuro.
Pero bien, ahora veamos un completo ejemplo de la creación de un primer cuadro de diálogo, a
través de un código cuya sencillez se apreciará. Tendremos una página normal y en ella un botón, el
cual abrirá el cuadro de dialogo, que será como una especia de alerta. Dicho botón 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 demás que necesitas saber para entender ese código ya ha sido explicado en artículos anteriores, como
Crear botones con jQuery Mobile. Asimismo, también debes haber aprendido el manejo del sistema multi-
paginas, que ofrece el framework.
Con un botón como el que creamos en el código anterior, ya estaríamos haciendo de la pagina con id
"dialogo" un cuadro de diálogo. Sin embargo, también 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 página que los invoca. Debes tener en cuenta que cuando se va a un cuadro de
diálogo se viaja a través del enlace a una nueva página, a pesar que jQuery Mobile produzca una
visualización diferente.
Para regresar nuevamente a la pagina, podrimos agregar el siguiente código en la pagina con id de
"dialogo".
<a href="#aja" data-role="button" data-rel="back">Aceptar</a>
Como se verse, en este caso también es un botón, con la diferencia que esta vez su atributo data-rel
tiene el valor de "back". Con esto no tenemos la necesidad de asignar la dirección al enlace hacia la
página inicial. Incluso si le damos una dirección diferente a la página de inicio, jQuery Mobile nos
devolverá a la pagina que invocó el dialogo.
Asignar temas gráficos a las cajas de diálogoOtra de las cosas que podemos hacer con los cuadros de diálogo es combinar sus temas,
con lo que obtendremos variedad de tipos de alerta. Por ejemplo, podríamos poner el
botón de un color, el encabezado de otro y el contenido de otro. Solo tendríamos 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 través de otro
botón 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 bastaría crear otra página web e identificarla como id="dialogo2", en esta podríamos 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 diálogo más variados en color.
Ejemplo completo de creación de cuadros de diálogo en jQuery MobilePues bien solo nos resta atar cabos sueltos en el tema de los diálogos y para eso les dejo
el código 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 próxima, esperamos veros pronto y recuerda que puedes ver el ejemplo en
funcionamiento en una página aparte
jQuery Mobile Popups
Popups son similares a los cuadros de diálogo, en el que ambos superposición de una parte de una página. Un cuadro emergente puede ser útil cuando se desea mostrar el texto pequeño, 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>. Añadir los datos-atributo rel = "popup" en <a>, y la data-role = "popup" atribuir a <div>. A continuación, 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 página que el vínculo.
<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). También puede agregar un botón de cierre de la ventana emergente, colocado a la derecha oa la izquierda. Para ello, agregue un botón de enlace con el rel-data = "back" atribuir en el contenedor de ventanas emergentes, y coloque el botón 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 aparecerán directamente sobre el elemento se hace clic. Para controlar la posición 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 ningún efecto de transición añadido a ellos. Puede utilizar cualquiera de los efectos que hemos introducido en el capítulo "Transiciones". Basta con aplicar los datos a la transición = 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 diálogo estándar en un popup (encabezado, contenido y pie de página 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 imágenes que desea mostrar (como un álbum con 500 imágenes). Sin embargo, para un par de imágenes que necesitan ser vistos más grandes - son perfectos.
Nota: Usted también aprenderá cómo utilizar las ventanas emergentes en formularios y vistas de lista en los capítulos posteriores.
Por defecto, un pequeño 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="false"</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 través de la ventana emergente. Con el posicionamiento cuidadoso, esto puede ser utilizado para resaltar los elementos en la página.
<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 mínima desde el borde de la ventana hasta el borde de la ventana emergente. Los cuatro números cuentan la distancia de la parte superior, los bordes izquierdo derecho, inferior e. Entrando en dos números 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 través del enlace que llamóajuste data-position-to a cualquier id de un elemento en una página 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 transición, 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>
