j-Parts

Ten treść może obsługiwać wiele parts przechowywanych w Array i skupić się na jednej konkretnej części.

Konfiguracja:

• Obszar rodzinny parent {String} ze względu na wielkość części (default: auto)
• Marża pionowa margin {Number} (default: 0)
• create {String} link do function(part), jest wykonany, jeśli część została utworzona (zwana raz)
• focus {String} jest linkem do function(part), jest wykonany, jeśli część jest skoncentrowana
• close {String} jest linkem do function(part), wykonuje się, jeśli część jest zamknięta

Dobrze wiedzieć 1:

• Wszystkie frazy ~PATH~ zostaną automatycznie zastąpione przez item.path
• Wszystkie frazy ~ID~ zostaną automatycznie zastąpione przez item.id

Specyfikacja przedmiotu:

• item.id {String} bardzo ważny, częściowy identyfikator
• item.blur {String/Function(el, item)} opcjonalny, link do function(element, item) jeśli część jest skoncentrowana
• item.focus {String/Function(el, item)} lub item.reload {String} opcjonalne, link do function(element, item), jeśli część jest skoncentrowana
• item.remove {String/Function(el, item)} opcjonalny, link do function(element, item) jeśli część jest usunięta
• item.html {String} zawartość HTML lub używanie item.url
• Adres URL item.import {String} dla zawartości
• Opcjonalnie item.path {String} zastępuje wszystkie frazy ~PATH~ automatycznie
• item.delay {Number} opóźnienie w usunięciu klasy invisible
• NEW item.attrd {Object} dodaje atrybuty data-key do elementu

Rozszerzenie przez składnik:

• item.focused {Boolean} określa, czy część jest skoncentrowana lub nie
• item.element {jQuery} Część elementu

Metody:

• component.close(id) zamyka się
• component.focus(id) koncentruje się
• component.rename(id, name, [icon]) części renomowanych

Użyj go z <ui-component name="parts">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>