Panels
animate
default: true
- Sets whether the panel will animate when opening and closing. If set to false, the panel will just appear and disappear without animation. This is recommended for fastest performance. Also available via the
data-animate
attribute on the panel container.
dismissible
default: true
- Sets whether the panel can be closed by clicking outside onto the page. Also available via the
data-dismissible
attribute on the link that opens the panel.
display
default: "reveal"
- The relationship of the panel to the page contents. Can either push the page over ("reveal"), re-flow the content to fit the panel content as a column ("push"), or sit over the content ("overlay"). Also available via the
data-display
attribute on the link that opens the panel.
initSelector
default: ":jqmData(role='panel')"
- The role (or and valid jQuery selector) used to trigger auto-initialization of the panel widget.
position
default: "left"
- The side of the screen the panel appears on. Values can be "left" or "right". Also available via the
data-position
attribute on the link that opens the panel.
positionFixed
default: false
- Sets whether the panel has fixed positioning so the contents are in view even if the page is scrolled down. This also allows the page to scroll while the panel stays fixed. We recommend not to enable this feature when panels are used withing Android apps because of poor performance and display issues. Also available via the
data-position-fixed
attribute on the panel.
swipeClose
default: true
- Sets whether the panel can be closed by swiping over the panel or, if
dismissible=true
, the page content and toolbars. Also available via the data-swipe-close
attribute on the panel.
theme
default: "c"
- Theme swatch for the panel. Can be any valid swatch letter in your theme (a-z). Also available via the
data-theme
attribute on the panel container.
Classes Option
The classes
option define the structural classnames that the plugin uses. This is only configurable via JavaScript because it expects an object literal value.
classes.panel
default: "ui-panel"
- Class added to the panel.
classes.panelOpen
default: "ui-panel-open"
- Class added to the panel when opening. Used for targeting hardware acceleration only during transitions.
classes.panelClosed
default: "ui-panel-closed"
- Class added to the panel when closed.
classes.panelFixed
default: "ui-panel-fixed"
- Class added to the panel when fixed positioning is applied.
classes.panelInner
default: "ui-panel-inner"
- Class added to the panel contents wrapper div.
classes.modal
default: "ui-panel-dismiss"
- Class added to the overlay on the page to dismiss the panel when hidden.
classes.modalOpen
default: "ui-panel-dismiss-open"
- Class added to the invisible overlay over the page when the panel is open. Used to dismiss the panel.
classes.pagePanel
default: "ui-page-panel"
- Class added to the page container when a panel widget is present.
classes.pagePanelOpen
default: "ui-page-panel-open"
- Class added to the page when a panel is open.
classes.contentWrap
default: "ui-panel-content-wrap"
- Class added to the wrapper injected around the page contents (header, content, footer), needed for transitioning the page contents. Fixed toolbars are not wrapped.
classes.contentWrapOpen
default: "ui-panel-content-wrap-open"
- Class added to the page contents wrapper when the panel is opening.
classes.contentWrapClosed
default: "ui-panel-content-wrap-closed"
- Class added to the page contents wrapper after the close animation is complete.
classes.contentFixedToolbar
default: "ui-panel-fixed-toolbar-wrap"
- Class added to fixed header and footer, needed for transitioning fixed toolbars.
classes.contentFixedToolbarOpen
default: "ui-panel-content-fixed-toolbar-open"
- Class added to fixed toolbars when the panel is opening.
classes.contentFixedToolbarClosed
default: "ui-panel-content-fixed-toolbar-closed"
- Class added to fixed toolbars after the close animation is complete.
classes.animate
default: "ui-panel-animate"
- Class added to the panel, page contents wrapper and fixed toolbars when option
animate
is true
and the 3D transform feature test returns true
.