j-Parts

Това съдържание може да се справи с няколко parts съхранени в Array и да се съсредоточи върху една конкретна част.

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

• parent {String} Родителска зона поради частичен размер (дефолт: auto)
• margin {Number} Вертикална маржа (дефолт) 0)
• create {String} е връзка към function(part), тя се изпълнява, ако частта е създадена (казва се веднъж)
• focus {String} е връзка към function(part), тя се изпълнява, ако частта е фокусирана
• close {String} е връзка към function(part), тя се изпълнява, ако частта е затворена

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

• Всички фрази на ~PATH~ ще бъдат заменени с item.path автоматично
• Всички фрази на ~ID~ ще бъдат заменени с item.id автоматично

Спецификация на елемента:

• item.id {String} много важен, част идентификатор
• item.blur {String/Function(el, item)} опция, връзка към function(element, item), ако частта е фокусирана
• item.focus {String/Function(el, item)} или item.reload {String} опция, връзка към function(element, item), ако частта е фокусирана
• item.remove {String/Function(el, item)} опционално, връзка към function(element, item) ако частта е премахната
• item.html {String} съдържание или използване на item.url
• item.import {String} URL адрес за съдържанието на частта
• item.path {String} е опционален, той автоматично заменя всички фрази на ~PATH~.
• item.delay {Number} закъснение за премахване на клас invisible
• NEW item.attrd {Object} добавя атрибути на data-key към елемента

Разширяване на компонента:

• item.focused {Boolean} определя дали частта е фокусирана или не
• item.element {jQuery} Част от елемента

Методи:

• component.close(id) Затваряне част
• component.focus(id) се фокусира върху
• component.rename(id, name, [icon]) Ренесанс част

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

<ui-component name="exec">

	<ui-bind path="myparts" config="template" class="block">
		<script type="text/html">
			{{ foreach m in value }}
			<button class="exec" data-exec="changepart" data-id="{{ m.id }}"><i class="ti ti-times exec mr5" data-prevent="true" data-exec="closepart"></i>{{ m.name }}</button>
			{{ end }}
		</script>
	</ui-bind>
	<br />

	<div style="width:600px;height:300px;border:1px solid #E0E0E0">
		<ui-component name="parts" path="myparts" config="parent:auto"></ui-component>
	</div>

</ui-component>

<script>
	var myparts = [];

	myparts.push({ id: '1', name: 'Part 1', html: '<div class="padding">Part 1</div>' });
	myparts.push({ id: '2', name: 'Part 2', html: '<div class="padding">Part 2</div>' });
	myparts.push({ id: '3', name: 'Part 3', html: '<div class="padding">Part 3</div>' });

	function changepart(el ,e) {
		var id = ATTRD(el);
		SETTER('parts/focus', id);
	}

	function closepart(el, e) {
		var id = ATTRD(el);
		SETTER('parts/close', id);
	}

</script>