jQuery Mobile - Paneles

Descripción

Panel básico que se mueve desde el lado izquierdo o derecho de la pantalla para mostrar el contenido usando data-role = "panel" atributo.

Ejemplo

El siguiente ejemplo describe el uso del panel en el marco jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Panel</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "panel" id = "panel1">
            <h2>This is Panel Header</h2>
            <p>You can close this panel by pressing the Esc key or by swiping.</p>
         </div>
         
         <div data-role  =  "header">
            <h2>Header</h2>
         </div>
         
         <div data-role  =  "main" class  =  "ui-content">
            <p>Click on the button to open Panel.</p>
            <a href = "#panel1" class = "ui-btn ui-btn-inline">Open Panel</a>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_panels.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_panels.html y se mostrará el siguiente resultado.

Marcado de panel

Puede escribir el contenido del panel dentro de una página y es hermano del encabezado, el contenido y los elementos del pie de página. No puede escribir el marcado del panel fuera de la página. Tendrá el siguiente formato.

<div data-role = "page">
   <div data-role = "panel" id = "panel1">
      <!-- panel content -->
   </div><!-- end of panel -->
   
   <!-- header -->
   <!-- content -->
   <!-- footer -->
</div><!-- end of page -->

Contenido dinámico

Puede agregar dinámicamente el contenido a un panel u ocultar el contenido cuando el panel está abierto, usando el updatelayout evento en el panel como se muestra en el siguiente formato.

$( "#panel1" ).trigger( "updatelayout" );

Verificará la altura del contenido del panel y, si la altura del panel excede, establecerá la altura del contenido utilizando min-height atributo y la posición del panel usando data-position-fixed = "true" atributo.

Abrir un panel

Puede abrir el panel configurando hrefatributo al ID del panel, que vincula el enlace al panel. Abrirá el panel cuando haga clic en el enlace y cerrará el panel haciendo clic en él nuevamente.

Cerrar un panel

Puede cerrar el panel haciendo clic fuera del panel, deslizando hacia la izquierda o hacia la derecha, o presionando la tecla Esc. El efecto de deslizamiento se puede desactivar con eldata-swipe-close = "false"atributo. A veces, puede cerrar el panel haciendo clic fuera del panel; para que pueda evitar esta acción agregando eldata-dismissible = "false"al panel. También es posible cerrar el panel agregando eldata-rel = "close" atributo al panel.

Animaciones de panel

Puede usar animaciones en el panel si su navegador admite transformaciones 3D. Utilizar eltranslate3d(x,y,z)CSS se transforma para animar el panel. Si no desea utilizar animaciones, utilice eldata-animate = "false" atributo al contenedor del panel.

Posicionamiento del panel

Especifica la posición del panel en la página y muestra el panel con el position:absolutePropiedad CSS. Utilizar elposition:fixed atributo en el panel para mostrar el contenido y no importa cuánto se desplace la página usando dataposition-fixed = "true"atributo al panel. Si el contenido es más que no cabe dentro del área de la página, entonces el marco mostrará el contenido sin un posicionamiento fijo.

Paneles de estilo

El marco jQuery Mobile proporciona estilos para los paneles. De forma predeterminada, los paneles tendrán estilos simples, pero puede personalizarlos según los criterios del usuario. Puede incluir el contenido en un div usando elui-panel-innerclase que incluye 15 píxeles de relleno. Puede configurar el fondo del tema para los paneles utilizando diferentes tipos de temas. El tema predeterminado para el panel es "c"y establezca el tema del panel con data-themeatributo. Si no desea establecer el tema, utilice eldata-theme = "none" atributo para usar sus propias clases para diseñar el panel.

Hacer que el panel sea receptivo

El marco de jQuery Mobile hace que el panel sea receptivo y permite que el menú del panel y la página se usen juntos. Puede usar un punto de interrupción específico para una página o usar la clase ="ui-responsive-panel" punto de interrupción preestablecido en el contenedor de la página.

↰ Previous page