jQuery Mobile - Panel Responsive

Description

You can make the panel responsive and allow the panel menu and the page to be used together using the ui-responsive-panel class.

Example

Following example describes the use of panel responsive in the jQuery Mobile framework.

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_panel_responsive.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_panel_responsive.html and the following output will be displayed.

jquery_mobile_widgets.htm
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements