j-Parts

Detta innehåll kan hantera flera parts som lagras i Array och fokusera på en viss del. Det simulerar något som webbläsarkiv.

Konfigurera:

• Föregående parent {String} på grund av delstorlek (default: auto)
• margin {Number} vertikal marginal (default: 0)
• create {String} en länk till function(part), det körs om delen är skapad (kallar en gång)
• focus {String} en länk till function(part), det körs om delen är fokuserad
• close {String} en länk till function(part), det körs om delen är stängd

Bra att veta 1:

• Alla ~PATH~-fraser ersätts automatiskt med item.path
• Alla ~ID~-fraser ersätts automatiskt med item.id

föremål specifikation:

• item.id {String} mycket viktig, delidentifierare
• item.blur {String/Function(el, item)} är valfritt, en länk till function(element, item) om delen fokuseras ut
• item.focus {String/Function(el, item)} eller item.reload {String} valfritt, en länk till function(element, item) om den är fokuserad
• item.remove {String/Function(el, item)} är valfritt, en länk till function(element, item) om delen tas bort
• item.html {String} en HTML-innehåll eller användning av item.url
• item.import {String} URL för innehållet
• item.path {String} alternativ, det ersätter alla ~PATH~ fraser automatiskt
• item.delay {Number} en försening för avlägsnande av invisible klass
• NEW item.attrd {Object} lägger till data-key attribut i objektet

Utökad av komponenten:

• item.focused {Boolean} bestämmer om delen är fokuserad eller inte
• item.element {jQuery} delar

Metoder:

• component.close(id) stängs
• component.focus(id) fokuserar på
• component.rename(id, name, [icon]) återställs

Använd den med <ui-component name="parts">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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