Web Component: j-Layout2

j-Layout2

Configuration:

parent {String} can contain parent, window or jQuery selector for the closest method (default: window)
margin {Number} adds margin for the height (default: 0)
autoresize {Boolean} enables auto-resize (default: true)

Methods:

IMPORTANT component.show(type) can show a specific panel for mobile devices, type can be left, right or main
component.resizescrollbar(panel_type) resizes a scrollbar for a specific panel
component.scrolltop(panel_type) scrolls to top for a specific panel

Panel types:

left left panel
right right panel
top top panel (it's panel on top of all panels)
top2 top panel and uses top key in the config (it is between left and right panel)
bottom bottom panel (it's panel on bottom of all panels)
bottom2 bottom panel and uses bottom key in the config (it is between left and right panel)
main main content

Layout:

Making of layout is very easy.

<div data-type="" data-size="" data-scrollbar=""></div>

Attributes:

data-type must contain a type of section top, top2 ,left, right, bottom, bottom2 or main
data-size contains a size of section LG,MD,SM,XS --> in pixels or percentage, example: 200,200,200,0 (0 means hidden) or 20% (all values will inherit 20%)
data-scrollbar="margin:50;visible:1" enables scrollbar, possible values:
- selector {String} optional, jQuery selector for scrollbar container
- margin {Number} scrollbar margin (default: 0)
- visible {Boolean} shows the scrollbar

Good to know:

learn from example
each panel is section element and must contain data-type="top" attribute with type of panel
define panels only which you will use
ordering of all section elements isn't important

Real-time preview