j-Layout

• Този компонент е малко по-трудно за разбиране, но е много полезно. j-Layout използва jComponent +v17.

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

• parent {String} може да съдържа parent, window или jQuery селектор за метода на closest (предварително: window)
• margin {Number} добавя марж за height (предварително: 0)
• remember {Boolean} може да си спомня последните настройки за рециклиране (предварително: true)
• space {Number} вътрешно, съдържа пространство между панелите (предварително: 1)
• Външен border {Number}, съдържащ граничен размер (предварително: 0)
• resize {String} вътрешен, пътят към метода, който се изпълнява, когато се преразпределя
• autoresize {Boolean} позволява автоматично резиз (предварително: true)

Методи:

• component.refresh() Рефресиране
• component.resize() се изпълнява
• component.reset() презарежда рецидивите
• component.layout(name) променя расположението (като два начина за свързване на данни)
• component.rebind(code_string) създава нова конфигурация
• component.lock(type, [boolean]) затваря панела

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

• left леви панел, рециклиран
• right Права панел, рециклираща
• Планът right2 ще бъде вляво от панела и ще използва ключа на right в конфигурацията.
• top топ панел, рециклиран (то е на върха на всички панели)
• top2 топ панел, рециклиран и използва top ключ в конфигурацията (то е между left и right панела)
• bottom дъно панел, рециклиран (то е на дъното на всички панели)
• bottom2 дъно панел, рециклиран и използва bottom ключ в конфигурацията (то е между left и right панела)
• Главен панел main, не може да бъде рециклиран и размерът се брои автоматично

Лайоут:

Създаването на оформление е много лесно и с много възможности. Разпоредбата трябва да има собствена HTML структура. Погледнете примера. Примерът по-долу описва само мета данните на оформлението.

• size {Number/String} може да съдържа височина/ширина на панела според типа на панел. номерът 120 определя пикселите и String 100% може да определи процента
• minsize {Number/String} е минимален размер на панела, докато панелът се рецидира (предварително: стойност size)
• maxsize {Number/String} е максималният размер на панела, докато панелът се рецидира (предварително: автоматично)
• resize {Boolean} позволява рециклиране на панела с изключение на панел main (то се брои автоматично)
• show {Boolean} позволява видимост (предварително: false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

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

• __Важен: Този компонент трябва да съдържа мета-данни на раздела, вграден в <script type="text/plain"></script>
• Всеки панел е елемент section и трябва да съдържа атрибут data-type="top" с тип панел
• Определяйте само панелите, които ще използвате
• Поръчането на всички елементи на section не е важно
• top2 използва ключ за конфигурация на top
• right2 използва ключ за конфигурация на right
• bottom2 използва ключ за конфигурация на bottom

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

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>