ProPanelLayout is a tightly integrated collection of three separate widgets for the creation and management of responsive panel layouts. It is built with jQuery and jQuery UI Widget Factory and has been designed from scratch for modern web UI layout requirements.

Key Features

Ultimate Flexibility

ProPanelLayout, ProCenterPanel and ProOuterPanel widgets provide focused APIs for the three critical components of a panel layout. Whilst panel creation is automatically handled by ProPanelLayout, ProCenterPanel and ProOuterPanel widgets expose APIs for directly manipulating panels without the need to go through the layout widget.

Responsive Layouts

ProPanelLayout intelligently adapts panel size and state, within your predefined limits, in order to maintain a usable layout no matter the space available. If the layout configuration isn't viable due to insufficient vertical or horizontal space ProPanelLayout will even collapse to a pre-initialisation like state, restoring the original DOM structure, and automatically re-initialising when more space is available.

Multiple Panels

ProPanelLayout supports multiple panels of any type each with its own configuration and state management. Switching the active panel is as simple as opening, hiding, closing or sliding an inactive panel.

Unlimited Nested Layouts

Add panels to layouts and layouts to panels to create complex nested layouts and ProPanelLayout will optimise rendering using cached dimensions to avoid layout thrashing.

Modular Construction

Panels and nested layouts can be defined using an options object on initialisation or modularly after initialisation – add panels and nested layouts at any time.

Theme Support

Core CSS styles are isolated from theme CSS styles so the look and feel of ProPanelLayout elements can be modified to your requirements without the risk of impairing functionality. Multiple themes can be loaded at once and applied individually to different layouts simply using the theme option.

Supports Velocity.js Animation Library

When it comes to animation we didn't reinvent the wheel. ProPanelLayout automatically uses the awesome Velocity.js animation engine if its available.

jQuery UI Widget Interface

ProPanelLayout is a UI widget built with jQuery and jQuery UI Widget Factory. If you have ever configured and used a jQuery UI widget before, ProPanelLayout will feel very familiar.

Touch Enabled Drag Resizing

Touch enabled drag resizing of panels is activated simply by loading ProDraggable – a draggable widget created especially for ProPanelLayout.

Built-in Persistence

Panel state and size is automatically saved to and read from LocalStorage for a smooth user experience. Override this default behaviour by defining which options should be persisted on a panel by panel basis.

Callbacks and Events

A comprehensive range of custom events and callback arguments allow you to respond to every user interaction.

BEM Style Classes

Modern BEM class names provide precise, easy to read CSS selectors.

Inline Configuration

Initialisation options can be set inline using a custom HTML5 data attribute to override initialisation options passed to widget plugins.