j-Layout2

• Questo componente è un componente molto semplice rispetto al j-Layout.

Configurazione:

• parent {String} può contenere il selettore parent, window o jQuery per il metodo closest (default: window)
• margin {Numero} aggiunge il margine per la height (default: 0)
• autoresize {Boolean} consente la resisione automatica (default: true)

Metodi:

• IMPORTANT component.show(type) può mostrare un pannello specifico per dispositivi mobili, type può essere left, right o main
• component.resizescrollbar(panel_type) riproduce una scrollbar per un pannello specifico
• component.scrolltop(panel_type) scorrere in alto per un pannello specifico

Tipi di pannello:

• Il pannello di sinistra left
• Il pannello di destra right
• Il pannello superiore di top (è il pannello sopra tutti i pannelli)
• Il pannello superiore top2 utilizza la chiave top nella configurazione (è tra il pannello left e right)
• Il pannello di fondo bottom (il pannello è al fondo di tutti i pannelli)
• Il pannello di fondo bottom2 e utilizza la chiave bottom nella configurazione (è tra il pannello left e right)
• Il contenuto principale di main

Il layout:

Creare il layout è molto semplice.

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

Attributi:

• data-type deve contenere un tipo di sezione top, top2, left, right, bottom, bottom2 o main
• data-size contiene una dimensione della sezione LG,MD,SM,XS --> in pixel o percentuale, per esempio: 200,200,200,0 (0 significa nascosto) o 20% (tutti i valori saranno ereditati da 20%)
• data-scrollbar="margin:50;visible:1" consente scrollbar, valori possibili:
  • selector {String} selettore opzionale jQuery per il contenitore di scrollbar
  • margin {Numero} margine scrollbar (default: 0)
  • visible {Boolean} mostra la scrollbar

Buono sapere:

• Ogni pannello è un elemento section e deve contenere l'attributo data-type="top" con il tipo di pannello
• Definisci solo i pannelli che utilizzerai
• L'ordine di tutti gli elementi section non è importante

Utilizzare con <ui-component name="layout2">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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