j-Layout

• Denna komponent kan skapa en layout för din SPA. Denna komponent är lite svårare att förstå, men det är mycket användbart. j-Layout använder jComponent +v17.

Konfigurera:

• parent {String} kan innehålla parent, window eller jQuery-selektor för closest-metoden (default: window)
• margin {Number} lägger till marginal för height (default: 0)
• remember {Boolean} kan komma ihåg de senaste inställningarna för återställning (default: true)
• space {Number} inre, innehåller ett utrymme mellan panelerna (default: 1)
• border {Number} interna, innehåller en gränsstorlek (default: 0)
• resize {String} intern, en väg till metoden som körs när layouten omfördes
• autoresize {Boolean} möjliggör automatisk återvinning (default: true)

Metoder:

• component.refresh() förfriskningar layout
• component.resize() utför återställning
• component.reset() gör reset av återställning
• component.layout(name) ändrar en layout (liknande två sätt data-bindning)
• component.rebind(code_string) gör en ny layoutkonfiguration
• component.lock(type, [boolean]) låser panelen

Panel Typer:

• left vänster panel, återvunnet
• right höger panel, återvunnet
• right2 höger panel kommer att vara bredvid vänster panel och använder right nyckel i konfigurationen, återställbar
• top topppanel, återvunnet (det är panelen ovanför alla paneler)
• top2 topppanel, återvinningsbar och använder top nyckeln i konfigurationen (det är mellan left och right panel)
• bottom bottenpanel, återvinningsbar (det är panelen på botten av alla paneler)
• bottom2 bottenpanel, återvinningsbar och använder bottom nyckeln i konfigurationen (det är mellan left och right panel)
• main huvudpanel, kan inte återvinnas och storleken räknas automatiskt

Layout:

Skapa layout är mycket enkelt och med många möjligheter.Layout måste ha sin egen HTML-struktur.Se till exempel.

• size {Number/String} kan innehålla en panelhöjd/bredd enligt paneltypen.Numret 120 definierar pixlar och String 100% kan definiera procentenhet
• minsize {Number/String} är en minimal storlek på panelen medan panelen residerar (default: värdet size)
• maxsize {Number/String} är en maximal storlek på panelen medan panelen återställs (default: automatiskt räknat)
• resize {Boolean} möjliggör återställning av panelen med undantag för main (det räknas automatiskt)
• show {Boolean} möjliggör synlighet (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%' }
		}
	}
}

Bra att veta:

• IMPORTANT: Den här komponenten måste innehålla metadata av layouten i <script type="text/plain"></script>
• 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
• top2 använder top konfigurationsnyckel
• right2 använder right konfigurationsnyckel
• bottom2 använder bottom konfigurationsnyckel

Använd den med <ui-component name="layout">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.

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