jQuery Mobile Popups
Popups son similares a los cuadros de diálogo, en el que ambos se superponen a una parte de una página. Un cuadro emergente puede ser útil cuando se desea mostrar pequeño texto, fotos, mapas u otro contenido.
Para crear una ventana emergente, comenzar con una <a> elemento y un <div> elemento. Añadir la data-rel="popup" atributo a <a> , y el data-role="popup" atributo de <div> . A continuación, especifique un identificador de <div> , y establecer el href de <a> para que coincida con el ID especificado. El contenido dentro de <div> es el contenido real que aparecerá cuando un usuario hace clic en el enlace.
Nota: La ventana emergente <div> debe estar dentro de la misma página que el enlace.
Ejemplo
< 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> Inténtalo tú mismo " Si quieres un poco de relleno adicional y el margen en el cuadro emergente, añadir el "ui-content" clase <div> :
el cierre de ventanas emergentes
Por defecto, las ventanas emergentes se pueden cerrar o bien haciendo clic en el borde del área emergente o pulsando la "Esc" llave. Si no desea que el mensaje emergente que se puede cerrar haciendo clic en el borde del área, se puede añadir el data-dismissible="false" atributo en 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 la data-rel="back" atribuir al interior del recipiente de ventanas emergentes, y la posición del botón de clases CSS.
| Descripción | Ejemplo |
|---|---|
| botón de cierre derecha | Intentalo |
| botón de cierre de la izquierda | Intentalo |
| emergente Undismissible | Intentalo |
posicionamiento Popups
Por defecto, las ventanas emergentes aparecerán directamente sobre el elemento se ha hecho clic. Para controlar la posición de la ventana emergente, utilice la técnica de posición de atribuir en el enlace que se utiliza para abrir la ventana emergente.
Hay tres maneras de posicionar la ventana emergente:
| valor del atributo | Descripción |
|---|---|
| data-position-to="window" | Emergente aparece en el centro dentro de la ventana |
| data-position-to="#myId" | Emergente se coloca sobre el elemento con un #id especificado |
| data-position-to="origin" | Defecto. Emergente se coloca directamente sobre el elemento se ha hecho clic |
Ejemplo
<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> Inténtalo tú mismo " transiciones
Por defecto, las ventanas emergentes no tienen ningún efecto de transición añadido a ellos. Puede utilizar cualquiera de los efectos que introdujimos en el capítulo "Transiciones". Basta con aplicar la técnica de transición = atributo "value" para el enlace que se abre la ventana emergente:
Una demostración de todos los efectos de transición disponibles
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade" >Fade</a> Inténtalo tú mismo " flechas emergentes
Para añadir una flecha en el borde de la ventana emergente, utilice el atributo de datos de flecha, y especificar el valor "l" (left), "t" (top), "r" (right) o "b" (bottom) :
Ejemplo
<a href="#myPopup" data-rel="popup" class="ui-btn">Open
Popup</a>
<div data-role="popup" id="myPopup" class="ui-content"
data-arrow="l" >
<p>There
is an arrow on my LEFT border.</p>
</div> Inténtalo tú mismo " Diálogos emergentes
Puede añadir marcado de diálogo estándar en una ventana emergente (encabezado, contenido y marcas de pie de página):
Ejemplo
<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>
</div> Inténtalo tú mismo " popup Fotos
También puede mostrar imágenes en una ventana emergente:
Ejemplo
<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:400px;" alt="Skaret View">
</div> Inténtalo tú mismo " Nota: Las ventanas emergentes no son ideales cuando se tiene un conjunto de imágenes que desea mostrar (como un disco con 500 imágenes). Sin embargo, durante un par de imágenes que necesitan ser vistos más grande - que son perfectos.
superposición emergente
Puede controlar el color de fondo detrás de la ventana emergente (la propia página) con la data-overlay-theme de atributos.
Por defecto, el recubrimiento es transparente. Utilice data-overlay-theme="a" para agregar una superposición de la luz y superposición de temas de datos = "b" para añadir una capa oscura:
Ejemplo
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b" >
<p>I
have a dark background behind me.</p>
</div> Inténtalo tú mismo " El efecto de superposición se utiliza a menudo en las fotos emergentes:
Ejemplo
<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"
data-overlay-theme="b" >
<img src="skaret.jpg"
style="width:800px;height:400px;" alt="Skaret View">
</div> Inténtalo tú mismo " Nota: También aprenderá cómo utilizar las ventanas emergentes en formularios y vistas de lista de capítulos posteriores.