j-Parts

Este conteúdo pode lidar com vários parts armazenados no Array e se concentrar em uma parte específica.

Configuração:

• Área parental parent {String} devido ao tamanho parcial (default: auto)
• Margem vertical de margin {Number} (default: 0)
• create {String} um link para o function(part), é executado se a parte for criada (chamado uma vez)
• focus {String} um link para o function(part), é executado se a parte for focada
• close {String} um link para o function(part), é executado se a parte for fechada

É bom saber 1:

• Todas as frases ~PATH~ serão substituídas por item.path automaticamente
• Todas as frases ~ID~ serão substituídas por item.id automaticamente

A especificação do item:

• item.id {String} muito importante, parte identificador
• item.blur {String/Function(el, item)} opcional, um link para o function(element, item) se a parte for focada
• item.focus {String/Function(el, item)} ou item.reload {String} opcional, um link para o function(element, item) se a parte for focada
• item.remove {String/Function(el, item)} opcional, um link para o function(element, item) se a parte for removida
• item.html {String} um conteúdo HTML ou usar item.url
• URL de item.import {String} para o conteúdo da parte
• item.path {String} opcional, substitui automaticamente todas as frases de ~PATH~
• item.delay {Number} um atraso para a remoção da classe invisible
• NEW item.attrd {Object} adiciona atributos de data-key ao item

Extendido pelo componente:

• item.focused {Boolean} determina se a parte é focada ou não
• item.element {jQuery} Parte

Métodos:

• component.close(id) fechado
• component.focus(id) é focado em
• component.rename(id, name, [icon]) é uma parte

Use-o com <ui-component name="parts">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>