Web UI component: j-Section
j-Section
- keeps a fixed percentage height
- great usage for intranet applications
- supports
releasing
Configuration:
height
{Number} a percentage of heightparent
{String} optional, a container with fixed height, can bewindow
. Default value:parent
element.minheight
{Number} a minimal height in pixels (default:0
- disabled)scroll
{Boolean} enables vertical scrolling (default:false
- disabled)scrollbar
{Boolean} shows scrollbar (default:false
)delay
{Number}msec.
resizes the box again if the value is changed according to the path (default:100
)visibleY
{Boolean} still showsY
scrollbar (default:false
)visibleX
{Boolean} still showsX
scrollbar (default:false
)scrolltop
{Boolean} scrolls to top automatically if thepath
is changed (default:false
)margin
{Number} optional, a top/bottom margin together (supportsauto
which is counted fromoffset.top
, default:0
)marginxs
{Number} optional, a top/bottom margin together forxs
screen widthmarginsm
optional, a top/bottom margin together forsm
screen widthmarginmd
optional, a top/bottom margin together formd
screen widthmarginlg
optional, a top/bottom margin together forlg
screen widthinvisible
{Boolean} iftrue
then section setsinvisible
class when is rendering (default:true
)autofocus
{Boolean/String} can focus an input.String
===jQuery selector
for the inputback
{String} a title for back button (default:Back
)delayanim
{Number} animation delay (default:100
)
Methods:
component.scrolltop(val)
scrolls Ycomponent.scrollbottom(val)
scrolls Y from bottom sidecomponent.resize()
resizes container (it reacts onresize
events automatically)component.resizescrollbar()
resizes custom scrollbar (targeted for special cases)
Definition:
<div data---="section__path">
<!-- path must have same value as "data-if" attribute -->
<section data-if="1" data-label="Label for header">
</section>
<!-- path must have same value as "data-if" attribute -->
<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
<section data-if="2" data-parent="1" data-label="Label for header">
</section>
<!-- GOOD TO KNOW: Dynamic compilation -->
<section data-if="3" data-parent="2" data-label="Label for header">
<!-- SCRIPT or TEMPLATE -–>
<script type="text/html">
Will be compiled and rendered when the section will be displayed
</script>
</section>
<!-- Template from URL address -->
<section data-if="4" data-parent="2" data-label="Label for header" data-url="LINK_TO_HTML_TEMPLATE"></section>
</div>
Good to know:
If you want to add an additional content into the header to right side, just append inside of component e.g. <div>BUTTON</div>
.
Author
- Peter Širka petersirka@gmail.com
- License
Created
28. october 2020
Updated
22. december 2020
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
