jQuery Mobile - Panels

Description

Basic panel which moves from the left or the right side of the screen to display the content using data-role = "panel" attribute.

Example

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

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

Output

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

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

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

Panel Markup

You can write the panel content inside a page and it is sibling to the header, the content and the footer elements. You cannot write the panel markup outside the page. It will have the following format.

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

Dynamic Content

You can dynamically add the content to a panel or hide the content when the panel is open, using the updatelayout event on the panel as shown in the following format.

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

It will check for the height of panel contents and if the height of the panel exceeds, then it will set the height of the content by using min-height attribute and the position of the panel by using data-position-fixed = "true" attribute.

Opening a Panel

You can open the panel by setting href attribute to the id of the panel, which ties the link to the panel. It will open the panel when you click on the link and close the panel by clicking it again.

Closing a Panel

You can close the panel by clicking outside the panel, swiping left or right, or pressing Esc key. The swiping effect can be turned off using the data-swipe-close = "false" attribute. Sometimes, you can close the panel by clicking outside the panel; so that you can avoid this action by adding the data-dismissible = "false" to the panel. It's also possible to close the panel by adding the data-rel = "close" attribute to the panel.

Panel Animations

You can use animations on the panel if your browser provides support for 3D transforms. Use the translate3d(x,y,z) CSS transforms to animate the panel. If you don't want to use animations, then use the data-animate = "false" attribute to the panel container.

Panel Positioning

It specifies the position of panel in the page and displays the panel with the position:absolute CSS property. Use the position:fixed attribute in the panel to display the content and it doesn't matter how much you scroll the page using dataposition-fixed = "true" attribute to the panel. If the content is more which cannot fit within the page area, then the framework will display the content without fixed positioning.

Styling Panels

The jQuery Mobile framework provides styles for the panels. By default, panels will be in simple styles but you can customize them according to the user criteria. You can enclose the content in a div using the ui-panel-inner class which includes 15 pixels of padding. You can set the theme background for the panels using different types of themes. The default theme for panel is "c" and set the theme for panel using the data-theme attribute. If you don't want to set the theme, then use the data-theme = "none" attribute to use your own classes to style the panel.

Making the Panel Responsive

The jQuery Mobile framework makes the panel responsive and allows the panel menu and page to be used together. You can use specific breakpoint to a page or use the class ="ui-responsive-panel" breakpoint preset to the page container.

jquery_mobile_widgets.htm
Advertisements