WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Mobile Panels


jQuery Mobile Panels

Panels in jQuery Mobile will slide out from the left or the correct side of the screen with extra content.



To make a board, include the information role="panel" credit to a <div> component and determine an id.

Add any HTML markup inside this <div> that you need to show in your panel:

<div data-role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some text..</p>
</div>

Note: The board markup must be put before or after the header, substance and footer inside a jQuery Mobile page.

To get to the board, make a connection that focuses to the id of the board <div>. At the point when a client taps on the connection, the board will open:

<a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>

Here is an essential board example:

Example

<div information role="page" id="pageone">
  <div data-role="panel" id="myPanel">
    <h2>Panel Header..</h2>
    <p>Some message in the panel..</p>
  </div>

  <div information role="header">
    <h1>Standard Page Header</h1>
  </div>

  <div information role="main" class="ui-content">
    <p>Click on the catch beneath to open the Panel.</p>
    <a href="#myPanel" class="ui-btn ui-btn-inline">Open Panel</a>
  </div>

  <div information role="footer">
    <h1>Footer Text</h1>
  </div>
</div>
Try it yourself »

Closing Panels

You can close the board by clicking outside of it, by swiping or by squeezing the Esc key. You can debilitate the clicking and swiping highlights by including extra information * credits to the board <div>:

Attribute Value Description
data-dismissible true | false Specifies whether the board can be shut by clicking outside of it, or not
data-swipe-close true | false Specifies whether the board can be shut by swiping, or not

You can likewise close the board by utilizing a catch: Just include a connection inside the board <div> with the information rel="close" credit joined to it. What's more, for similarity reasons, you ought to likewise determine the href ascribe to point to the ID of the page the client ought to go to when shutting the panel:

Example

<div information role="panel" id="myPanel">
  <h2>Panel Header..</h2>
  <p>Some message in the panel..</p>
  <a href="#pageone" information rel="close" class="ui-btn ui-btn-inline">Close Panel</a>
</div>
Try it yourself »

Panel Display

You can control the presentation method of the board with the information show attribute:

Attribute Value Description
data-display="overlay" Displays the board over the content
data-display="push" Animates both the board and the page at the equivalent time
data-display="reveal" Default. The board will sit under the page and uncover as the page slides away

Example

<div information role="panel" id="overlayPanel" data-display="overlay">
<div information role="panel" id="revealPanel" data-display="reveal">
<div information role="panel" id="pushPanel" data-display="push">
Try it yourself »

Positioning Panels

By default, boards will show up on the left half of the screen. For the board to show up on the correct side of the screen, determine the information position="right" property.

Example

<div information role="panel" id="myPanel" data-position="right">
Try it yourself »

You can likewise indicate how the board's substance ought to be situated agreeing to the remainder of the page when a client begins to scroll. As a matter of course, the board will scroll with the page (yet the board's substance will remain over the page). On the off chance that you continuously need to show the substance of the board, regardless of how far you look over the page, include the information position-fixed="true" credit to the panel:

Example

<div information role="panel" id="myPanel" data-position-fixed="true">
Try it yourself »