Web 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
)- NEW
scrollbarshadow
{Boolean} adds shadow for scrollbars (default:false
) - NEW
backexec
{String} a link to thefunction(parent)
that captures back button (it prevents standard behaviour)
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)- NEW:
component.import(url)
imports a new section from the URL address, response must be in the form<section data-if="...."
- NEW:
component.import(html)
imports a new section from the HTML in the form<section data-if="...."
- NEW:
component.import(element)
imports a new section from the rawSECTION
element - NEW:
component.cancel([id])
removes section dynamically
Definition:
<div data---="section__path">
<!-- path must have same value as "data-if" attribute -->
<section data-if="1" data-title="A title">
</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-title="A title">
</section>
<!-- GOOD TO KNOW: Dynamic compilation -->
<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">
<!-- 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-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>
</div>
Section attributes:
data-if
must contain a condition for displayingdata-parent
can contain a parentdata-if
data-title
contains a label/title for the sectiondata-reload
can contain a link to thefunction(el)
(optional)data-id
contains a custom identifier for replacing of all~ID~
phrases in the content (optional)data-url
can contain a link to the template (optional)
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>
. - You can dynamically insert/remove sections via
component.import()
orcomponent.cancel()
methods. - All section's attributes can be changed dynamically (e.g.
data-title
,data-parent
, etc.). - NEW: all
~PATH~
phrases will be replaced for thedata-if
attribute value - NEW: all
~ID~
phrases will be replaced for thedata-if
attribute value SET('path', 'if', 'right')
will animated the content to the right side
Author
- Peter Širka petersirka@gmail.com
- License
Created
28. october 2020
Updated
01. february 2023
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
