j-Parts

Tento obsah dokáže spracovať viacero parts uložených v Array a zamerať sa na jednu konkrétnu časť. Simuluje niečo ako karty prehliadača.

Konfigurácia:

• Nadradená oblasť parent {String} kvôli veľkosti dielu (predvolené: auto)
• margin {Number} zvislý okraj (predvolené: 0)
• create {String} prepojenie na function(part), vykoná sa, ak je diel vytvorený (vyvolaný raz)
• focus {String} prepojenie na function(part), vykoná sa, ak je diel zameraný
• close {String} prepojenie na function(part), vykoná sa, ak je diel zatvorený

Je dobré vedieť 1:

• všetky frázy ~PATH~ budú automaticky nahradené item.path
• všetky frázy ~ID~ budú automaticky nahradené item.id

Špecifikácia položky:

• item.id {String} veľmi dôležitý, identifikátor dielu
• item.blur {String/Function(el, item)} voliteľné, prepojenie na function(element, item), ak je časť zameraná
• item.focus {String/Function(el, item)} alebo item.reload {String} voliteľné, odkaz na function(element, item), ak je diel zameraný
• item.remove {String/Function(el, item)} voliteľné, odkaz na function(element, item), ak je diel odstránený
• item.html {String} obsah HTML alebo použite item.url
• URL adresa item.import {String} pre obsah dielu
• item.path {String} voliteľné, automaticky nahradí všetky frázy ~PATH~
• item.delay {Number} oneskorenie pre odstránenie triedy invisible
• NEW item.attrd {Object} pridá atribúty data-key do prvku položky

Rozšíriť o komponent:

• item.focused {Boolean} určuje, či je diel zaostrený alebo nie
• Prvok dielu item.element {jQuery}

Metódy:

• component.close(id) uzatvára časť
• component.focus(id) zameriava časť
• component.rename(id, name, [icon]) premenuje časť

Použite ho so <ui-component name="parts">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>