jQuery Mobile - Panel sensible

Descripción

Puede hacer que el panel responda y permitir que el menú del panel y la página se usen juntos usando el ui-responsive-panel clase.

Ejemplo

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

<!DOCTYPE html>
<html>
   <head>
      <title>Panel Responsive</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" class = "jqm-demos ui-responsive-panel" 
         id = "responsive_page">
         <div data-role = "header">
            <h2>Header</h2>
            <a href = "#panel1" data-icon = "home" data-iconpos = "notext">Right Panel</a>
            <a href = "#panel2" data-icon = "grid" data-iconpos = "notext">Left Panel</a>
         </div>
         
         <div role = "main" class = "ui-content jqm-content jqm-fullwidth">
            <h2>Panel Responsive</h2>
            <p>It has two buttons in the header bar namely the left panel has the push 
            display mode and the right panel reveal display mode. It allows both the panel 
            menu and page to be used together when more space is available. It makes the 
            panel responsive and allows panel menu and page to be used together. You can 
            use custom specific breakpoint or use the breakpoint preset by adding the 
            <code>class = "ui-responsive-panel"</code> to the page 
            container.</p>
         </div>
         
         <div data-role = "panel" data-display = "push" data-theme = "b" id = "panel1">
            <ul data-role = "listview">
               <li data-icon = "delete"><a href = "#" 
               data-rel = "close">Close Menu</a></li>
               <li><a href = "#responsive_page1">Java</a></li>
               <li><a href = "#responsive_page1">Ajax</a></li>
               <li><a href = "#responsive_page1">HTML</a></li>
               <li><a href = "#responsive_page1">CSS</a></li>
               <li><a href = "#responsive_page1">PHP</a></li>
               <li><a href = "#responsive_page1">Bootstrap</a></li>
               <li><a href = "#responsive_page1">JavaScript</a></li>
            </ul>
         </div>
         
         <div data-role = "panel" data-position = "right" data-display = "overlay" 
            data-theme = "b" id = "panel2">
            <ul data-role = "listview">
               <li data-icon = "delete"><a href = "#" 
               data-rel = "close">Close Menu</a></li>
               <li><a href = "#responsive_page1">Java</a></li>
               <li><a href = "#responsive_page1">Ajax</a></li>
               <li><a href = "#responsive_page1">HTML</a></li>
               <li><a href = "#responsive_page1">CSS</a></li>
               <li><a href = "#responsive_page1">PHP</a></li>
               <li><a href = "#responsive_page1">Bootstrap</a></li>
               <li><a href = "#responsive_page1">JavaScript</a></li>
            </ul>
         </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_panel_responsive.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_panel_responsive.html y se mostrará el siguiente resultado.

↰ Previous page