jQuery Mobile Panel and Collapsible Example

October 08, 2014
jQuery Mobile
This page will provide the description for jQuery Mobile Panel and Collapsible and their examples. Panel can slide right or left in mobile screen and Collapsible helps to hide and show content. We will go one by one in their details.

jQuery Mobile Panel

Panel is slider in mobile application. It opens in right side or left side of the screen in mobile. Panels are flexible and make it easy to create menus, collapsible columns, drawers, inspectors panes and more. To create panel in jQuery mobile, add data-role="panel" attribute to a <div> element and specify an id. 
<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text..</p>
  <h2>Panel Footer</h2>
</div>
A panel must correlate to the header, content and footer elements inside a jQuery Mobile page. We can add the panel markup either before or after these elements, but not in between. A panel cannot be placed outside a page. A panel's visibility is toggled by a link somewhere on the page. 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="myPanel"> 
    <h2>Panel Header - Concretepage</h2>
    <p>You can close the panel by clicking outside the pane.</p>
  </div> 
  <div data-role="header">
    <h1>Page Header - Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on the button below to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>
  </div>
  <div data-role="footer">
    <h1>Page Footer</h1>
  </div> 
</div> 
</body>
</html>
#mypanel is content area ID and will be hidden first time page load. And when we click on "open panel slide menu", #mypanel will be shown and if clicked again, #mypanel content area will be closed.

Panel Display

In jQuery mobile panel, we can control all display mode of panel with data-display attribute.
<div data-role="panel" id="overlayPanel" data-display="overlay"> : Display the panel over the content
<div data-role="panel" id="revealPanel" data-display="reveal">: Animates both the panel and the page at the same time
<div data-role="panel" id="pushPanel" data-display="push">: The panel will sit under the page and reveal as the page slides away.
Now find the example. 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="panel" id="overlayPanel" data-display="overlay"> 
    <h2>Overlay Panel</h2>
    <p>You can close the panel by clicking outside the panel</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
  </div> 
  <div data-role="panel" id="revealPanel" data-display="reveal"> 
    <h2>Reveal Panel</h2>
    <p>You can close the panel by clicking outside the panel</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
  </div> 
   <div data-role="panel" id="pushPanel" data-display="push"> 
    <h2>Push Panel</h2>
    <p>You can close the panel by clicking outside the panel</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">Close panel</a>
  </div> 
  <div data-role="header">
    <h1>Page Header - Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>Click on one of the the buttons to open the Panel - Concretepage</p>
    <a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Overlay Panel</a>
     <a href="#revealPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Reveal Panel</a>
      <a href="#pushPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">Push Panel</a>
  </div>
  <div data-role="footer">
    <h1>Page Footer</h1>
  </div> 
</div> 
</body>
</html>
Find the output.
jQuery Mobile Panel and Collapsible Example

Positioning Panels

In jQuery mobile, by default panel will appear left side of the screen but jQuery mobile framework provide data-position="" attribute to set panel left or right of the screen.
<div data-role="panel" id="myPanel" data-position="right">

jQuery Mobile Collapsible

jQuery mobile collapsible provide hide and show content in mobile screen. It is a type of toggle menu which will open and close very smoothly. To allow data-role="collapsible" attribute to a container. By default, the content is closed. To expand the content when the page loads, use data-collapsed="false". 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Expanded Collapsible - Concretepage</h1>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>Click me</h1>
      <p>I'm now expanded by default.</p>
    </div>
  </div>
  <div data-role="footer">
    <h1>Footer</h1>
  </div>
</div> 
</body>
</html>
RELATED POST

LEARN MORE
JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5








©2024 concretepage.com | Privacy Policy | Contact Us