j-Layout

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

Este componente puede crear un diseño para su SPA. Este componente es un poco más difícil de entender, pero es muy útil. j-Layout utiliza jComponent +v17.

Configuración:

parent {String} puede contener parent, window o selector jQuery para el método closest (predeterminado: window)
margin {Number} agrega margen para height (predeterminado: 0)
remember {Boolean} puede recordar la última configuración de diseño para cambiar el tamaño (predeterminado: true)
space {Number} interno, contiene un espacio entre paneles (predeterminado: 1)
border {Number} interno, contiene un tamaño de borde (predeterminado: 0)
resize {String} interno, una ruta al método que se ejecuta cuando se cambia el tamaño del diseño.
autoresize {Boolean} habilita el cambio de tamaño automático (predeterminado: true)

Métodos:

component.refresh() actualiza el diseño
component.resize() realiza el cambio de tamaño
component.reset() realiza un reinicio del cambio de tamaño
component.layout(name) cambia un diseño (como enlace de datos bidireccional)
component.rebind(code_string) realiza una nueva configuración de diseño.
component.lock(type, [boolean]) bloquea el panel

Tipos de paneles:

left panel izquierdo, redimensionable
right panel derecho, redimensionable
El panel derecho right2 estará al lado del panel izquierdo y usa la clave right en la configuración, redimensionable
top panel superior, redimensionable (es el panel encima de todos los paneles)
Panel superior top2, redimensionable y utiliza la clave top en la configuración (está entre el panel left y right)
bottom panel inferior, redimensionable (es el panel en la parte inferior de todos los paneles)
Panel inferior bottom2, redimensionable y utiliza la clave bottom en la configuración (está entre el panel left y right)
main panel principal, no se puede cambiar de tamaño y el tamaño se cuenta automáticamente

Diseño:

Hacer el maquetado es muy fácil y con muchas posibilidades. El diseño debe tener una estructura HTML propia. Mire el ejemplo. El siguiente ejemplo describe solo los metadatos del diseño.

size {Number/String} puede contener un alto/ancho de panel según el tipo de panel. El número 120 define los píxeles y la cadena 100% puede definir el porcentaje.
minsize {Number/String} es un tamaño mínimo del panel mientras el panel cambia de tamaño (predeterminado: valor size)
maxsize {Number/String} es el tamaño máximo del panel mientras el panel cambia de tamaño (predeterminado: conteo automático)
resize {Boolean} permite cambiar el tamaño del panel excepto el panel main (se cuenta automáticamente)
show {Boolean} habilita la visibilidad (predeterminado: 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%' }
		}
	}
}

Es bueno saberlo:

IMPORTANTE: este componente debe contener metadatos del diseño incluido en <script type="text/plain"></script>
cada panel es un elemento section y debe contener el atributo data-type="top" con el tipo de panel
define solo los paneles que usarás
el pedido de todos los elementos section no es importante
top2 usa la clave de configuración top
right2 usa la clave de configuración right
bottom2 usa la clave de configuración bottom

Úselo con <ui-component name="layout">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>