j-Layout

• Acest component poate crea un layout pentru SPA. Acest componentă este puțin mai dificil de înțeles, dar este foarte util. j-Layout utilizează jComponent +v17.

Configurarea:

• parent {String} poate conține un selector parent, window sau jQuery pentru metoda closest (default: window)
• margin {Number} adaugă marja pentru height (default: 0)
• remember {Boolean} poate aminti cele mai recente setări de layout pentru reîncărcare (default: true)
• space {Number} interioară, conține un spațiu între panouri (default: 1)
• border {Number} intern, conține o dimensiune de limită (default: 0)
• resize {String} intern, o cale către metoda care este executată atunci când layout-ul este redisponibil
• autoresize {Boolean} permite auto-resize (default: true)

Metode:

• Layout de refrescătoare component.refresh()
• component.resize() se desfășoară
• component.reset() reînnoiește rezistența
• component.layout(name) modifică un layout (cum ar fi două moduri de legare a datelor)
• component.rebind(code_string) face o nouă configurare de layout
• component.lock(type, [boolean]) închide panourile

Tipuri de panouri:

• left Panelul din stânga, rezistent
• right Panelul drept, rezistabil
• Panelul de dreapta right2 va fi lângă panourile din stânga și utilizează cheia right în configurare, reîncărcat
• Panelul de sus top, rezistent (panelul este pe partea superioară a tuturor panourilor)
• Panelul de sus top2, resuscitabil și utilizează cheia top în configurare (este între panourile left și right)
• Panelul de fundal bottom, rezistent (panelul este pe partea de jos a tuturor panourilor)
• Panelul de fundal bottom2, resuscitabil și utilizează cheia bottom în configurare (este între panourile left și right)
• Panelul principal main, nu poate fi resisabil și dimensiunea este calculată automat

Layout:

Crearea de layout este foarte ușoară și cu o mulțime de posibilități.Layout trebuie să aibă propria structură HTML. Vezi exemplul.

• size {Number/String} poate conține o înălțime / lățime a panourilor în funcție de tipul de panou. numărul 120 definește pixeli și String 100% poate defini procentajul
• minsize {Number/String} este o dimensiune minimă a panourilor în timp ce panourile sunt rezistente (default: valoarea size)
• maxsize {Number/String} este o dimensiune maximă a panourilor în timp ce panourile sunt rezistenți (default: auto-numărate)
• resize {Boolean} permite reîncărcarea panourilor cu excepția panourii main (este numărat automat)
• show {Boolean} permite vizibilitatea (default: false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

bine să știi:

• IMPORTANT: Acest component trebuie să conțină meta-date ale layoutului încorporat în <script type="text/plain"></script>
• Fiecare panel este elementul section și trebuie să conțină atributul data-type="top" cu tipul de panel
• Definiți doar panourile pe care le veți folosi
• Comanda tuturor elementelor section nu este importantă
• top2 utilizează cheia de configure top
• right2 utilizează cheia de configure right
• bottom2 utilizează cheia de configure bottom

Utilizați-l cu <ui-component name="layout">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>