j-Layout

• Deze component kan een layout voor uw SPA creëren. deze component is een beetje moeilijker te begrijpen, maar het is erg handig. j-Layout gebruikt jComponent +v17.

Configuratie:

• parent {String} kan een parent, window of jQuery selector bevatten voor de closest-methode (default: window)
• margin {Number} voegt een marge toe voor de height (default: 0)
• remember {Boolean} kan de laatste instellingen van de layout voor resing herinneren (default: true)
• space {Number} interne, bevat een ruimte tussen de panelen (default: 1)
• border {Number} interne, bevat een grensgrootte (default: 0)
• resize {String} intern, een route naar de methode die wordt uitgevoerd wanneer de layout is hersteld
• autoresize {Boolean} maakt auto-resize mogelijk (default: true)

Methoden:

• component.refresh() verfrissingen
• component.resize() werkt weer
• component.reset() maakt reset van de resetting
• component.layout(name) wijzigt een layout (zoals twee manieren van gegevensbinding)
• component.rebind(code_string) maakt een nieuwe layout configuratie
• component.lock(type, [boolean]) sluit het paneel

Panel Types:

• left linker panel, hersteld
• right rechter panelen, resisabele
• Het right2-panel ligt naast het linker panel en gebruikt de right-key in de configuratie, hersteld
• top toppanel, resisabele (het panel is boven alle panelen)
• top2 toppanel, hersteld en gebruikt de top sleutel in de configuratie (het is tussen left en right panel)
• bottom onderste panelen, resisabele (het paneel is aan de onderkant van alle panelen)
• bottom2 onderste panelen, hersteld en gebruikt de bottom sleutel in de configuratie (het is tussen left en right panelen)
• main hoofdpanel, kan niet worden hersteld en de grootte wordt automatisch berekend

Layout:

Het maken van de layout is erg eenvoudig en met veel mogelijkheden.Layout moet een eigen HTML-structuur hebben.Kijk naar het voorbeeld.Het voorbeeld hieronder beschrijft alleen de meta-gegevens van het layout.

• size {Number/String} kan een hoogte/breedte van het paneel bevatten volgens de paneltype.Nummer 120 definieert pixels en String 100% kan het percentage bepalen
• minsize {Number/String} is een minimale grootte van het paneel terwijl het panel wordt hersteld (default: size De waarde)
• maxsize {Number/String} is de maximale grootte van het paneel terwijl het paneil wordt gereserveerd (default: automatisch geteld)
• resize {Boolean} maakt het mogelijk om het panel te herstellen met uitzondering van het main-panel (het wordt automatisch geteld)
• show {Boolean} zorgt voor zichtbaarheid (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%' }
		}
	}
}

Goed om te weten:

• IMPORTANT: deze component moet metadata van de layout in <script type="text/plain"></script> bevatten
• 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
• top2 maakt gebruik van de top configuratie sleutel
• right2 maakt gebruik van de right configuratie sleutel
• bottom2 maakt gebruik van de bottom configuratie sleutel

Gebruik het met <ui-component name="layout">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.

<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>