jQuery Mobile Panel
panel de jQuery Mobile atraerá hacia la derecha en el lado izquierdo de la pantalla.
Designado por el id del elemento <div> para añadir data-role = "panel" propiedad para crear un panel.
Añadir etiquetas HTML <div> para mostrar el contenido de su panel:
<div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div>
Nota: la etiqueta del panel debe colocarse antes del encabezado de la página, el contenido, o después de la composición de la parte inferior.
Para acceder al panel, es necesario crear un panel de enlace <div> Identificación del enlace, haga clic en el enlace para abrir el panel:
<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
Ejemplos sencillos de panel de
Ejemplos
<Div data-role = "panel de " id = "MyPanel">
<H2> jefe de panel .. </ h2>
<P> Panel de contenido .. </ p>
</ Div>
<Div data-role = "header">
<H1> cabecera de página estándar </ h1>
</ Div>
<Div data-role = clase "principal" = "ui-content">
<P> Haga clic abajo para abrir el panel. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> panel abierto </a>
</ Div>
<Div data-role = "pie">
<H1> en la parte inferior del texto </ h1>
</ Div>
</ Div>
Trate »
Cerrar panel
Puede hacer clic en el panel o área externa o Esc para cerrar el panel deslizante. Se puede utilizar de datos * atributo para inhabilitar y haga clic en para cerrar el panel deslizante:
| propiedad | valor | descripción | Ejemplos |
|---|---|---|---|
| datos descartable | true | false | Especifica si el panel haciendo clic en el panel para cerrar la zona exterior. | probar |
| datos-golpe-cerca | true | false | Especifica si se puede cerrar por deslizamiento. | probar |
Puede utilizar el botón para cerrar el panel: sólo tiene que añadir datos-rel = "cerrar" en el panel de propiedades <div> en. Por motivos de rendimiento, tenemos que cerrar los puntos de atributo href del enlace a una página de identificación.
Ejemplos
<H2> jefe de panel .. </ h2>
<P> Panel de algún texto .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Cerrar panel </a>
</ Div>
Trate »
panel de la pantalla
Puede utilizar la propiedad modo de visualización de datos para controlar el panel de la pantalla:
| propiedad Valor | descripción |
|---|---|
| datos en el display = "superposición" | El panel de visualización de los contenidos |
| datos en el display = "empuje" | Simultáneamente panel de "empuje" y página. |
| datos en el display = "revelar" | página por defecto se basará en la pantalla como una presentación de diapositivas, se mostrará el panel |
Ejemplos
<Div data-role = "panel de " id = "revealPanel" data-display = "revelar">
<Div data-role = "panel de " id = "pushPanel" data-display = "empuje">
Trate »
Panel de Localización
De manera predeterminada, el panel se mostrará en el lado izquierdo de la pantalla. Si desea que el panel aparece en el lado derecho de la pantalla, se puede especificar la posición de datos propiedad = "derecho".
Se puede especificar el contenido del panel de desplazamiento de acuerdo con la página y desplazamiento. De manera predeterminada, el panel junto con el desplazamiento de página (pero el contenido del panel se encuentra todavía en la parte superior de la página). Si necesita aplicar el contenido del panel está parado con el desplazamiento de página y de desplazamiento, puede añadir el atributo = "true" fijo-posición de los datos en el panel: