para crear un panel, agregue el atributo data-role = "panel" a un elemento <div> y especifique una identificación.
Agregue cualquier marca HTML dentro de este <div> que desea mostrar en su panel.
<div data-role="panel" id="myPanel">
<h2>Panel Header..</h2>
<p>Textooooo..</p>
</div>
<h2>Panel Header..</h2>
<p>Textooooo..</p>
</div>
Nota: El marcado del panel debe colocarse antes o después del encabezado, el contenido y el pie de página dentro de una página de jQuery Mobile.
Para acceder al panel, cree un enlace que apunte a la ID del panel <div>. Cuando un usuario haga clic en el enlace, se abrirá el panel
<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="panel" id="myPanel">
<h2>Panel Header</h2>
<p>Puedes cerrar el panel haciendo click afuera de el, presionando tecla ESC o volviendo a clickear el boton</p>
</div>
<div data-role="header">
<h1>Encabezado</h1>
</div>
<div data-role="main" class="ui-content">
<p>Click para abrir el panel.</p>
<a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Abrir panel</a>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
Puede cerrar el panel haciendo clic fuera de él, deslizando o presionando la tecla Esc. Puede deshabilitar las funciones de hacer clic y deslizar agregando atributos de datos * adicionales al panel <div>
| Attribute | Value | Description |
|---|---|---|
| data-dismissible | true | false | Especifica si el panel se puede cerrar haciendo clic fuera de él o no |
| data-swipe-close | true | false | Especifica si el panel se puede cerrar al deslizar o no |
codigo a cambiar
<div data-role="panel" id="myPanel" data-dismissible="false">
También puede cerrar el panel usando un botón: simplemente agregue un enlace dentro del panel <div> con el atributo data-rel = "close" adjunto. Y por razones de compatibilidad, también debe especificar el atributo href para que apunte al ID de la página a la que debe ir el usuario al cerrar el panel
quedaría así el código (Código subrayado se le agregaría al panel)
<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">Cerrar el panel</a>
</div>
Resultado
quedaría así el código (Código subrayado se le agregaría al panel)
<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">Cerrar el panel</a>
</div>
Resultado
No hay comentarios:
Publicar un comentario