j-Layout2

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Denna komponent är en mycket enkel komponent jämfört med j-Layout.

Konfigurera:

parent {String} kan innehålla parent, window eller jQuery-selektor för closest-metoden (default: window)
margin {Numret} lägger till marginal för height (default: 0)
autoresize {Boolean} möjliggör automatisk återvinning (default: true)

Metoder:

IMPORTANT component.show(type) kan visa en specifik panel för mobila enheter, type kan vara left, right eller main
component.resizescrollbar(panel_type) återställer en skruvbar för ett specifikt panel
component.scrolltop(panel_type) skruvar till toppen för en viss panel

Panel Typer:

left vänster panel
right höger panel
top topppanel (det är panelen på toppen av alla paneler)
top2 topppanel och använder top nyckeln i konfigurationen (det är mellan left och right panel)
bottom bottenpanel (det är panelen på botten av alla paneler)
bottom2 baksidan och använder bottom nyckeln i konfigurationen (det är mellan left och right)
main huvudsakliga innehåll

Layout:

Att göra layout är mycket lätt.

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

Attribut:

data-type måste innehålla en typ av sektion top, top2, left, right, bottom, bottom2 eller main
data-size innehåller en storlek av avsnittet LG,MD,SM,XS --> i pixlar eller procentsatser, exempelvis: 200,200,200,0 (0 betyder dolda) eller 20% (alla värden ärver 20%)
data-scrollbar="margin:50;visible:1" möjliggör scrollbar, möjliga värden:
- selector {String} valfri jQuery-selektor för skruvbar
- margin {Number} scrollbar marginal (default: 0)
- visible {Boolean} visar scrollbar

Bra att veta:

Varje panel är section element och måste innehålla data-type="top" attribut med typ av panel
Ange bara de paneler som du använder
Beställningen av alla section-element är inte viktig

Använd den med <ui-component name="layout2">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>