También puede especificar cómo se debe colocar el contenido del panel de acuerdo con el resto de la página cuando un usuario comienza a desplazarse. De forma predeterminada, el panel se desplazará con la página (pero el contenido del panel permanecerá en la parte superior de la página). Si siempre desea mostrar el contenido del panel, sin importar lo lejos que desplace la página, agregue el atributo data-position-fixed = "true" al panel
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="myPanelDefault">
<h2>Encabezado del Panel</h2>
<p>Puede cerrar el panel haciendo clic fuera del panel, presionando la tecla Esc, deslizando o haciendo clic en el botón de abajo:</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Cerrar panel</a>
</div>
<div data-role="panel" id="myPanelFixed" data-position-fixed="true">
<h2>Encabezado del Panel</h2>
<p>Puede cerrar el panel haciendo clic fuera del panel, presionando la tecla Esc, deslizando o haciendo clic en el botón de abajo</p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
</div>
<div data-role="header">
<h1>Encabezado Principal</h1>
</div>
<div data-role="main" class="ui-content">
<p>Haga clic en ambos botones y comience a desplazarse por la página.</p>
<a href="#myPanelDefault" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Abrir Default Panel</a>
<a href="#myPanelFixed" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Abrir Panel con data-position-fixed="true"</a>
<p><b>Tip:</b> Para ver el efecto del atributo data-position-fixed = "true", intente cambiar el tamaño de la ventana si la barra de desplazamiento no está disponible.</p>
<p>Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilite el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto para habilitar el desplazamiento ... algo de texto t para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento ... Algún texto para habilitar el desplazamiento..</p><br>
</div>
<div data-role="footer">
<h1>Pie de pagina</h1>
</div>
</div>
</body>
</html>
Resultado:
No hay comentarios:
Publicar un comentario