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.
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.
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.
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.
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.
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.
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.
When it comes to animation we didn't reinvent the wheel. ProPanelLayout automatically uses the awesome Velocity.js animation engine if its available.
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 of panels is activated simply by loading ProDraggable – a draggable widget created especially for ProPanelLayout.
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.
A comprehensive range of custom events and callback arguments allow you to respond to every user interaction.
Modern BEM class names provide precise, easy to read CSS selectors.
Initialisation options can be set inline using a custom HTML5 data attribute to override initialisation options passed to widget plugins.