j-Layout2

• Jest to bardzo prosty składnik w porównaniu do j-Layout.

Konfiguracja:

• parent {String} może zawierać wybór parent, window lub jQuery dla metody closest (default: window)
• margin {Liczba} dodaje marżę dla height (default: 0)
• autoresize {Boolean} umożliwia automatyczne rozmiary (default: true)

Metody:

• IMPORTANT component.show(type) może wyświetlać konkretny panel dla urządzeń przenośnych, type może być left, right lub main
• component.resizescrollbar(panel_type) odtwarza pasek do określonego panelu
• component.scrolltop(panel_type) skróci się do góry dla konkretnego panelu

Rodzaje paneli:

• Płytki left
• Płytka prawica right
• Panel top (Panel jest na górze wszystkich paneli)
• Panel top2 i używa klucza top w konfiguracji (jest między panelem left a right)
• Panel bottom (Panel znajduje się na dole wszystkich paneli)
• Panel bottom2 i używa klucza bottom w konfiguracji (jest między panelem left a right)
• main zawartość

Layout:

Tworzenie layoutów jest bardzo proste.

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

atrybuty:

• data-type musi zawierać rodzaj sekcji top, top2, left, right, bottom, bottom2 lub main
• data-size zawiera rozmiar sekcji LG,MD,SM,XS -> w pikselach lub procentach, na przykład: 200,200,200,0 (0 oznacza ukryte) lub 20% (wszystkie wartości będą dziedziczyć 20%)
• data-scrollbar="margin:50;visible:1" umożliwia skręcanie, możliwe wartości:
  • selector {String} opcjonalny, jQuery selektor dla kontenera skręcającego
  • margin {Liczba} margines scrollbar (default: 0)
  • visible {Boolean} wyświetla skrzynkę

Dobrze wiedzieć:

• Każdy panel jest elementem section i musi zawierać atrybut data-type="top" z typem panelu
• Określ panele, które będziesz używać
• Zamówienie wszystkich elementów section nie ma znaczenia

Użyj go z <ui-component name="layout2">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>