j-Layout

• Este componente pode criar um layout para o seu SPA. este componente é um pouco mais difícil de entender, mas é muito útil. j-Layout usa jComponent +v17.

Configuração:

• parent {String} pode conter o seletor parent, window ou jQuery para o método closest (default: window)
• margin {Number} adiciona margem para o height (default: 0)
• remember {Boolean} pode lembrar as últimas configurações de layout para reservar (default: true)
• space {Number} interno, contém um espaço entre os painéis (default: 1)
• border {Number} interno, contém um tamanho de fronteira (default: 0)
• resize {String} interno, um caminho para o método que é executado quando o layout é redesenhado
• autoresize {Boolean} permite auto-resize (default: true)

Métodos:

• component.refresh() Layout de refrescos
• component.resize() é uma reposição
• component.reset() faz reposição de resumo
• component.layout(name) altera uma layout (como duas maneiras de ligar dados)
• component.rebind(code_string) cria uma nova configuração de layout
• component.lock(type, [boolean]) fecha o painel

Tipos de Panel:

• left painel esquerdo, residual
• right - Panel Direito, Residível
• O painel right2 direito estará ao lado do painel esquerdo e usa a chave right na configuração, residual
• top painel superior, residual (é painel em cima de todos os painéis)
• top2 painel superior, residual e usa a chave top na configuração (é entre o painel left e right)
• bottom painel de fundo, residual (é o painel no fundo de todos os painéis)
• bottom2 painel de fundo, residual e usa a chave bottom na configuração (é entre o painel left e right)
• Pano principal de main, can't be resizable e o tamanho é calculado automaticamente

Layout:

A criação de layout é muito fácil e com muitas possibilidades.Layout deve ter sua própria estrutura HTML.Olha para o exemplo.O exemplo abaixo descreve apenas os metadados do layout.

• size {Number/String} pode conter uma altura / largura do painel de acordo com o tipo de painel. Número 120 define pixels e String 100% pode definir percentagem
• minsize {Number/String} é um tamanho mínimo do painel enquanto o painel está reescrevendo (default: valor size)
• maxsize {Number/String} é o tamanho máximo do painel enquanto o painel está reescrevendo (default: auto-contado)
• resize {Boolean} permite a reposição do painel com exceção de painel main (é contado automaticamente)
• show {Boolean} permite visibilidade (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%' }
		}
	}
}

Bom para saber:

• IMPORTANTE: Este componente deve conter metadados do layout embalado em <script type="text/plain"></script>
• Cada painel é um elemento section e deve conter o atributo data-type="top" com o tipo de painel.
• Defina os painéis que você vai usar
• Comprar todos os elementos de section não é importante
• top2 usa a chave de configuração top
• right2 usa a chave de configuração right
• bottom2 usa a chave de configuração bottom

Use-o com <ui-component name="layout">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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