j-Parts

Dieser Inhalt kann mehrere im Array gespeicherte parts verarbeiten und sich auf einen bestimmten Teil konzentrieren. Es simuliert so etwas wie Browser-Tabs.

Konfiguration:

• parent {String} übergeordneter Bereich aufgrund der Teilegröße (Standard: auto)
• margin {Number} vertikaler Rand (Standard: 0)
• create {String} ein Link zum function(part), er wird ausgeführt, wenn das Teil erstellt wird (einmal aufgerufen)
• focus {String} ein Link zum function(part), er wird ausgeführt, wenn das Teil fokussiert ist
• close {String} ein Link zum function(part), er wird ausgeführt, wenn das Teil geschlossen ist

Gut zu wissen 1:

• Alle ~PATH~-Sätze werden automatisch durch item.path ersetzt
• Alle ~ID~-Sätze werden automatisch durch item.id ersetzt

Artikelspezifikation:

• item.id {String} sehr wichtig, Teilekennung
• item.blur {String/Function(el, item)} optional, ein Link zum function(element, item), wenn das Teil fokussiert ist
• item.focus {String/Function(el, item)} oder item.reload {String} optional, ein Link zum function(element, item), wenn das Teil fokussiert ist
• item.remove {String/Function(el, item)} optional, ein Link zum function(element, item), wenn das Teil entfernt wird
• item.html {String} einen HTML-Inhalt oder verwenden Sie item.url
• item.import {String} URL-Adresse für den Teilinhalt
• item.path {String} optional, es ersetzt alle ~PATH~-Phrasen automatisch
• item.delay {Number} eine Verzögerung beim Entfernen der Klasse invisible
• NEW item.attrd {Object} fügt data-key-Attribute zum Elementelement hinzu

Erweitern um die Komponente:

• item.focused {Boolean} bestimmt, ob das Teil fokussiert ist oder nicht
• item.element {jQuery} Teilelement

Methoden:

• component.close(id) schließt Teil
• component.focus(id) fokussiert Teil
• component.rename(id, name, [icon]) benennt Teil um

Verwenden Sie es mit <ui-component name="parts">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

<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>