pop jQuery Mobile
Es muy popular ventanas emergentes de diálogo emergente se pueden superponer en la pantalla de página.
Las ventanas emergentes se pueden utilizar para mostrar un texto, imágenes, mapas, u otro contenido.
Crear un estallido, y la necesidad de utilizar <a> elemento <div>. Adición-rel = datos de propiedad "emergente" en la <a> elemento, elemento <div> para agregar datos en roles = atributo "emergente". A continuación especificamos id para el <div>, a continuación, establezca el valor href <a> <div> especificada ID. <Div> El contenido es pantalla emergente contenido.
Nota: <div> pop y haga clic en un enlace <a> debe estar en la misma página.
Ejemplos
<Div data-role = "popup " id = "MyPopup">
<P> Este es un pop sencillo </ p>
</ Div>
Trate »
Si es necesario agregar relleno para el exterior y desde el pop puede agregar la categoría "ui-contenido" en el <div> en:
Cerrar elemento emergente
Por defecto, haciendo clic en el área exterior del pop o pulse la tecla "Esc" para cerrar la ventana emergente. Si no desea pulse el área exterior de la Cerrar elemento emergente pop puede agregar atributo = "true" data-descartable en el agregado (no recomendado). También puede agregar el botón Cerrar en el pop, con el botón-rel = datos de "atrás" en la propiedad, y por el estilo para controlar la posición del botón.
| descripción | Ejemplos |
|---|---|
| Botón de cierre en el lado derecho | probar |
| Cerrar el botón de la izquierda | probar |
| El uso de la propiedad data-descartable | probar |
posicionamiento del pop
Por defecto, las ventanas emergentes aparecerán directamente arriba, haga clic en el elemento, si es necesario para controlar la posición del pop, se puede utilizar la técnica de posición de atribuir a la apertura de clics pop en el enlace.
Controlar ubicaciones pop de tres maneras:
| propiedad Valor | descripción |
|---|---|
| -Posición de los datos-a = "ventana" | Pop-ups que aparecen en el centro de la ventana |
| -Posición de los datos-a = "# myId" | Pop-ups que aparecen en los elementos conocidos #id |
| -Posición de los datos-a = "origen" | Predeterminado. Haga clic en los elementos de la pantalla emergente. |
Ejemplos
<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"> Origen </a>
Trate »
transición
Por defecto, el estallido se produce ningún efecto de transición. Si se desea se puede añadir efectos de transición (a través de los datos a la transición = "valor" atribuir jQuery Mobile Transición ):
Todas las instancias de efectos de transición
Trate »
dirección emergente pequeña frontera
Si es necesario agregar un poco de orientación pop de la frontera, se puede utilizar la propiedad de los datos de flecha y especificar el valor "L" (izquierda), "t" (arriba), "r" (a la derecha) o "b" (parte inferior):
Ejemplos
<Div data-role = "popup " id = "MyPopup" class = "ui-contenidos" datos de flecha = "l">
<P> izquierda dirección frontera. </ P>
</ Div>
Trate »
diálogo emergente
Usted puede hacer estallar producido como una caja de diálogo estándar (la cabeza, y el contenido de la marca inferior):
Ejemplos
<Div data-role = "popup" id = "myPopupDialog">
<Data-role Div = "header"> <h1> texto de cabecera .. </ h1> </ div>
<data-role = Div clase "principal" = "ui-contenido"> <p> Un texto .. enlaces </ p> <a href="#"> .. </a>
<Div data-role = "pie"> <h1> en la parte inferior del texto .. </ h1> </ div>
</ Div>
Trate »
estallido de la imagen
Se puede visualizar la imagen en el pop:Ejemplos
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = estilo "w3big" = "width: 200px;"> </a>
<Div data-role = "popup" id = "MyPopup">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; altura: 400px;" alt = "w3big">
</ Div>
Trate »
cubierta de fondo emergente
Puede utilizar las propiedades de superposición de tema de datos después de pop añadir un color de fondo.
De forma predeterminada, que cubre el color de fondo transparente. Usando datos de superposición-theme = "a" para agregar un fondo claro, el uso de datos de superposición-theme = "b" poner la cubierta oscura del fondo:
Ejemplos
<Div data-role = "popup " id = "MyPopup" técnica de superposición-theme = "b">
<P> Detrás de mí hay un fondo oscuro. </ P>
</ Div>
Trate »
Generales ventanas emergentes imagen de fondo con frecuencia se superponen:
Ejemplos
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = estilo "w3big" = "width: 200px;"> </a>
<Div data-role = "popup " id = "MyPopup" técnica de superposición-theme = "b">
<Img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; altura: 400px;" alt = "w3big">
</ Div>
Trate »
Nota: En el siguiente capítulo, aprenderá cómo utilizar las formas en el pop.