External panels - jQuery Mobile Demos

# External panels

Back

# External Panels

The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.

Navigate to page 2 to see this behavior. The HTML document for page 2 doesn't contain panel markup, but you can still open the panels.

Navigate to page 2

Left panel examples

Overlay Reveal Push

Right panel examples

Overlay Reveal Push

### Left Panel: Reveal

This panel is positioned on the left with the reveal display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel

### Left Panel: Push

This panel is positioned on the left with the push display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel

### Left Panel: Overlay

This panel is positioned on the left with the overlay display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel

### Right Panel: Reveal

This panel is positioned on the right with the reveal display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel

### Right Panel: Push

This panel is positioned on the right with the push display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel

### Right Panel: Overlay

This panel is positioned on the right with the overlay display mode. The panel markup is after the header, content and footer in the source order.

To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:

Close panel