j-Layout

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente kann ein Layout für Ihr SPA erstellen. Diese Komponente ist etwas schwieriger zu verstehen, aber sehr hilfreich. j-Layout verwendet jComponent +v17.

Konfiguration:

parent {String} kann parent, window oder jQuery-Selektor für die closest-Methode enthalten (Standard: window)
margin {Number} fügt Marge für height hinzu (Standard: 0)
remember {Boolean} kann sich die letzten Einstellungen des Layouts zur Größenänderung merken (Standard: true)
space {Number} intern, enthält einen Abstand zwischen den Panels (Standard: 1)
border {Number} intern, enthält eine Rahmengröße (Standard: 0)
resize {String} intern, ein Pfad zur Methode, die ausgeführt wird, wenn die Größe des Layouts geändert wird
autoresize {Boolean} aktiviert die automatische Größenänderung (Standard: true)

Methoden:

component.refresh() aktualisiert das Layout
component.resize() führt eine Größenänderung durch
component.reset() führt ein Zurücksetzen der Größenänderung durch
component.layout(name) ändert ein Layout (z. B. bidirektionale Datenbindung)
component.rebind(code_string) erstellt eine neue Layoutkonfiguration
component.lock(type, [boolean]) sperrt das Panel

Panel-Typen:

left linkes Feld, veränderbar
right rechtes Feld, größenverstellbar
Das rechte Panel right2 befindet sich neben dem linken Panel und verwendet den Schlüssel right in der Konfiguration, dessen Größe geändert werden kann
top oberes Panel, größenverstellbar (das Panel liegt über allen Panels)
top2-Oberseite, in der Größe veränderbar und verwendet den top-Schlüssel in der Konfiguration (er liegt zwischen left und right-Bedienfeld)
bottom unteres Panel, größenverstellbar (es ist das Panel an der Unterseite aller Panels)
bottom2 unteres Panel, veränderbar in der Größe und verwendet den bottom-Schlüssel in der Konfiguration (er liegt zwischen left und right Panel)
main-Hauptfenster, kann nicht in der Größe geändert werden und die Größe wird automatisch gezählt

Layout:

Die Erstellung des Layouts ist sehr einfach und bietet viele Möglichkeiten. Das Layout muss eine eigene HTML-Struktur haben. Schauen Sie sich das Beispiel an. Das folgende Beispiel beschreibt nur Metadaten des Layouts.

size {Number/String} kann je nach Paneeltyp eine Höhe/Breite des Paneels enthalten. Die Zahl 120 definiert Pixel und die Zeichenfolge 100% kann den Prozentsatz definieren
minsize {Number/String} ist eine minimale Größe des Panels, während die Größe des Panels geändert wird (Standard: size-Wert)
maxsize {Number/String} ist eine maximale Größe des Panels, während die Größe des Panels geändert wird (Standard: automatisch gezählt)
resize {Boolean} ermöglicht die Größenänderung des Panels mit Ausnahme des Panels main (es wird automatisch gezählt).
show {Boolean} ermöglicht Sichtbarkeit (Standard: 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%' }
		}
	}
}

Gut zu wissen:

WICHTIG: Diese Komponente muss Metadaten des in <script type="text/plain"></script> eingeschlossenen Layouts enthalten
Jedes Panel ist ein section-Element und muss das Attribut data-type="top" mit dem Paneltyp enthalten
Definieren Sie nur die Panels, die Sie verwenden möchten
Die Reihenfolge aller section-Elemente ist nicht wichtig
top2 verwendet den Konfigurationsschlüssel top
right2 verwendet den Konfigurationsschlüssel right
bottom2 verwendet den Konfigurationsschlüssel bottom

Verwenden Sie es mit <ui-component name="layout">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

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