j-Layout2

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Ez az összetevő nagyon egyszerű összetevője, mint a j-Layout.

konfiguráció:

parent {String} tartalmazhat parent, window vagy jQuery kiválasztó a closest módszer (default: window)
margin {Number} hozzáadja a height marginát (default: 0)
autoresize {Boolean} lehetővé teszi az automatikus mérést (default: true)

módszerek:

IMPORTANT component.show(type) egy adott panelet mutathat a mobil eszközök számára, type lehet left, right vagy main
A component.resizescrollbar(panel_type) egy adott panelhez kapcsolódó szalagot átirányít
component.scrolltop(panel_type) csúcsok egy adott panelre

Panel típusok:

left bal oldali
right jobb oldala
top felső panel (ez a panel az összes panel felső)
top2 felső panel és használja a top kulcsot a konfigurációban (ez között left és right panel)
bottom alsó panel (ez a panel az összes panel alján)
bottom2 alsó panel és használja a bottom kulcsot a konfigurációban (ez között left és right panel)
main fő tartalma

Layout:

A layout elkészítése nagyon egyszerű.

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

Attribútumok:

A data-type-nek tartalmaznia kell a top, top2, left, right, bottom, bottom2 vagy main típusú részeket.
data-size tartalmaz egy rész méretét LG,MD,SM,XS --> pixelekben vagy százalékban, például: 200,200,200,0 (0 azt jelenti, hogy rejtett) vagy 20% (minden érték örökölni fogja a 20%)
data-scrollbar="margin:50;visible:1" lehetővé teszi a scrollbar, lehetséges értékek:
- selector {String} opcionális, jQuery kiválasztó a scrollbar tartályhoz
- margin {Number} scrollbar margin (default: 0)
- visible {Boolean} mutatja a scrollbar

Jó tudni:

Minden panel section elem, és tartalmaznia kell a data-type="top" attribútumot a panel típusával
Csak azokat a paneleket határozza meg, amelyeket használni fog
Az összes section elem megrendelése nem fontos

Használja a <ui-component name="layout2">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>