Paneles jQuery Mobile
Paneles en jQuery Mobile se deslice hacia fuera desde la izquierda o la derecha de la pantalla con contenido adicional.
Para crear un panel, añadir el data-role="panel" atributo a un <div> elemento y especificar un id .
Añadir cualquier tipo de código HTML dentro de este <div> que desea mostrar en el panel:
<div data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some text..</p>
</div>Nota: El panel de marcado debe colocarse antes o después de la cabecera, el contenido y el pie dentro de una página jQuery Mobile.
Para acceder al panel, crear un enlace que apunta a la id del panel <div> . Cuando un usuario hace clic en el enlace, el panel se abrirá:
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>Aquí es un ejemplo básico del panel:
Ejemplo
<div data-role="page" id="pageone">
<div
data-role="panel" id="myPanel" >
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
</div>
<div
data-role="header">
<h1>Standard Page Header</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click on the button below to open the Panel.</p>
<a
href="#myPanel" class="ui-btn ui-btn-inline">Open
Panel</a>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div> Inténtalo tú mismo " Los paneles de cierre
Puede cerrar el panel haciendo clic fuera de él, deslizando o pulsando la Esc clave. Puede desactivar el clic y características swiping añadiendo adicionales data-* atributos al panel <div> :
| Atributo | Valor | Descripción | Ejemplo |
|---|---|---|---|
| data-dismissible | true | false | Especifica si el panel se puede cerrar haciendo clic fuera de ella, o no | Intentalo |
| data-swipe-close | true | false | Especifica si el panel se puede cerrar por pasar, o no | Intentalo |
También puede cerrar el panel mediante el uso de un botón: Sólo tiene que añadir un enlace dentro del panel <div> con la data-rel="close" atributo que se le atribuye. Y por razones de compatibilidad, también debe especificar el href atributo para apuntar a la ID de la página que el usuario debe ir a al cerrar el panel:
Ejemplo
<div
data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Some
text in the panel..</p>
<a
href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div> Inténtalo tú mismo " Display Panel
Se puede controlar el modo de visualización del panel con el atributo de visualización de datos:
| atributo Valor | Descripción |
|---|---|
| data-display="overlay" | Muestra el panel sobre el contenido |
| data-display="push" | Anima el panel y la página a la vez |
| data-display="reveal" | Defecto. El panel se sentará debajo de la página y revelar que la página se desliza |
Ejemplo
<div data-role="panel" id="overlayPanel" data-display="overlay" >
<div
data-role="panel" id="revealPanel" data-display="reveal" >
<div
data-role="panel" id="pushPanel" data-display="push" > Inténtalo tú mismo " Los paneles de posicionamiento
Por defecto, los paneles van a aparecer en el lado izquierdo de la pantalla. Para el panel que aparezca en el lado derecho de la pantalla, especifique la data-position="right" atributo.
También puede especificar cómo el contenido del panel debe estar colocado de acuerdo con el resto de la página cuando un usuario empieza a oscilar. De manera predeterminada, el panel se desplazará con la página (pero el contenido del panel permanecer en la cima de la página). Si siempre desea mostrar el contenido del panel, no importa cuán lejos se desplaza a la página, añadir el data-position-fixed="true" de atributo al panel: