j-Layout2

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Este componente é um componente muito simples em comparação com o j-Layout.

Configuração:

parent {String} pode conter o seletor parent, window ou jQuery para o método closest (default: window)
margin {Número} adiciona margem para o height (default: 0)
autoresize {Boolean} permite o auto-resize (default: true)

Métodos:

IMPORTANT component.show(type) pode exibir um painel específico para dispositivos móveis, type pode ser left, right ou main
component.resizescrollbar(panel_type) resissa uma barra de rolamento para um painel específico
component.scrolltop(panel_type) para cima para um painel específico

Tipos de Panel:

left - Panel de esquerda
right em direção
top (é o painel em cima de todos os painéis)
O painel superior top2 e usa a chave top na configuração (é entre o painel left e right)
Pano de fundo bottom (é o painel no fundo de todos os painéis)
O painel de fundo bottom2 e usa a chave bottom na configuração (é entre o painel left e right)
main conteúdo principal

Layout:

Criar layout é muito fácil.

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

Atributos:

data-type deve conter um tipo de secção top, top2, left, right, bottom, bottom2 ou main
data-size contém um tamanho da seção LG,MD,SM,XS --> em pixels ou porcentagem, por exemplo: 200,200,200,0 (0 significa oculto) ou 20% (todos os valores herdarão 20%)
data-scrollbar="margin:50;visible:1" permite o scrollbar, valores possíveis:
- selector {String} opcional, selector jQuery para contêiner de barras
- margin {Número} margem de rolamento (default: 0)
- visible {Boolean} mostra o scrollbar

Bom para saber:

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

Use-o com <ui-component name="layout2">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.

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>