j-ListDetail

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

The component divides the content for listing part and detail part. Displaying of detail part depends on the path {Boolean}.

Configuration:

parent {String} parent element for obtaining of width/height (default: auto)
margin {Number} a margin for height (default: 0)
width {Number/String} a detail panel width (default: 35%)
minwidth {Number/String} a minimal width of the detail panel (default: 20%)
maxwidth {Number/String} a maximal width of the detail panel (default: 50%)
resize {Boolean} enables/disables detail panel resizing (default: true)
NEW: position {String} split orientation: vertical (side-by-side) or horizontal (stacked) (default: vertical)
NEW: height {Number/String} a detail panel height (only for position:horizontal; when set, it overrides width for sizing the detail panel) (default: null)
NEW: minheight {Number/String} a minimal height of the detail panel (only for position:horizontal + height) (default: null)
NEW: maxheight {Number/String} a maximal height of the detail panel (only for position:horizontal + height) (default: null)

Parts: list + detail must be wrapped to independent <section> element, e.g.

<ui-component name="listdetail__...">
	<section>
		LIST
	</section>
	<section>
		DETAIL
	</section>
</ui-component>

Use it with <ui-component name="listdetail">. 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

<style>
	html,body { margin: 0; padding: 0; }
</style>

<ui-component name="listdetail" path="showdetail" config="parent:window;position:vertical" class="invisible">

	<section>
		LIST
	</section>

	<section>
		DETAIL
	</section>

</ui-component>

<script>
	var showdetail = true;
</script>