j-Layout2

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Deze component is een zeer eenvoudige component in vergelijking met j-Layout.

Configuratie:

parent {String} kan een parent, window of jQuery selector voor de closest-methode bevatten (default: window)
margin {Nummer} voegt de margin toe voor de height (default: 0)
autoresize {Boolean} maakt auto-resize mogelijk (default: true)

Methoden:

IMPORTANT component.show(type) kan een specifiek panel voor mobiele apparaten tonen, type kan left, right of main zijn
component.resizescrollbar(panel_type) herstelt een scrollbar voor een specifiek panel
component.scrolltop(panel_type) scrolls naar de top voor een specifiek panel

Panel Types:

left linker
right rechter panel
top toppanel (het panel is boven alle panelen)
top2 toppanel en gebruikt de top sleutel in de configuratie (het is tussen left en right panel)
bottom onderste panelen (het paneel aan de onderkant van alle panelen)
bottom2 onderste panel en gebruikt de bottom sleutel in de configuratie (het is tussen left en right panel)
main belangrijkste inhoud

Layout:

Het maken van een layout is heel eenvoudig.

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

Attributen:

data-type moet een type sectie van top, top2, left, right, bottom, bottom2 of main bevatten.
data-size bevat een afdeling van LG,MD,SM,XS --> in pixels of percentages, bijvoorbeeld: 200,200,200,0 (0 betekent verborgen) of 20% (alle waarden zullen 20%)
data-scrollbar="margin:50;visible:1" zorgt voor scrollbar, mogelijke waarden:
- selector {String} optioneel, jQuery selector voor scrollbar container
- margin {Nummer} scrollbar marge (default: 0)
- visible {Boolean} toont de scrollbar

Goed om te weten:

Elk panel is het element section en moet een data-type="top"-attribuut bevatten met een paneltype.
Bepaal alleen de panelen die u gebruikt
Het bestellen van alle section-elementen is niet belangrijk

Gebruik het met <ui-component name="layout2">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>