j-Layout2

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Този компонент е много прост компонент в сравнение с 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 Основното съдържание

Лайоут:

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

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

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>