jQuery Mobile - Painel responsivo

Descrição

Você pode tornar o painel responsivo e permitir que o menu do painel e a página sejam usados juntos usando o ui-responsive-panel classe.

Exemplo

O exemplo a seguir descreve o uso do painel responsivo na estrutura 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>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código acima -

Salve o código html acima como jqm_panel_responsive.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/jqm_panel_responsive.html e a seguinte saída será exibida.

↰ Previous page