j-Layout2

• Acest ingredient este un component foarte simplu în comparație cu j-Layout.

Configurarea:

• parent {String} poate conține parent, window sau jQuery selector pentru metoda closest (default: window)
• margin {Număr} adăuga marja pentru height (default: 0)
• autoresize {Boolean} permite rezizarea automată (default: true)

Metode:

• IMPORTANT component.show(type) poate afișa un anumit panel pentru dispozitive mobile, type poate fi left, right sau main
• component.resizescrollbar(panel_type) resizează un scrollbar pentru un anumit panou
• component.scrolltop(panel_type) scrolls la partea de sus pentru un anumit panel

Tipuri de panouri:

• left în partea stângă
• right de dreapta
• Panelul de top top (Panelul este pe partea superioară a tuturor panourilor)
• Panelul de sus top2 și utilizează cheia top în configurare (este între panourile left și right)
• Panelul de fundal bottom (panelul este pe partea de jos a tuturor panourilor)
• Panelul de bază bottom2 și utilizează cheia bottom în configurare (este între panourile left și right)
• Conținutul principal main

Layout:

Crearea unui layout este foarte ușoară.

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

Atributele:

• data-type trebuie să conțină un tip de secțiune top, top2, left, right, bottom, bottom2 sau main
• data-size conține o dimensiune a secțiunii LG,MD,SM,XS --> în pixeli sau procente, de exemplu: 200,200,200,0 (0 înseamnă ascuns) sau 20% (toate valorile vor moșteni 20%)
• data-scrollbar="margin:50;visible:1" permite scrollbar, valorile posibile:
  • selector {String} opțional, jQuery selector pentru container scrollbar
  • margin {Număr} marginea scrollbar (default: 0)
  • visible {Boolean} arată scrollbarul

bine să știi:

• Fiecare panel este elementul section și trebuie să conțină atributul data-type="top" cu tipul de panel
• Definiți doar panourile pe care le veți folosi
• Comanda tuturor elementelor section nu este importantă

Utilizați-l cu <ui-component name="layout2">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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