HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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>面板标题/en</h2> <p>文本内容/en</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
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.
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 |
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.
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: