Search within TutorialsPark

jQuery Mobile : Panel Widget


Learn how to use jQuery Mobile Panel Widget


jQuery Mobile : Panel Widget

A jQuery Mobile Panel Widget allows users to Flexible Content units which can be used to create Slide Menus, Collapse Columns Inspect Windows etc.

A Panel Must be on the Same Level as Header, Content , and Footer i. e a sibling to these Elements, and more importantly a Panel must be added either before all of this or after but never in between.


jQuery Mobile : Panel Markups

The attribute data-position is used to position the panel on the screen, the default value is left, i.e the panel appears to be pulled from left end.Other value is right.

The attribute data-display is used to set the display mode i.e the way the panel appears. The default value is reveal, while the other possible values are overlay and push

Example: jQuery Mobile - A Simple Panel

Give it a TRY! » Note: The contents of the panel can be anything, a list, Text block, images etc


jQuery Mobile : Panel Display Style

The Display style of the panel can be set using the attribute display-data, the possible values are reveal(default), overlay and push.

Syntax: jQuery Mobile - Panel Display Style

Give it a TRY! » Note: The panel can also be closed by simply tapping on the region outside the panel widget


jQuery Mobile Panel Display : Right Pull and Themes

In the previous example, the Panel was displayed from the left hand side, but you can change the position using the attribute data-position="right".

Syntax: jQuery Mobile Right Panel Display

Give it a TRY! » Note:The panel can also be closed by simply tapping on the region outside the panel widget