j-Parts

Este contenido puede manejar múltiples parts almacenados en el Array y centrarse en una parte específica. Simula algo así como pestañas del navegador.

Configuración:

• parent {String} área principal debido al tamaño de la pieza (predeterminado: auto)
• margin {Number} margen vertical (predeterminado: 0)
• create {String} un enlace al function(part), se ejecuta si se crea la pieza (se llama una vez)
• focus {String} un enlace al function(part), se ejecuta si la pieza está enfocada
• close {String} un enlace al function(part), se ejecuta si la parte está cerrada

Es bueno saberlo 1:

• todas las frases ~PATH~ serán reemplazadas por item.path automáticamente
• todas las frases ~ID~ serán reemplazadas por item.id automáticamente

Especificación del artículo:

• item.id {String} muy importante, identificador de pieza.
• item.blur {String/Function(el, item)} opcional, un enlace al function(element, item) si la pieza está enfocada
• item.focus {String/Function(el, item)} o item.reload {String} opcional, un enlace al function(element, item) si la pieza está enfocada
• item.remove {String/Function(el, item)} opcional, un enlace al function(element, item) si se retira la pieza
• item.html {String} un contenido HTML o use item.url
• item.import {String} Dirección URL del contenido de la pieza
• item.path {String} opcional, reemplaza todas las frases ~PATH~ automáticamente
• item.delay {Number} un retraso para la eliminación de la clase invisible
• NEW item.attrd {Object} agrega atributos data-key al elemento del elemento

Extender por el componente:

• item.focused {Boolean} determina si la pieza está enfocada o no
• Elemento pieza item.element {jQuery}

Métodos:

• component.close(id) cierra parte
• component.focus(id) enfoca parte
• component.rename(id, name, [icon]) cambia el nombre de la pieza

Úselo con <ui-component name="parts">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes 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>