j-Layout

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Questo componente può creare un layout per il tuo SPA.Questo componente è un po 'più difficile da capire, ma è molto utile. j-Layout utilizza jComponent +v17.

Configurazione:

parent {String} può contenere il selettore parent, window o jQuery per il metodo closest (default: window)
margin {Number} aggiunge il margine per il height (default: 0)
remember {Boolean} può ricordare le ultime impostazioni di layout per il ripristino (default: true)
space {Number} interno, contiene uno spazio tra i pannelli (default: 1)
border {Number} interno, contiene una dimensione di confine (default: 0)
resize {String} interno, un percorso verso il metodo che viene eseguito quando la layout è ristrutturata
autoresize {Boolean} consente la resisione automatica (default: true)

Metodi:

component.refresh() Riflessione
component.resize() riproduce
component.reset() ripristina la resetazione
component.layout(name) cambia un layout (come due modi di collegamento dei dati)
component.rebind(code_string) crea una nuova configurazione di layout
component.lock(type, [boolean]) chiude il pannello

Tipi di pannello:

left pannello di sinistra, risciacquabile
right a destra, ripristinabile
Il pannello di destra right2 sarà vicino al pannello sinistro e utilizza la chiave right nella configurazione, risciacquabile
Pannello superiore top, riciclabile (è il pannello in cima a tutti i pannelli)
Il pannello superiore di top2, riciclabile e utilizza la chiave di top nella configurazione (è tra il pannello di left e right)
Il pannello di fondo bottom, riciclabile (è il pannello a fondo di tutti i pannelli)
Il pannello di fondo bottom2, riciclabile e utilizza la chiave bottom nella configurazione (è tra il pannello left e right)
Il pannello principale main non può essere ripristinato e la dimensione viene calcolata automaticamente

Il layout:

La creazione di layout è molto semplice e con molte possibilità.Layout deve avere la propria struttura HTML.Guarda l'esempio.L'esemplare qui sotto descrive solo i metadati del layout.

size {Number/String} può contenere un'altezza / larghezza del pannello in base al tipo di pannello. numero 120 definisce i pixel e String 100% può definire la percentuale
minsize {Number/String} è una dimensione minima del pannello mentre il pannello si sta riassumendo (default: valore size)
maxsize {Number/String} è la dimensione massima del pannello mentre il pannello si ripresa (default: auto-conto)
resize {Boolean} consente di riprendere il pannello con eccezione del pannello main (è calcolato automaticamente)
show {Boolean} permette la visibilità (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%' }
		}
	}
}

Buono sapere:

IMPORTANTE: questo componente deve contenere i metadati del layout incollato in <script type="text/plain"></script>
Ogni pannello è un elemento section e deve contenere l'attributo data-type="top" con il tipo di pannello
Definisci solo i pannelli che utilizzerai
L'ordine di tutti gli elementi section non è importante
top2 utilizza la chiave di configurazione top
right2 utilizza la chiave di configurazione right
bottom2 utilizza la chiave di configurazione bottom

Utilizzare con <ui-component name="layout">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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>