Latest web development tutorials

jQuery Mobile Panel

jQuery Mobile panel will draw to the right on the left side of the screen.

Designated by the id of the <div> element to add data-role = "panel" property to create a panel.

Add HTML tags <div> to display the contents of your panel:

<div data-role="panel" id="myPanel">
  <h2>面板标题..</h2>
  <p>文本内容..</p>
</div>

Note: panel tag must be placed before the page header, content, or after the composition of the bottom.

To access the panel, you need to create a link panel <div> id of the link, click on the link to open the panel:

<a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>

Simple examples of panel

Examples

<Div data-role = "page" id = "pageone">
<div data-role = "panel " id = "myPanel">
<H2> panel head .. </ h2>
<P> Content panel .. </ p>
</ Div>

<Div data-role = "header">
<H1> standard page header </ h1>
</ Div>

<Div data-role = "main" class = "ui-content">
<P> Click below to open the panel. </ P>
<a href="#myPanel" class="ui-btn ui-btn-inline"> open panel </a>
</ Div>

<Div data-role = "footer">
<H1> at the bottom of the text </ h1>
</ Div>
</ Div>

try it"

Close panel

You can click on the panel or external area or press Esc to close the sliding panel. You can use data- * attribute to disable and click to close the sliding panel:

Attributes value description Examples
data-dismissible true | false Specifies whether the panel by clicking the panel to close the outer area. try it
data-swipe-close true | false Specifies whether can be closed by sliding. try it

You can use the button to close the panel: only need to add data-rel = "close" in properties panel <div> in. For performance reasons, we need to close the link href attribute points to a page ID.

Examples

<Div data-role = "panel" id = "myPanel">
<H2> panel head .. </ h2>
<P> Panel some text .. </ p>
<a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline"> Close panel </a>
</ Div>

try it"

Display panel

You can use the data-display mode property to control the display panel:

Property Value description
data-display = "overlay" The display panel on the content
data-display = "push" Simultaneously "push" panel and page.
data-display = "reveal" Default page will draw from the screen like a slideshow, the panel will be displayed

Examples

<div data-role = "panel " id = "overlayPanel" data-display = "overlay">
<div data-role = "panel " id = "revealPanel" data-display = "reveal">
<div data-role = "panel " id = "pushPanel" data-display = "push">

try it"

Panel Location

By default, the panel will be displayed on the left side of the screen. If you want the panel appears on the right side of the screen, you can specify the data-position = "right" property.

Examples

<div data-role = "panel " id = "myPanel" data-position = "right">

try it"

You can specify the content of the panel according to the page scroll and scroll. By default, the panel together with the page scrolling (but the content of the panel is still at the top of the page). If you need to implement the content of the panel is stationary with the page scroll and scroll, you can add the data-position-fixed = "true" attribute in the panel:

Examples

<div data-role = "panel " id = "myPanel" data-position-fixed = "true">

try it"