# j-Layout2

> Създаването на лайка е много лесно.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: bg
Content-SHA256: 5071fa443c1c30659cae37d46d79a83b0c1346dca7cafb7476da258e9cdc0965
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Този компонент е много прост компонент в сравнение с `j-Layout`.


__Конфигуриране__:

- `parent` {String} може да съдържа `parent`, `window` или jQuery селектор за метода на `closest` (предварително: `window`)
- `margin` {No} добавя марж за `height` (предварително: `0`)
- `autoresize` {Boolean} позволява автоматично резиз (предварително: `true`)

__Методи__:

- `component.show(type)` може да покаже конкретен панел за мобилни устройства, `type` може да бъде `left`, `right` или `main`
- `component.resizescrollbar(panel_type)` рецизира скалбар за конкретен панел
- `component.scrolltop(panel_type)` се върти нагоре за конкретен панел

__Типове панели__:

- `left` Левият панел
- `right` Правилен панел
- `top` топ панел (то е на върха на всички панели)
- `top2` топ панел и използва `top` ключ в конфигурацията (то е между `left` и `right` панела)
- `bottom` дъно панел (то е на дъното на всички панели)
- `bottom2` Долна лента и използване `bottom` в конфигурацията (то е между `left` и `right` Панелът
- `main` Основното съдържание

__Лайоут__:

Създаването на лайка е много лесно.

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

__Атрибути__:

- `data-type` Трябва да има някакъв вид раздел. `top`, `top2` ,`left`, `right`, `bottom`, `bottom2` или `main`
- `data-size` съдържа размери на секция `LG,MD,SM,XS` -> в пиксели или проценти, например: `200,200,200,0` (`0` означава скрито) или `20%` (всички стойности ще наследяват `20%`)
- `data-scrollbar="margin:50;visible:1"` позволява скалбар, възможни стойности:
	- `selector` {String} опционален jQuery селектор за скролбар контейнер
	- `margin` Маргинална маргия (дефолт) `0`)
	- `visible` {Boolean} показва скалбар

__Добре е да се знае__:

- Всеки панел е елемент `section` и трябва да съдържа атрибут `data-type="top"` с тип панел
- Определяйте само панелите, които ще използвате
- Поръчането на всички елементи на `section` не е важно

Използвайте го с `<ui-component name="layout2">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на MIT.

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