j-Layout2

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component is a much simple component compared to j-Layout.

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:

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

Use it with <ui-component name="layout2">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>