# j-Layout

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 21ffcf71e45bc17d3d47a370639b253e882352d915d47d4ada7eed31bb764237
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

```js
{
	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.

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