Panels

Home Search

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.