j-Layout2

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

Este componente es mucho más simple en comparación con j-Layout.

Configuración:

parent {String} puede contener parent, window o selector jQuery para el método closest (predeterminado: window)
margin {Número} agrega margen para height (predeterminado: 0)
autoresize {Booleano} habilita el cambio de tamaño automático (predeterminado: true)

Métodos:

IMPORTANTE component.show(type) puede mostrar un panel específico para dispositivos móviles, type puede ser left, right o main.
component.resizescrollbar(panel_type) cambia el tamaño de una barra de desplazamiento para un panel específico
component.scrolltop(panel_type) se desplaza hacia arriba para ver un panel específico

Tipos de paneles:

left panel izquierdo
right panel derecho
top panel superior (es el panel encima de todos los paneles)
Panel superior top2 y utiliza la clave top en la configuración (está entre el panel left y right)
Panel inferior bottom (es el panel en la parte inferior de todos los paneles)
Panel inferior bottom2 y utiliza la clave bottom en la configuración (está entre el panel left y right)
main contenido principal

Diseño:

Hacer el diseño es muy fácil.

<div data-type="" data-size="" data-scrollbar=""></div>

Atributos:

data-type debe contener un tipo de sección top, top2, left, right, bottom, bottom2 o main.
data-size contiene un tamaño de sección LG,MD,SM,XS --> en píxeles o porcentaje, ejemplo: 200,200,200,0 (0 significa oculto) o 20% (todos los valores heredarán 20%)
data-scrollbar="margin:50;visible:1" habilita la barra de desplazamiento, valores posibles:
- selector {String} opcional, selector jQuery para contenedor de barra de desplazamiento
- margin {Número} margen de la barra de desplazamiento (predeterminado: 0)
- visible {Booleano} muestra la barra de desplazamiento

Es bueno saberlo:

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

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

example.html

<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>